• Das kreative Thema des Monats Oktober wird vor allem diejenigen unter Euch besonders ansprechen, denen Do-it-yourself quasi im Blut liegt. Zeigt uns Eure Improvisationskünste oder fotografiert, was andere Leute sich so im Alltag zusammengestrickt haben. --> Zum Mitmachen bitte hier klicken

Brett vorm Kopf: CSS-Layout

Sscadx

Ingrid Marie
Registriert
29.10.08
Beiträge
264
Moin moin.

Ich habe mal schnell eine Test-Website geschrieben (http://www.schacknetz.de/test2/) und habe ein Brett vorm Kopf, dass sich schon seit eine Stunde nicht lösen will.

Ich möchte, dass die sich die Boxen Sidebar1 und Sidebar2 automatisch verlängern, wenn der Inhalt von MainContent länger wird als der Inhalt der Sidebar-Boxen. Soll heißen: der "Hintergrund" der Sidebar-Boxen soll sich verlängern bis er unten auf den Footer stößt.

Kann ja nicht so schwer sein - aber ich stehe da total auf dem Schlauch.

Das CSS liegt hier: http://www.schacknetz.de/test2/style.css.

Wäre nett, wenn sich das mal jemand 30 Sekunden angucken, mich kurz auslachen und mir dann Bescheid geben könnte. :)
 
EDIT .. habe grad gemerkt, dass es doch nich so läuft, wie ich das eigentlich wollte (alter inhalt gelöscht) ..

prinzipiell muss das containerelement der beiden sidebars auch 100% höhe haben (die sidebars an sich natürlich auch), ansonsten nehmen die kinderelemente die prozentangaben nicht an .. ich würde aber in deinem fall die verschachtelung der divs ändern, sodass maincontent und die beiden sidebars in einem sind und header und footer ausserhalb. denk, dass es dann besser klappt
 
Zuletzt bearbeitet:
Moin moin.

Ich habe mal schnell eine Test-Website geschrieben (http://www.schacknetz.de/test2/) und habe ein Brett vorm Kopf, dass sich schon seit eine Stunde nicht lösen will.

Ich möchte, dass die sich die Boxen Sidebar1 und Sidebar2 automatisch verlängern, wenn der Inhalt von MainContent länger wird als der Inhalt der Sidebar-Boxen. Soll heißen: der "Hintergrund" der Sidebar-Boxen soll sich verlängern bis er unten auf den Footer stößt.

Kann ja nicht so schwer sein - aber ich stehe da total auf dem Schlauch.

Das CSS liegt hier: http://www.schacknetz.de/test2/style.css.

Wäre nett, wenn sich das mal jemand 30 Sekunden angucken, mich kurz auslachen und mir dann Bescheid geben könnte. :)

Du könntest dem Page-Wrap Container einfach die Hintergrundfarbe zuweisen, die eigentlich die Sidebars haben sollten, etwas mit Margin spielen und dann sollte es auf's Gleiche herauskommen ;)

In etwa:
Code:
#page-wrap { 
margin: 10px auto; width: 980px; background: #E7DBD5
}
#header { 
[…] margin: 0px; 
}
 
Du könntest dem Page-Wrap Container einfach die Hintergrundfarbe zuweisen, die eigentlich die Sidebars haben sollten, etwas mit Margin spielen und dann sollte es auf's Gleiche herauskommen ;)

In etwa:
Code:
#page-wrap { 
margin: 10px auto; width: 980px; background: #E7DBD5
}
#header { 
[…] margin: 0px; 
}

Ist inzwischen gelöst. Aber danke trotzdem. :)
 
So machen das die meisten anderen Seiten auch, es gibt da leider nicht so direkt eine Lösung, außer der überall verschrienen Tabelle...
Warum ist die eigentlich so schlimm?
 
So machen das die meisten anderen Seiten auch, es gibt da leider nicht so direkt eine Lösung, außer der überall verschrienen Tabelle...
Warum ist die eigentlich so schlimm?

Tabellen sind nunmal ein inhaltliches und kein Layout-Element und bringen einige Probleme mit sich.
Zum Einstieg: http://davespicks.com/essays/notables.html

In CSS3 geht das Ganz zum Glück übrigens relativ einfach - aber bis das Standard ist, dauert's wohl noch etwas... leider.