CSS Tipp

Block zentriert mit fester Breite.

Hier geht es darum die Inhalte in einem Rahmen mit fester Größe auf der Seite zu zentrieren. Das ist im Prinzip der gleiche Effekt, wie eine Tabelle mit fester Größe in Pixeln, welche zentriert ausgerichtet ist. Auch das Hintergrundbild wird zentriert. So hat man eine Seite, die auch bei Bildschirmgröße 800 x 600 gut aussieht. Es folgen die Stildefinitionen. Die Inhalte im Body werden in einen div Tag eingeschlossen.

<style type="text/css">
body {
color: #999999;
font-family: Helvetica, Arial, sans-serif;
text-align: center; /* Zentrierung im Internet Explorer */
background-color: #333333;
background-image: url(back3.gif);
background-repeat: repeat-y;
background-position: center;
}

div#Seite {
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 590px;
padding: 0.5em;

}
</style>

 

Hinter dem body-Tag kommt ein div-Tag in dem alle Inhalte der Seite eingeschlossen werden. Ein ähnliches Beispiel befindet sich auch in selfhtml.

<body>

<div id="Seite">

Inhalt der Seite

</div>

</body>


In neueren Browsern würde eigentlich folgender Stil für den Div Tag genügen. Durch margin:auto, wird der div Tag zentriert.

div#Seite {
margin: 0 auto;
width: 700px;

Damit die Sache auch im IE Vers 5 korrekt angezeigt wird, braucht man aber im Body die Textausrichtung mittig. Die wird blöderweise im IE 5 für div Tags angewendet.
body {
text-align: center; /* Zentrierung im Internet Explorer */
}


www.pastorpixel.de