3. 760 Pixel breit und auf der Seite zentriert

760 Pixel breit und auf der Seite zentriert

Möchtest du ein pixelgenaues Layout erstellen, dass unter den unterschiedlichen Bildschirmauflösungen gleich aussieht, solltest du die 800x600er-Auflösung als Grundlage nehmen, denn kleinere Auflösungen werden kaum noch verwendet. Zieht man Scrollbalken und Rahmen des Browserfensters ab, dürften 760 Pixel als gesamte Breite für deine Webseite einen guten Kompromiss darstellen, ohne horizontale Scrollbalken zu erzeugen. Für höhere Auflösungen sollte das Ganze natürlich auch noch auf der Seite zentriert sein.

Ein zentrierter <div>-Container für alles

Am Einfachsten ist es einen <div>-Container auf der Seite zu zentrieren und in diesem den gesamten Seiteninhalt einzufügen. Und das geht so:

<div style="width:760px;margin:0px auto;">
Seiteninhalt...
</div>

width:760px legt die auf 760 Pixel fest und margin:0px auto bestimmt den . Gibst du für margin wie in diesem Fall zwei Werte an, so legt der erste jeweils den oberen und unteren Abstand und der zweite den linken und rechten Abstand fest. Der Wert auto besagt, dass der Browser den Abstand automatisch berechnen soll und zwar für links und rechts gleich, da ja nur ein Wert vorgegeben ist. Und gleiche Außenabstände haben nur zentrierte Objekte, oder?
Leider funktioniert das nicht beim Internet Explorer 5 und 5.5. Dieser zentriert <div>-Container mit , obwohl diese Eigenschaft nicht dafür vorgesehen ist. Also fügst du diese Eigenschaft in das <body>-Tag ein. Damit die Zentrierung nicht an die folgenden Elemente weitervererbt wird, musst du in dem <div>-Container gleich wieder ein text-align:left; einfügen:

<body style="text-align:center;">
<div style="width:760px;margin:0px auto;text-align:left;">
Seiteninhalt...
</div>
</body>

Zurück