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 Breite
auf
760 Pixel fest und margin:0px auto bestimmt
den Außenabstand.
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 text-align,
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>