Seite 1 von 2
3-spaltiges CSS-Layout mit gleicher Höhe der 3 Spalten
Verfasst: 26.04.2006, 16:58
von robo
Hi Leute,
ich suche eine Lösung für ein 3-spaltiges CSS-Layout mit Kopf- und Fußzeile über die ganze Breite, bei dem die Höhe aller 3 Spalten gleich ist und sich automatisch dem Inhalt der mittleren Spalte anpasst. Alternativ können sich auch die anderen beiden niedereren Spalten der Höhe der höchsten Spalte anpassen. Eine feste Höhe (in px, em oder sonstwas) kommt nicht in Frage. Also ein funktional vollwertiger Ersatz für ein klassisches Tabellenlayout. Wie ist das zu bewerkstelligen?
cu, Robo
Verfasst: 26.04.2006, 17:08
von nerd
Verfasst: 26.04.2006, 17:08
von mark
Verfasst: 26.04.2006, 17:09
von tingting
Verfasst: 26.04.2006, 17:14
von robo
Eben nicht, die Spalten sind ja unterschiedlich hoch. Das kenne ich schon.
Die anderen Sachen werde ich mir mal ansehen, danke dafür.
cu, Robo
Verfasst: 26.04.2006, 17:29
von robo
Das isses auch nicht, die Spalten sind ja nicht gleich hoch. Gleich hoch heisst, dass der Hintergrund einer jeden Spalte bis zum Footer durchgehen muss. Trotzdem danke.
cu, Robo
Verfasst: 26.04.2006, 17:33
von robo
Das sieht doch sehr gut aus.
Spitze! Genau das habe ich gesucht. Vielen Dank.
cu, Robo
3-spaltiges CSS-Layout mit gleicher Höhe der 3 Spalten
Verfasst: 27.04.2006, 12:33
von robo
Jetzt habe ich noch eine Frage zu einer Sache, die ich partout nicht verstehe. Erst der Code.
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
#header {
height: 40px;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
#wrapper {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
background-color: yellow;
}
#leftcolumn {
float: left;
width: 10em;
background-color: lightgreen;
}
#rightcolumn {
float: right;
width: 10em;
background-color: lightgreen;
}
#clear {
clear: both;
}
#content {
margin: 0px 10em 0px 10em;
background-color: magenta;
}
#footer {
height: 40px;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<div id="header">
Header
</div>
<div id="wrapper">
<div id="leftcolumn">
<ul>
<li><a href="#">Menue 1</a></li>
<li><a href="#">Menue 2</a></li>
<li><a href="#">Menue 3</a></li>
</ul>
</div>
<div id="rightcolumn">
<p>
Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
</div>
<div id="content">
<h1>Überschrift</h1>
<p>
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
<p>
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
</div>
<div id="clear">
</div>
</div>
<div id="footer">
Footer
</div>
</body>
</html>
Damit man das Problem sieht, habe ich alles bunt eingefärbt.
Wenn man jetzt den Wrapper-Container in der gleichen Farbe wie die beiden Spalten links und rechts einfärben würde, dann wüden die Spalten scheinbar bis nach unten durchgehen - wenn da nicht der Rand über und unter dem Content-Container wäre. Und der kommt von <h1> bzw. <p>. Und das verstehe ich nicht. <h1> und <p> sind doch im Content-Container drin, wieso wird dann der Rand vom Wrapper-Container ausgehend genommen? IE und Gecko liefern hier übrigens das gleiche Ergebnis ...
Gibt es eine Lösung für das Problem? Letztendlich soll der gelbe Hintergrund nur noch unterhalb der beiden Spalten links und rechts zum Vorschein kommen.
cu, Robo
3-spaltiges CSS-Layout mit gleicher Höhe der 3 Spalten
Verfasst: 27.04.2006, 12:54
von tingeltangeltill
der blaue wrapper rand hat schon seine richtigkeit, denn er umfasst ja die right, left und content.
aber vor der eigentlichen problematik das right und left runtergezogen angezeigt werden sollen stehe ich auch.
gruss till
btw: du solltest css immer auf firefox und opera entwickeln, denn das sind die standardtreusten browser.
Verfasst: 27.04.2006, 13:00
von robo
tingeltangeltill hat geschrieben:der blaue wrapper rand hat schon seine richtigkeit, denn er umfasst ja die right, left und content.
Um den geht es ja gar nicht, es geht darum, dass oberhalb des Contents noch ein gelber "Rand" erscheint, der ja in Wirklichkeit der Wrapper-Hintergrund ist.
tingeltangeltill hat geschrieben:aber vor der eigentlichen problematik das right und left runtergezogen angezeigt werden sollen stehe ich auch.
Dann sind wir ja schon zu zweit.
tingeltangeltill hat geschrieben:btw: du solltest css immer auf firefox und opera entwickeln, denn das sind die standardtreusten browser.
Mache ich doch. Ich entwickle mit Seamonkey, der hat die Gecko-Engine und damit die gleiche Engine, wie Firefox.
cu, Robo
Verfasst: 27.04.2006, 13:22
von tingeltangeltill
ach das ist dein problem, dass habe ich dann völlig falsch verstanden.
das sind die auswirkungen der block-elemente <h> und <p>.
mach die mal im content weg und du siehst, kein leer mehr.
das solltest du am anfang der css-datei notieren, damit werden alle margin und padding auf 0 gesetzt (einheit nicht benötigt). das hat sich so eingebürgert --> vermeidet viele probleme, spart unnötigen code (muss nicht überall auf 0 gesetzt werden)
gruss till
Verfasst: 27.04.2006, 13:46
von robo
tingeltangeltill hat geschrieben:ach das ist dein problem, dass habe ich dann völlig falsch verstanden.
das sind die auswirkungen der block-elemente <h> und <p>.
mach die mal im content weg und du siehst, kein leer mehr.
das solltest du am anfang der css-datei notieren, damit werden alle margin und padding auf 0 gesetzt (einheit nicht benötigt). das hat sich so eingebürgert --> vermeidet viele probleme, spart unnötigen code (muss nicht überall auf 0 gesetzt werden)
Das kann's ja wohl nicht sein, oder? Ich will die Ränder nicht auf 0 haben, sonst könnte ich die Block-Elemente ja auch gleich ganz weglassen und alles würde ohne Abstände zusammengeklebt auf einem Haufen rumgammeln. Nein, die Überschrift soll ja einen kleinen Abstand nach oben haben, und zwischen den Absätzen soll es auch einen Abstand geben!
cu, Robo
Verfasst: 27.04.2006, 14:00
von tingeltangeltill
einweg ist der beste weg zur besserung: ich glaub ich erzähl scheibenkleister
so hab ich das bei mir auch gemacht, ich muss mal schauen, wie ich den rest dann umgesetzt habe
Verfasst: 27.04.2006, 14:05
von robo
So wie's aussieht, reicht es, margin auf 0 zu setzen und den Blockelementen dann stattdessen ein padding zuzuweisen ...
cu, Robo
Verfasst: 27.04.2006, 14:12
von spickzettel
Das kann's ja wohl nicht sein, oder? Ich will die Ränder nicht auf 0 haben, sonst könnte ich die Block-Elemente ja auch gleich ganz weglassen und alles würde ohne Abstände zusammengeklebt auf einem Haufen rumgammeln.
Das was du willst, ist aber ein padding und kein margin.
So etwas wie:
liefert das Gewünschte
(Okay, zu langsam getippt...)
