✔ komplette homepage zentrieren

J

Janis

Mitglied
Hallo und Guten Tag,

ich hab ein Prbolem mit dem zentrieren der folgenden Hompage.
Ich hab gerade 2 Stunden Google durchforstet immer wieder antworten gefunden aber keine scheinen zu funktionieren.

Kann mir jemand erklären wie ich die komplette homepage vertikal mittig ausrichte?

Vielen Dank und grüße
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
 http-equiv="content-type"
 content="text/html; charset=ISO-8859-1"><title>motowork</title><style
 type="text/css">
a:link {color:#000000; text-decoration: none;}
a:visited {color:#000000; text-decoration: none;}
a:active {color:#000000; text-decoration: none;}
</style>
</head><body
 style="background-repeat: no-repeat; float: left; color: rgb(0, 0, 0); background-color: rgb(0, 0, 0); background-image: url(file:///L:/homepage/motowork.com/neu/ebene1.jpg);"
 align="center"><table
 style="width: 800px; height: 1200px; text-align: left; margin-left: auto; margin-right: auto;"><tbody><tr><td
 style="height: 250px; width: 48px;"></td><td
 style="text-align: center; width: 85px;"></td><td
 style="width: 140px;"></td><td
 style="width: 420px; text-align: center; line-height: 100%;"><big
 style="font-weight: bold;"><big><big><span
 style="font-family: Verdana;">Meisterwerkstatt<br><br></span></big></big></big><div
 style="text-align: center;"><div
 style="text-align: center;"><big
 style="font-weight: bold;"><big><big><span
 style="font-family: Verdana;"><small><small>für
alle japanischen und europäischen Motorräder und Motorroller</small></small></span></big></big></big></div><big
 style="font-weight: bold;"><big><big><span
 style="font-family: Verdana;"></span></big></big></big></div></td><td></td></tr><tr><td
 style="height: 285px;"></td><td
 style="text-align: center; line-height: 200%; font-size: 11px; background-color: rgb(254, 249, 0);"><div
 style="text-align: center; font-family: Verdana; font-weight: bold;"><a
 href="start.html">START</a></div><span
 style="font-family: Verdana; font-weight: bold;"><a
 href="fahr.html">FAHRZEUGE</a><br><a
 href="leis.html">LEISTUNGEN</a><br><a
 href="ueber.html">ÜBER
UNS</a><br><a href="anfahrt.html">ANFAHRT</a><br><a
 href="gal.html">GALERIE</a><br><a
 href="links.html">LINKS</a></span></td><td></td><td
 style="text-align: center; vertical-align: middle; background-color: rgb(254, 249, 0);"><img
 style="height: 275px; width: 410px; vertical-align: middle;"
 alt="asd" src="ebene2.jpg"></td><td></td></tr><tr><td
 align="undefined" valign="undefined"></td><td></td><td></td><td></td><td></td></tr></tbody></table><br></body></html>
 
Und was funktioniert mit den recherchierten Lösungen nicht?


Für welche Methode du dich letzlich auch entscheidest, es sind je nachdem ein bis zwei zusätzliche <div>-Elemente mit den entsprechenden CSS-Formatierungen erforderlich.
 
Zuletzt bearbeitet:
Hi,

danke schonmal für die Hilfestellung
Ich habe jetzt Methode 1 angewandt jedoch ändert sich nur die ausrichtung de Tabellen und das auf eine Art und weise die ich nicht Nachvollziehen kann.

Mann müsste doch die ganze zentrierung im body erwähnen oder sehe ich das falsch ?

Wo liegt der Fehler?:(

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>motowork</title><style
 type="text/css">
html, body{
height:100%;
margin:0;
padding:0;
}
#center {
padding:0; border:0px solid #0f0;
width:800px; /* Breite insgesamt 450px (448px + 2 x 1px Border)
min-height:1200px;
position:absolute;
top:50%; left:50%;
}
* html #center {
height:1200px; }
a:link {color:#000000; text-decoration: none;}
a:visited {color:#000000; text-decoration: none;}
a:active {color:#000000; text-decoration: none;}
</style></head>
<body
 style="background-repeat: no-repeat; float: left; color: rgb(0, 0, 0); background-color: rgb(0, 0, 0); background-image: url(file:///L:/homepage/motowork.com/neu/ebene1.jpg);"
 align="center"><div id="center">
<table
 style="width: 800px; height: 1200px; text-align: left; margin-left: auto; margin-right: auto;"><tbody><tr><td
 style="height: 250px; width: 48px;"></td><td
 style="text-align: center; width: 85px;"></td><td
 style="width: 140px;"></td><td
 style="width: 420px; text-align: center; line-height: 100%;"><big
 style="font-weight: bold;"><big><big><span
 style="font-family: Verdana;">Meisterwerkstatt<br><br></span></big></big></big><div
 style="text-align: center;"><div
 style="text-align: center;"><big
 style="font-weight: bold;"><big><big><span
 style="font-family: Verdana;"><small><small>für
alle japanischen und europäischen Motorräder und Motorroller</small></small></span></big></big></big></div><big
 style="font-weight: bold;"><big><big><span
 style="font-family: Verdana;"></span></big></big></big></div></td><td></td></tr><tr><td
 style="height: 285px;">
</td><td
 style="text-align: center; line-height: 200%; font-size: 11px; background-color: rgb(254, 249, 0);"><div
 style="text-align: center; font-family: Verdana; font-weight: bold;"><a
 href="start.html">START</a></div><span
 style="font-family: Verdana; font-weight: bold;"><a
 href="fahr.html">FAHRZEUGE</a><br><a
 href="leis.html">LEISTUNGEN</a><br><a
 href="ueber.html">ÜBER
UNS</a><br><a href="anfahrt.html">ANFAHRT</a><br><a
 href="gal.html">GALERIE</a><br><a
 href="links.html">LINKS</a></span></td><td></td><td
 style="text-align: center; vertical-align: middle; background-color: rgb(254, 249, 0);">
<br></td><td></td></tr><tr><td
 align="undefined" valign="undefined"></td><td></td><td></td><td></td><td></td></tr></tbody></table>&gt;/div&gt;<br></div></body></html>
 
Du hast den entscheidenden Teil nicht herauskopiert, die margin-Regel:

CSS: 
#center {
  /* ist das Element, welches zentriert werden soll */
  padding:0;        /* es sind auch andere Angaben möglich, die dann 
  allerdings bei der Breite und Höhe mit berücksichtigt werden müssen. */ 
  border:1px solid #0f0; /* für die Zentrierung selbst nicht nötig */ 

  /* Angaben zu Breite und Höhe, diese können auch in em angegeben werden. */
  width:448px;      /* Breite insgesamt 450px (448px + 2 x 1px Border) */
  min-height:298px; /* Mindesthöhe insgesamt 300px (298px + 2 x 1px Border),
  bei genau dieser Höhe funktioniert die vertikale Zentrierung */
  
  /* jetzt wird die linke obere Ecke vertikal und horizontal zentriert */
  position:absolute;
  top:50%;                  
  left:50%;
  
  /* durch negative margins wird es jetzt um die Hälfte von Höhe und 
  Breite nach oben und links verschoben */
  margin:-150px 0 0 -225px; /* jeweils die Hälfte der Gesamthöhe und -breite */
}

Außerdem hast du hier den Kommentar nicht ordnungsgemäß geschlossen, was zu Fehlinterpretationen führt.

Anhand des Syntax-Highlightings erkennst du, dass alle nachfolgenden Regeln zum Kommentar zählen:

CSS: 
width:800px; /* Breite insgesamt 450px (448px + 2 x 1px Border)
min-height:1200px;
position:absolute;
top:50%; left:50%;
}
 
Zuletzt bearbeitet:
Du hast wohl auch nicht den Hinweis gelesen, dass "Methode 1" einen entscheidenden Nachteil besitzt, der bei dir zum Tragen kommt, was unmittelbar die Boxenhöhe (1200px) betrifft, wenn der Viewport diese Höhe unterschreitet:

Wenn das Browserfenster kleiner als das zentrierte Element ist, kann es pasieren, dass Inhalte oben und links nicht errreichbar sind.
Zum Vergrößern anklicken....
 
Nachtrag. Bei dieser Boxenhöhe mit 1200px wird es dir nur bedingt gelingen, die Box im Viewport vertikal zu zentrieren, denn hierfür wäre eine übergroße Monitorauflösung vonnöten, die dir wohl kaum zur Verfügung steht, wie auch den meisten Nutzern.

"Methode 2" zentriert die Box nur solange vertikal, wie die Browserfensterhöhe die Höhe der Box überschreitet. Ansonsten wird die Box bei zu kleinem Viewport am oberen Rand ausgerichtet.

Einfach mal in den beiden Beispielen das Browserfenster skalieren, um das Boxenverhalten zu studieren.
 
Zuletzt bearbeitet:
Habe es geschafft ich danke vielmals

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
 http-equiv="content-type"
 content="text/html; charset=ISO-8859-1"><title>motowork</title><style
 type="text/css">
.aussenabstand {margin-top:1px; margin-left:50%; margin-bottom:1px; margin-right:50%;}
a:link {color:#000000; text-decoration: none;}
a:visited {color:#000000; text-decoration: none;}
a:active {color:#000000; text-decoration: none;}
</style></head>
<body
 style="background-image: url(ebene1.jpg); background-repeat: no-repeat; float: left; color: rgb(0, 0, 0); background-color: rgb(0, 0, 0); background-position: 50% 1px;"><p
 class="aussenabstand"></p><table
 style="width: 800px; height: 1200px; text-align: left; margin-left: auto; margin-right: auto;"><tbody><tr><td
 style="height: 250px; width: 57px;"></td><td
 style="text-align: center; width: 85px;"></td><td
 style="width: 140px;"></td><td
 style="width: 420px; text-align: center; line-height: 100%;"><big
 style="font-weight: bold;"><big><big><span
 style="font-family: Verdana;">Meisterwerkstatt<br><br></span></big></big></big><div
 style="text-align: center;"><div
 style="text-align: center;"><big
 style="font-weight: bold;"><big><big><span
 style="font-family: Verdana;"><small><small>für
alle japanischen und europäischen Motorräder und Motorroller</small></small></span></big></big></big></div><big
 style="font-weight: bold;"><big><big><span
 style="font-family: Verdana;"></span></big></big></big></div></td><td></td></tr><tr><td
 style="height: 285px; width: 25px;">
</td><td
 style="text-align: center; line-height: 200%; font-size: 11px; background-color: rgb(254, 249, 0);"><div
 style="text-align: center; font-family: Verdana; font-weight: bold;"><a
 href="start.html">START</a></div><span
 style="font-family: Verdana; font-weight: bold;"><a
 href="fahr.html">FAHRZEUGE</a><br><a
 href="leis.html">LEISTUNGEN</a><br><a
 href="ueber.html">ÜBER
UNS</a><br><a href="anfahrt.html">ANFAHRT</a><br><a
 href="gal.html">GALERIE</a><br><a
 href="links.html">LINKS</a></span></td><td></td><td
 style="text-align: center; vertical-align: middle; background-color: rgb(254, 249, 0);">
<br></td><td></td></tr><tr><td
 align="undefined" valign="undefined"></td><td></td><td></td><td></td><td></td></tr></tbody></table><br></body></html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück