Homepage selbermachen 7.851 Themen, 35.615 Beiträge

Verfolgung starten Optionen

Drei-Spalten-Layout erstellen

Special-J / 6 Antworten / Flachansicht Nickles

Hallo allesamt,

ich bin schon lange dabei mir ein benutzerdefiniertes XHTML/CSS-Layout mit einem Header, Footer und dazwischen 3 Inhaltsspalten zu erstellen, wobei die Spalte in der Mitte flexibel in der Breite sein sollte.

Mein Grundgerüst habe ich mithilfe von Yaml (http://builder.yaml.de/##drop12) erstellt, aber irgendwie will es nicht klappen.
D.h. dass mein Layout nicht konstant in der Höhe bleibt, wenn zB eine der 3 Spalten länger ist als die anderen beiden, ziehen sich diese nicht mit und bleiben so lang, wie es der Inhalt es zulässt.

Habt ihr viellciht eine Idee oder einige CSS-Tipps?
Wäre dankbar dafür :)

bei Antwort benachrichtigen
http://www.css4you.de/wslayout1/ex0010.html HTH, Z. Zaphod
Sorry, aber das hilft mir leider nicht weiter. Mein Layout habe ich ... Special-J
xafford Special-J „Sorry, aber das hilft mir leider nicht weiter. Mein Layout habe ich...“
Optionen

Das kannst Du umgehen, indem Du die 3 Spalten in einen gemeinsamen Container setzt und diesem Container einen passenden Hintergrund verpasst, also z.B. einen 1px hohen Streifen aus den 3 Spaltenfarben in der jeweiligen Breite und diesen mit background-repeat:repeat-y wiederholen lässt.

Um zu erzwingen, dass der umfassende Container wirklich so groß angezeigt wird wie die längste, enthaltene Spalte musst Du ihm noch per CSS das Attribut position:absolute mitgeben, denn sonst orientiert er sich (zumindest in IE und Mozilla) nicht an der Größe der enthaltenen Spalten.

Das CSS sollte dann also ungefähr so aussehen:

div#container
{
background-image:url("dein/bild.gif");
background-repeat:repeat-y;
position:absolute;
}

div.column
{
float:left;
}

div#column1
{
width:150px;
}

div#column2
{
width:350px;
}

div#column3
{
width:200px;
}

Pauschalurteile sind immer falsch!!!
bei Antwort benachrichtigen
Die 3 Spalten befinden sich bei mir auch in einem gemeinsamen Container, der ... Special-J
Hmmm, wann hast Du denn das Tag erfunden? O ... Du musst aufpassen, dass Du ... xafford
Ok, damit wir am Ball bleiben, hier erstmal ein Screenshot des Prototyps ... Special-J