Höhe eines div-Rahmens

[Frank Mehl]

Moin!

Die Höhe des Navigationsfenster auf http://shiatsu-in-dresden.de/test.html
geht nicht mit dem Inhaltsbereich mit, aber ich möchte es gerne so haben.

Auf kurse.html habe ich die css abgebildet.

Weiß da jemand einen Rat für mich?

Herzlichst!
da Frank

[Frank Mehl]

Ich möchte mich noch konkretisieren:

Die Mindesthöhe soll die der Navigation sein.
Die reale Höhe soll die des höheren div-Bereichs sein.
(Wenn Navigation höher als Inhalt, dann alles Höhe der Navigation;
wenn Inhalt höher als Navi, dann alles so hoch wie der Inhalt.)

Frank

[Frank Mehl]

Nun probiere ich schon seit einer ganzen Weile selbst mein Problem in den Griff zu bekommen.

Was noch offen ist:
Wenn der Inhalt von der Textmenge das Fenster höher macht als die Navigation,
dann fehlt mir unter der Navigation die Hintergrundfarbe dessen.

Hier komme ich nicht weiter.
Weiß jemand was dazu?

LG! F.

[Gernot Back]

Hallo Frank,

wie wäre es, wenn du deinem DIV-Container mit der gleichnamigen ID overflow:hidden spendierst und die Gymnastik-Strichmännchen-Logo-Grafik samt ausreichend grünem Hintergrundbalken unten ausgerichtet diesem zuweist? Falls es dir nicht darauf ankommt, dass deine Grafik immer unten auf dem Teppich bleibt, geht es noch einfacher: dann kannst du den senkrechten grünen Balken auch als kurze, vertikal-wiederholte Hintergrundgrafik dem DIV-Element mit der ID="container" zuweisen und die Logografik. Alternativ könntest du die Logo-Grafik auch absolut am relativ positionierten "Container" unten ausrichten.

Gruß Gernot

[Frank Mehl]

Hi Gernot!

Mit overflow:hidden habe ich nicht erreichen können. :(
Das Logo kann ich auch nicht fest "unten" positionieren,
weil unten je nach Inhalt unterschiedlich weit ist (zw. ca.580 und 1000px).

Frank

[Gernot Back]

Hallo Frank,

Mit overflow:hidden habe ich nicht erreichen können. :(

Dass es damit alleine nicht getan ist, habe ich doch auch gesagt. Du musst dann schon auch mit einer Hintergrundgrafik in dem die floatenden Spalten umschließenden Container mit overflow:hidden arbeiten.

http://www.alistapart.com/articles/fauxcolumns/

Gruß Gernot

[Frank Mehl]

Na Deine Hilfe und vor allem auch Dein Link fand ich sehr interessant.
Natürlich habe ich es ausprobiert. Aber irgendwarum klappts nicht.

In meiner CSS siehts so aus:
#container #navigation {width: 178px; min-height: 570px; float:left; background:#ECF2E8 url(images/menue.jpg); background-repeat:repeat-y; overflow:hidden;  border-right:solid 1px #7B917C;}

Und auf der Webseite so (runter scrollen!).

F.

[Gernot Back]

Hallo Frank,

#container #navigation {width: 178px; min-height: 570px; float:left; background:#ECF2E8 url(images/menue.jpg); background-repeat:repeat-y; overflow:hidden;  border-right:solid 1px #7B917C;}

Und auf der Webseite so (runter scrollen!).

Das habe ich gesehen. ich sprach ja auch davon, dass du overflow:hidden sowie das Background-Image dem Element mit der ID="container" verpassen solltest. Stattdessen hast du aber beide Eigenschaften dem Element mit der ID="navigation" gegeben.

Gruß Gernot

[Frank Mehl]

So langsam habe ich das Gefühl,
dass mein Problem ganz wo anders liegt.
Ich habe das Bild (mal mit, mal ohne overflow) in Container eingebunden,
aber es wird nicht dargestellt.
Genau so ist es, wenn ich für Container eine Hintergrundfarbe angeben.
Statt die benannte Hintergrundfarbe von Container wird die Hintergrundfarbe von Body angezeigt.
???????????????????????????

[Gernot Back]

Hallo Frank,

So langsam habe ich das Gefühl,
dass mein Problem ganz wo anders liegt.
Ich habe das Bild (mal mit, mal ohne overflow) in Container eingebunden,
aber es wird nicht dargestellt.

setz doch als letztes hinter deine beiden floatenden Spaltenelemente auch noch ein BR-Element mit der CSS-Eigenschaft clear:both und vielleicht (damit es auch ja in keinem Browser einen zusätzlichen Abstand nach unten erzeugt) mit der Eigenschaft line-height:0; ein!

Auf jeden Fall gehören sowohl die Overflow- als auch die Background-Eigenschaft dem beide Spalten umschließenden Container zugewiesen. Am besten liest du dir dazu auch mal den Artikel zu Faux-Columns durch oder googlest danach. Da findest du dann auch Erklärungen auf Deutsch dazu, unter anderem auch massenweise im hiesigen Archiv.

Gruß Gernot

[Frank Mehl]

Hi Gernot!

setz doch als letztes hinter deine beiden floatenden Spaltenelemente auch noch ein BR-Element mit der CSS-Eigenschaft clear:both und vielleicht (damit es auch ja in keinem Browser einen zusätzlichen Abstand nach unten erzeugt) mit der Eigenschaft line-height:0; ein!

Stimmt, unten ragt es über. :(
clear:both habe ich sowohl im css (in container),
als auch in die html-Dateien (jeweils am Ende des div's (inhalt & navigation)
erfolglos eingetragen.

line-height:0; schiebt mir meinen text auf eine fette Linie zusammen.

Wo genau sollte es denn positioniert werden???

F.

[Gernot Back]

Hallo Frank,

Wo genau sollte es denn positioniert werden???

Das BR-Element mit den Eigenschaften clear (mit both macht man eigentlich nichts falsch, es reicht aber auch enn nur in eine Richtung floatende Elemente vorausgehen ein entsprechendes Clearing und line-height:0) steht direkt hinter den floatenden Elementen, noch innerhalb des umschließenden Containers, den du mitsamt seinem Hintergrundbild damit aufspannen willst.

Gruß Gernot

[Kai345]

[latex]Mae  govannen![/latex]

Wo genau sollte es denn positioniert werden???

Das BR-Element mit den Eigenschaften clear (mit both macht man eigentlich nichts falsch, es reicht aber auch enn nur in eine Richtung floatende Elemente vorausgehen ein entsprechendes Clearing und line-height:0) steht direkt hinter den floatenden Elementen, noch innerhalb des umschließenden Containers, den du mitsamt seinem Hintergrundbild damit aufspannen willst.

Noch besser wäre es, das BR-Element durch gar nichts zu ersetzen

Cü,

Kai

[Frank Mehl]

Ha, ich habs!
So, wie Du Gernot es mir empfohlen hast! :)
Danke!