Elemente mittig ausrichten
Bernd
- css
0 schwarze Piste0 Bernd0 schwarze Piste0 Bernd
0 zoidberg
Hallo,
ich schaff es einfach nicht drei div-Tag mit CSS mittig in der Seite zu positionieren.
Hier mein Quelltext:
<html>
<head>
<title>test</title>
<style type="text/css">
body {margin: 0px;
}
#alles {
width: 100%;
background: #FF9900;
text-align: center;
}
#links {float: left;
background: #CCCCCC;
width: 50px;
}
#mitte {width: 600px;
float: left;
background: #DDDDDD;
text-align: center;
}
#rechts {float: left;
background: #CCCCCC;
width: 50px;
}
</style>
</head>
<body>
<div id="alles">
<div id="links">links</div>
<div id="mitte">mitte</div>
<div id="rechts">rechts</div>
</span>
</body>
</html>
Es sollen nun die div-Tags mit der id: links, mitte und rechts in der Mitte der Seite angezeigt werden. Ich habs schon mit align="center" und CSS: text-align: center versucht, aber es hilft nichts.
Vielen Dank für die Hilfe im vorraus
Tachchen!
Nur ein Tipp für solche Layouts:
Ziemlich kompatibilitäsproblemlos bekommst du sowas hin, wenn du die mittlere Contenteinheit auschließlich per margin positionierst UND dimensionierst und die Einheiten links und rechts per absoluter Positionierung über den Rest legst.
Gruß
Die schwarze Piste
Die Ideen ist gut, aber was ist wenn jemand eine hohe bzw. eine niedrige Bildschirmauflöung hat? Das ist das ganze nicht mehr in der Mitte bzw. hinter den rechten Bildschirmrand versteckt.
Trotzdem Danke für die schnelle Antwort.
mfg Bernd
Tachchen!
Die Ideen ist gut, aber was ist wenn jemand eine hohe bzw. eine niedrige Bildschirmauflöung hat? Das ist das ganze nicht mehr in der Mitte bzw. hinter den rechten Bildschirmrand versteckt.
Denk noch einmal drüber nach, wie sich verschiedene Fenstergrößen auswirken auf eine Box, die ausschließlich per margin dimensioniert ist! ;-)
Gruß
Die schwarze Piste
Sie verändert ihre Größe, oder?
Sie soll aber immer 630px breit sein.
Gibt's keine andere Lösung außer Tabellen oder habe ich etwas falsch verstanden.
mfg Bernd
Hi,
<body>
<div id="alles">
<div id="links">links</div>
<div id="mitte">mitte</div>
<div id="rechts">rechts</div>
</span>
</body>
</html>
4 x <div> + 3 x </div> + 1 x </span> = ????
mfg - zoidberg