Div bis zum unteren Rand verlängern

[Sven]

Hallo ihr,

ich hab eine einfache DIV-Konstruktion:

Siehe hier

Das Menu-Div würd ich nun gern so festlegen, dass es sich immer bis zum unteren Rand erstreckt. height:100%; brachte keinen Erfolg.

Hat da jemand einen Tipp? Das ist bestimmt eigentlich eine ganz einfache Sache...

Lg
Sven

[Freddy]

Für mich sieht die "einfache DIV-Konstruktion" etwas seltsam bzw. kompliziert aus.
Sofern es hier niemand versteht solltest du mal komplett neu anfangen die Konstruktion zu bauen und immer wieder damit "spielerisch lernen".

[Steel]

Hallo erstmal...

Für mich sieht die "einfache DIV-Konstruktion" etwas seltsam bzw. kompliziert aus.

Für mich nach einer standard Divkonstruktion für ein allgemeines, zentriertes, zweispaltiges Layout. Sowas würd ich z.B. für ein CMS als Template benutzen, weil ich nicht weiß, welche Inhalte später dort eingefügt werden. Wenn man das genau weiß, bietet sich sicher ein syntaktisch korrekteres Layout an, z.b. eine Liste statt eines Divs für das Menü und ein h für den Header. Ansonsten sind Divs die Container der Wahl.

Sofern es hier niemand versteht solltest du mal komplett neu anfangen die Konstruktion zu bauen und immer wieder damit "spielerisch lernen".

Ich hab fast das Gefühl, wir kennen unterschiedlichen Quelltext... :) Wenn ich  10x das gewünschte Layout erstellen würde die Struktur bliebe doch ziemlich genauso. Nur das letzte div mit dem inlinestyle fällt etwas aus dem Rahmen. Ich seh's als Footer oder Test. Darüber ob nicht body das äussere Div ersetzen sollte, muß man auch nicht unbedingt diskutieren.

[Steel]

Hi!

So lange keine Antwort? Kein Hinweis auf die FAQ oder die Forumssuche? Muss am Wetter liegen... ;)

Also:

1. FAQ
2. (Forums)Suche
3. Faux Columns

Dein Problem ist ganz und gar nicht trivial. Die einfachste Sache, wenn du einfach möchtest, daß die Spalte ihre Farbe bis ganz nach unten beibehält, sind genannte Faux Columns. Diese 'falschen Spalten' lassen einfach das Design so erscheinen, als ob alle Spalten gleichlang sind.

In deinem Beispiel wirkt z.B.

border-left:185px solid #f3f3f3;

wahre Wunder wenn du damit das float:left von #main ersetzt.

Sollte das nicht reichen musst du dich nochmal melden.

Ansonsten gibts im Internet einen wahren Fundus an Templates und Tutorials. Ich mag die Intensivstation (http://www.intensivstation.ch/templates/). Das ist vielleicht nicht 100% syntaktisch korrektes HTML und tendiert leicht zur Divsuppe, ist aber toll zum Verstehen und z.B. für CMS-Templates gut geeignet, wie ich finde.

[Sven]

Hey Steel,

vielen Dank erstmal - du hattest Recht, es wirkt Wunder ;) Ich hab außerdem jetzt das Menü-DIV durch eine Liste ersetzt.

Vielleicht mag sich jemand das Beispiel nochmal ansehen, es gibt nämlich noch ein kleines Problem:

Beispiel

Und zwar - wie soll es anders sein - macht der IE6 Probleme. An der Stelle, wo das linke Menü zuende ist, hat das Main-DIV einen kleinen Versatz... aber Bilder sagen mehr:

In allen anderen Browsern stimmts. Ich kenne zwar die CSS-Browserweiche für Internet Explorer, aber bisher hat keine meiner Maßnahmen den Versatz beeinflussen können.

Hat jemand eine Idee?

Grüße
Sven

[Marc]

Hallo,

Und zwar - wie soll es anders sein - macht der IE6 Probleme. An der Stelle, wo das linke Menü zuende ist, hat das Main-DIV einen kleinen Versatz... aber Bilder sagen mehr:

Hat jemand eine Idee?

