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>