nicht angemeldet
Grundlayout mit CSS-Boxen
Hallo,
bin gerade dabei mich in css einzuarbeiten.
dazu will ich ein Grundgerüst mit DIV's erstellen, in das ich später via PHP den Inhalt einfliessen lasse.
Folgendes habe ich bisher erstellt:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>t</title>
<style type="text/css">
.container {
background-color: E0E0E0;
width:1000px;
margin: 0 auto;
}
.kopf {
background-color: #FFCE00;
height: 150px;
width: 1000px;
}
.boxlinks {
background-color: #FFFFFF;
width: 200px;
float: left;
}
.boxmitte {
background-color: #808080;
width: 600px;
float: left;
}
.boxrechts {
background-color: #FFFFFF;
width: 200px;
float: left;
}
.fuss {
background-color: #FFFFFF;
background-color: #FFCE00;
width: 1000px;
}
</style>
</head>
<body>
<div class="container">
<div class="kopf">Kopf </div>
<div class="boxlinks">
Lirum, larum Löffelstiel alte Weiber essen viel,
junge müssen fasten. s'Brot liegt im Kasten,
s'Messer liegt daneben, ei welch ein lustig Leben!<br><br>
Lirum, larum Löffelstiel wer nichts lernt, der kann nicht viel.
Reiche Leute essen Speck,arme Leute essen Dreck.
Lirum, larum Leier,die Butter, die ist teuer.
</div>
<div class="boxmitte">Mitte </div>
<div class="boxrechts">Rechts </div>
<div class="fuss">Fuss </div
</div>
</body>
</html>
Wie krieg ich das jetzt hin, dass die 3 mittleren Boxen 3-Spalten bilden, die je nach Länge des Contents länger werden und der Fuss immer unten dran hängt?
-
Yerf!
Wie krieg ich das jetzt hin, dass die 3 mittleren Boxen 3-Spalten bilden, die je nach Länge des Contents länger werden und der Fuss immer unten dran hängt?
Dem Fuß fehlt noch ein "clear:left", damit er unter den Spalten landet. Wenn dann noch die Splaten alle gleich hoch sein sollen, dann musst du dich mit "faux Columns" beschäftigen. Einen Einstieg gibts z.B. hier.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]--> -
-
Yerf!
Ich glaube du suchst nach inline-block.
Ist natürlich auch eine Variante. Umgeht ein paar der Probleme die man mit float so hat, ist aber noch nicht so weit verbreitet und ausgetestet. Aber nachdem der FF2 langsam am verschwinden ist sicher eine Überlegung wert.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
-
-
Erstmal vielen Dank für eure Bemühungen.
Nnaja, da muss man ganz schön tricksen.
Habe jetz mal rumexperimentiert und in die Quellen einiger großer Seiten geschaut. Die sehen das ganze wohl etwas locker und mischen lustig divs mit Tabellen. Je nach dem, wie sie ihr Ziel gerade am einfachsten erreichen.-
In dem Fall interessiert dich vielleicht auch dieser Artikel http://technikwuerze.de/podcast/technikwuerze129/
Grüße, Matze
-