CSS - Div Layer Layout - unterer Rand bei Hintergrundgrafik

[eloster]

hallihallo an alle,
ich sitze wieder mal seit mehreren stunden an folgendem problem:

ich hab ein div layer layout erstellt, um das mit den tabellen zu vermeiden. so gut soweit, sieht alles schick aus... aber wenn das fenster kleiner gemacht wird, und der inhalt vom text. z.b. zu groß wird, dann bleibt unten ein rand, wo NICHT der hintergrund geladen wird.

dagegen hab ich natürlich angefangen zu arbeiten mittels overflow usw. aber irgendwie ohne erfolg.

Hier der Link zur Seite...

das is der bsp.link... macht die seite mal kleiner, dann wird der inhalt vom text über den hintergrund layer gehen... es bleibt der schwarze balken unten.

ich hoffe, dass jemand helfen kann!

gruß eloster =)

[Falk Prüfer]

Hallo,

tja, Höhe 100% ist nicht immer das was man erwartet

vielleicht hilft dir der Beitrag aus meinem Blog weiter: Wohin mit der Fusszeile - am besten an den unteren Bildschirmrand

Gruß Falk

P.S.: Du hast viele Fehler mit doppelt definierten IDs in deinem HTML-Code.

[eloster]

benutzt ich dann anstatt der id die "class"en ... ???

du meinst bestimmt die menüpunkte oder!?

den link werd ich mir gleich mal anguggn... =)

edit:
ich hab die menüpunkte mal mit "class"en versehen.. is ja richtig auch, weil wenn ich mit javascript auf die elemene zugreifen möchte mit document.getElementById(stelle). ... dann wird das wohl nicht sehr gut kommen ^^

edit 2:
also im grunde genommen is das glaub ich klar, wie du das machst! dein menü ragt also über die komplette höhe... aber irgendwie kann ich das nich auf mein problem umsetzen :-/ mhh kannst mir noch nen tipp geben? =)

[Falk Prüfer]

Hallo,

... aber irgendwie kann ich das nich auf mein problem umsetzen :-/ mhh kannst mir noch nen tipp geben? =)

Hmm... aber gelesen und verstanden hast du schon was 100% Höhe bedeutet und wo das Problem für deine Seite liegt?
Im Endeffekt ist es nämlich exakt das Gleiche, das ich in meinem Artikel beschrieben habe. Mit dem einzigen Unterschied das du keine Fußzeile hast.
Deine contentBackground- und contentForeground-Container sind mit 100% Höhe formatiert und das ist nunmal genau die Höhe des "umgebenden" Containers. Da die jeweils auch 100% Höhe haben, ist es im Endeffekt die Höhe des sichtbaren Anzeigebereiches im Browser. Dein Problem ist jetzt das die beiden Container eine "feste" Höhe (100%) haben und zusätzlich wegen dem float:right des content-Containers nicht "mitwachsen".
Eine erste Abhilfe schafft:

• nimm das height: 100% bei contentBackground weg
• nimm das height: 100% bei contentForeground weg
• nimm das float: right bei content weg
• gib content ein margin-left: 240px

Danach hast du aber immer noch das Problem das es Sch... aussieht wenn in content wenig Text steht, die Seite also nicht von alleine bis zum unteren Rand reicht. Hier kommt dann der "vertikale Platzhalter" aus meinem Artikel ins Spiel.

Gruß Falk

P.S.: Du zeichnest dein HTML als 4.01 Strict aus. HTML 4.01 Strict kennt jedoch kein Element <font> (wie von dir verwendet). Auch ist die Angabe des type-Attributes für <script>-Tags zwingend.

[eloster]

hey danke für die antwort...
ich werd das morgen gleich mal in die tat umsetzen! =)