nicht angemeldet
Mehrere div-Bereiche mittig platzieren
Hallo!
Ich möchte auf einer Kunstseite neun div-Felder platzieren (3 x 3). Die Felder haben alle eine Breite von 200 Pixeln und eine Höhe von 100 Pixeln. Ich möchte, dass die 9 Felder, die alle eine andere Farbe haben, direkt aneinander grenzen und horizontal immer in der Mitte sein sollen. Der Rand nach links und nach rechts soll also gleich groß und weiß sein.
Mit einer Tabelle würde es zwar wunderbar klappen, ich soll es aber mit div-Elementen machen. Ich habe vieles versucht, aber der eine oder andere Browser macht es nicht mit. Könnte jemand mir weiterhelfen? Am liebsten wäre mir ein kleines CSS- und HTML-Beispiel, wenn das nicht zu viel verlangt ist.
Achja, der NN4.7 ist dem Auftraggeber egal.
Vielen Dank
Stephan
-
Hallo,
Ich möchte auf einer Kunstseite neun div-Felder platzieren (3 x 3). Die Felder haben alle eine Breite von 200 Pixeln und eine Höhe von 100 Pixeln. Ich möchte, dass die 9 Felder, die alle eine andere Farbe haben, direkt aneinander grenzen und horizontal immer in der Mitte sein sollen. Der Rand nach links und nach rechts soll also gleich groß und weiß sein.
Achja, der NN4.7 ist dem Auftraggeber egal.
Unter diesen Voraussetzungen sollte das eigentlich kein großes Problem sein.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Coloured DIVs</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
body {text-align:center;}
div#container {margin:auto; width:600px;}
div.field {float:left; width:200px; height:100px;}
-->
</style>
</head>
<body>
<div id="container">
<div class="field" style="background-color:#FF00FF;"> </div>
<div class="field" style="background-color:#00AEAD;"> </div>
<div class="field" style="background-color:#FF0084;"> </div>
<div class="field" style="background-color:#FF7D7B;"> </div>
<div class="field" style="background-color:#AD00FF;"> </div>
<div class="field" style="background-color:#FF7D00;"> </div>
<div class="field" style="background-color:#FF007B;"> </div>
<div class="field" style="background-color:#00FFAD;"> </div>
<div class="field" style="background-color:#00AEFF;"> </div>
</div>
</body>
</html>Die Einstellung text-align:center; für das BODY-Element ist für IE5 gedacht, weil der das margin:auto für das Container-DIV nicht interpretiert. Zu beachten ist allerdings, dass das Container-DIV nicht wirklich ein Container ist. Die Field-DIVs befinden sich also nicht _darin_, sondern orientieren sich nur an dessen Breite.
viele Grüße
Axel
-
Vielen vielen Dank für die Mühe, super!
Stephan
-