/ CSS: Nachtrag (archiv/2002/12/32827/#m178154)
Jakob Schneider
- browser
0 Axel Richter0 emu
Moin,
Originalbeitrag: http://forum.de.selfhtml.org/archiv/2002/12/32827/#m178154
ich hatte die ganzen tipps jetzt alle mal durchprobiert, jedoch hat es nicht geholfen.
Das sonderbare ist jetzt, dass mein Banner (welcher auch im Haupt-div-tag liegt) zentriert dargestellt wird, die anderen inhalte jedoch immernoch linksbündig... das ist doch komisch...
Wer Mozilla, bzw. Opera benutzt, kann es sich ja bitte nochmal anschauen (http://www.aquariensite.de)
Ich bitte wiederum um hilfe..
Frohe weihnachten und LG,
Jakob
Hallo Jakob,
hattest Du nicht gesagt, Du hättest es verstanden? ;-)
Deine Seite soll in etwa folgende Struktur haben:
<html>
<head>
<title></title>
<style type="text/css">
<!--
body {text-align:center;}
div.main {width:550px; text-align:left; margin:auto;}
div.logo {border:1px solid #000000;}
div.hmenu {border:1px solid #FFFFFF; color:#FFFFFF; background-color:#0000FF;}
div.umenu {border:1px solid #FFFFFF; color:#FFFFFF; background-color:#0000FF;}
div.inhalt {border:1px solid #000000;}
div.fuss {border:1px solid #FFFFFF; color:#FFFFFF; background-color:#0000FF;}
-->
</style>
</head>
<body>
<div class="main">
<div class="logo">Logo-Image</div>
<div class="hmenu">Hauptmenü</div>
<div class="umenu">Untermenü</div>
<div class="inhalt">
<p>Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt</p>
<p>Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt</p>
<p>Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt Textinhalt</p>
</div>
<div class="fuss">Fußzeile</div>
</div>
</body>
</html>
Das hier: body {text-align:center;} ist für den IE, der margin:auto nicht so recht umsetzen will.
Das hier: div.main {width:550px; text-align:left; margin:auto;} ist für die anderen Browser. Margin:auto sorgt dafür, dass der Bereich mit einem so großen Rand umgeben wird, dass er in der Mitte des Browserfensters steht. Text-align:center würde hier nichts bringen, weil sich das, wie der Name schon sagt, nicht auf den gesamten Bereich, sondern auf den Textinhalt des Bereiches auswirken würde. Der Main-Bereich setzt außerdem die Breite für die in ihm liegenden Bereiche fest.
Dein Logo wurde deshalb zentriert, weil Du Deinem Main-Bereich ein text-align:center mitgegeben hattest. Ohne Breitenangbe ist der bei Dir, als Block-Element, so breit wie das Browser-Fenster. Ein Inline-Element in ihm (das Logo) wird also zentriert, auch wenn es wiederum in einem Block (divlogo) ohne Breitenangabe steht. Blockelemente mit fixer Breite (die anderen Bereiche) in ihm werden allerdings nicht zentriert.
Gruß
Axel
Hallo!
</archiv/2002/12/32827/#m178154>
ich hatte die ganzen tipps jetzt alle mal durchprobiert, jedoch hat
es nicht geholfen.
div {
margin-left:auto;
margin-right:auto;
}
emu
[...]