Google mal nach 3px-Bug - vielleicht hättest Du aber auch einfach den Ratschlag von Steel befolgen sollen. Er ist ein echtes Patentrezept. ;-)

Nochmal also:
Also:

1. FAQ
2. (Forums)Suche
3. Faux Columns

Viele Grüße,
Marc.

[Sven]

Google mal nach 3px-Bug - vielleicht hättest Du aber auch einfach den Ratschlag von Steel befolgen sollen. Er ist ein echtes Patentrezept. ;-)

Sorry, die Bequemlichkeit... ;-) Aber vielen Dank an dich und auch an Steel, ich denke ich hab es jetzt hinbekommen:

Korrigiertes Beispiel

Grüße
Sven

[Steel]

Hi!

Korrigiertes Beispiel

Looks good to me on my IE6 here at work.

[Marc]

Hallo,

Google mal nach 3px-Bug - vielleicht hättest Du aber auch einfach den Ratschlag von Steel befolgen sollen. Er ist ein echtes Patentrezept. ;-)

Sorry, die Bequemlichkeit... ;-) Aber vielen Dank an dich und auch an Steel, ich denke ich hab es jetzt hinbekommen:

Schön, so sieht Dein Code auch sauber aus - er ist bisher übrigens valides XHTML. Vielleicht solltest Du noch XHTML oben drüber schreiben (DTD)? - Wenn Du weiterhin alle Tags und Attribute klein schreibst und ausnahmslos schließt, hast bereits die meisten Anforderungen für gültiges XHTML erfüllt - den Rest verrät Dir der Validator.

Viele Grüße,
Marc.

[Sven]

Hallo,

Schön, so sieht Dein Code auch sauber aus - er ist bisher übrigens valides XHTML. Vielleicht solltest Du noch XHTML oben drüber schreiben (DTD)? - Wenn Du weiterhin alle Tags und Attribute klein schreibst und ausnahmslos schließt, hast bereits die meisten Anforderungen für gültiges XHTML erfüllt - den Rest verrät Dir der Validator.

Joa, auf der richtigen Seite, wo ich den Code jetzt verwende, halte ich an den HTML 4.01 Strict Standard, so wie auf all meinen Seiten. Mir sind bisher auch die Vorteile von XHTML nicht ganz klar, zumindest wenn ich kein XML einsetze. Aber HTML 4.01 sollte ja auch in Ordnung gehen, was? ;-)

Grüße
Sven

[Marc]

Hallo,

Joa, auf der richtigen Seite, wo ich den Code jetzt verwende, halte ich an den HTML 4.01 Strict Standard, so wie auf all meinen Seiten. Mir sind bisher auch die Vorteile von XHTML nicht ganz klar, zumindest wenn ich kein XML einsetze. Aber HTML 4.01 sollte ja auch in Ordnung gehen, was? ;-)

Klar. - Ich mag XHTML lieber, weil es konsequenter ist. Das ist aber kein objektiver Vorteil. ;-)

Viele Grüße,
Marc.

[Kai345]

[latex]Mae  govannen![/latex]

Nochmal also:
Also:

1. FAQ
2. (Forums)Suche
3. Faux Columns

4. Diese Seiten

Cü,

Kai

[Joachim]

Hi,

Das Menu-Div würd ich nun gern so festlegen, dass es sich immer bis zum unteren Rand erstreckt. height:100%; brachte keinen Erfolg.

Das würde es nur dann, wenn auch das Elternelement eine Höhenangabe besässe. Macht aber keinen Sinn, denn das muss ja flexibel bleiben.

Die Lösung ist einfach und verblüffend: lass es so hoch sein wie es will. Aber: benutze eine Hintergrundgrafik für das Elternelement, um die Spalte optisch zu erzeugen. Seit Die neueren Browser auch Hintergrundbilder zoomen können, bleibt das Design auch bei verändertem Schriftgrad erhalten.

Mehr dazu findest Du bei den Mehrspaltenlayouts

Gruesse, Joachim

[Florian Stascheck]

Hi,
Das geht ganz einfach:
1. position: absolute;
2. top: 0;
3. bottom: 0;

Fertig
mfg, Flo