Div Container - höhe angleichen

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

habe kaum Erfahrungen in Webentwicklung und eine Anfängerfrage.
Ich habe ein Layout entworfen und meine Div-Container (meiner Meinung nach) richtig verschachtelt.

Im großen und ganzen ist es ein 2-Spalten-Layout; also nix besonderes.

Das Problem welches ich habe bezieht sich auf die Höhe der linken Navigationspalte und die Höhe des Contentbereichs. Beide sollen gleich hoch sein, jedoch ist es abhängig vom Inhalt wieviel Platz die Navigation bzw. der Content einnehmen.
Da ich für die Navigation und für den Content unterschiedliche Hintergründe gewählt habe, fällt es auf, dass die Container nicht gleich hoch sind.

Welche CSS-Befehle vollbringen das Wunder der Ausdehnung bis zum nächsten div-Container? -> height:100%; ist es jedenfalls nicht.

Habe mal ein Grundgerüst hingeschrieben, damit man nicht „foo“ und „bar“ arbeiten muss :wink:

…

…

Über eine Rückmeldung würde ich mich freuen und schon einmal Danke im Voraus.

Liebe Grüße

Sebastian_

#2

Hi,

lies Dich mal hier ein:
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#…

Gruß
Ingo

#3

ingo du rocky … bist aber letzte zeit sowas von aktiv hier …
very nice

h♥rzlichen Gruß

#4

Moin,

habe kaum Erfahrungen in Webentwicklung und eine
Anfängerfrage.

Als Anfänger sollte man HTML richtig lernen. Erst den Inhalt, dann die Semantik, dann erst Layout und Design. Es könnte sein, dass Du sonst div-Suppe kochst und den Sinn von HTML eigentlich nicht richtig verstehst, wie das bei leider sehr vielen der Fall ist. Das nur so nebenbei.

Ich habe ein Layout entworfen und meine Div-Container (meiner
Meinung nach) richtig verschachtelt.

Layout kann man nämlich auch ohne divs machen. Bedenke, dass ein div immer eine logische Gruppe auszeichnet.

Das Problem welches ich habe bezieht sich auf die Höhe der
linken Navigationspalte und die Höhe des Contentbereichs.
Beide sollen gleich hoch sein

Sowas gibts nur für Tabellenzellen (oder display:table-cell).
Um das dennoch optisch umzusetzen, benutzt man ein passendes Hintergrundbild.

Da ich für die Navigation und für den Content unterschiedliche
Hintergründe gewählt habe, fällt es auf, dass die Container
nicht gleich hoch sind.

Mach ein Hintergrundbild daraus.

Welche CSS-Befehle vollbringen das Wunder der Ausdehnung bis
zum nächsten div-Container? -> height:100%; ist es jedenfalls
nicht.

Nein, denn height bezieht sich nur auf die Höhe des Elternelements.

Und jetzt noch ein Tipp, der nichts mit der eigentlichen Frage zu tun hat: Auch IDs oder Klassennamen sollte man semantisch sinnvoll vergeben. Wenn Du sonst Deine linke Spalte (Leerzeichen sind nicht erlaubt, btw) mal nach rechts schieben willst, musst Du Deinen HTML-Code ändern oder mit falschen Bezeichnungen leben. Beides ist nicht nötig und Krampf.

Freundliche Grüße,
-Efchen

#5

Hallo Efchen,

Danke für deine Ratschläge :wink:

Ich bin ein „learning-by-doing“-Mensch und muss gleich alles probieren, um zu sehen was da alles passiert.
Sicherlich bleibt es da nicht aus, dass man nicht gleich perfekte Lösungen entwirft.
An sich sieht CSS sehr einfach aus, aber ich bin immer wieder überrascht was manche kleinen Vorhaben für gravierende Änderungen nach sich ziehen.

Mit der Bezeichnung der divs gebe ich dir Recht und werde diese dann noch mal überarbeiten.

Viele Grüße

Sebastian_

#6

Hallo Ingo,

die Anleitung unter deinem angegebenen Link habe ich verstanden und funktioniert.
Vielen Dank für deine Hilfe.
Das einzige Manko dieser Lösung ist, dass die Seitenbreite fest angegeben werden muss.
Gibt es auch eine Lösung mit Fluid-Layout?

Viele Grüße

Sebastian_

#7

Hi,

lies Dich mal hier ein:
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#…

das CSS aus dem Beispiel ist nicht sonderlich empfehlenswert. Fixe Breiten kann man ja nehmen, aber das Inhalts-Div durch einen linken Margin an seine Stelle zu befördern ist doch recht unelegant und unflexibel. Passender wäre es, beide Elemente inline zu floaten.

Gruß

osmodius