XHTML / CSS

[photografx]

Hallo liebe Spezialisten ...

habe ein Problem mit meinem XHTML - Layout und bin grad zu vernagelt um den Fehler zu erkennen ... wenn ihr kurz nen Blick auf folgenden link werft --> XHTML-Layout <-- sollte der Fehler gleich ins auge stechen !
Das Container Element wird vom Inhalt nicht auf die benötige Höhe gestreckt

Ich arbeite mit absoluten Positionierungen - aber den Inhalt habe ich extra in ein "normales" div-element (<div id="content">) gepackt. Dieser sollte doch das Elternelement (<div id="c-body">) auf die benötigte Höhe strecken!

Aufgefallen ist mir noch das FireBug das Content-element nicht korrekt anzeigt ... bzw nur den "margin-top" ...

Bitte um nen kurzen wink mit dem Zaunpfahl wie ich das Problem lösen könnte ...

Vielen Dank im Voraus

[molily]

Das Container Element wird vom Inhalt nicht auf die benötige Höhe gestreckt

Ich arbeite mit absoluten Positionierungen - aber den Inhalt habe ich extra in ein "normales" div-element (<div id="content">) gepackt. Dieser sollte doch das Elternelement (<div id="c-body">) auf die benötigte Höhe strecken!

Nein, weil #c-body einen bottom-Wert hat. Wenn du den herausnimmst, dann ist #c-body zumindest so hoch wie es sein Inhalt erfordert.

Allerdings ist dann der #container noch nicht so hoch, wie sein Inhalt. Weil der eine feste Höhe hat. Aber selbst wenn du die herausnimmst: #container wird sich nicht an die Höhe seiner Inhalte anpassen können, weil die absolut positioniert sind.

Mit deiner Mischung aus absoluter Positionierung und Floats wirst du aus dieser Geschichte nicht herauskommen. Wenn Kindelemente absolut positioniert sind, dann kann sich der Container nicht automatisch an deren Höhen anpassen. Das geht nur im normalen Fluss, also ohne absoluter Positionierung. Mein Tipp wäre, das Grundlayout nur mit Floats und Clearing bzw- Einschließen von Floats zu bauen. Ob dann noch vereinzelte absolut positionierte Elemente für die Grafikränder nötig sind, wird sich zeigen.

Mathias

[Photografx]

Mit deiner Mischung aus absoluter Positionierung und Floats wirst du aus dieser Geschichte nicht herauskommen. Wenn Kindelemente absolut positioniert sind, dann kann sich der Container nicht automatisch an deren Höhen anpassen. Das geht nur im normalen Fluss, also ohne absoluter Positionierung. Mein Tipp wäre, das Grundlayout nur mit Floats und Clearing bzw- Einschließen von Floats zu bauen. Ob dann noch vereinzelte absolut positionierte Elemente für die Grafikränder nötig sind, wird sich zeigen.

Hallo .. und erstmal danke für die absolut rasche und korrekte antwort ...
mir ist auch klar wie ich die ganze Site mit einem etwas mehr "klassischeren" Layout-Ansatz lösen könnte.

Ich wollte mal was neues versuchen ... sprich die Site soll auch mit variabler breite funktionieren ... jetzt hab ich grundsätzlich nen container der sich an aller grössen anpassen lässt ... aber zZ leider halt nur wenn ich ihn direkt anspreche :( ...

Fällt dir keine Möglichkeit ein wie ich es mit diesem Ansatz lösen könnte ???
ich hab jetz mal ne Version der Site online gestellt in welcher ich alle "absolute" positionierten elemente aus "c_body" rausgenommen habe ...
---> XHTML Test

das Problem besteht leider weiterhin ... :( .. aber bei dieser Version lenkt wenigstens nicht so viel vom eigentlichen Problem ab ;)

Vielleicht fällt es so leichter eine Lösung zu finden !?

Danke & lg

Alexx

[molily]

ich hab jetz mal ne Version der Site online gestellt in welcher ich alle "absolute" positionierten elemente aus "c_body" rausgenommen habe ...
---> XHTML Test

Das Problem ist, dass #c_body immer noch absolut positioniert ist. Wenn sich der Container daran anpassen soll, musst du auch dieses position:absolute herausnehmen.

Wenn du dann noch die feste Höhe von #container herausnimmst, dann ist zumindest der Inhalt eingeschlossen.

(Nicht dass ich das nicht schon geschrieben hätte.)

Allerdings lappen dann die margins von #c_body über die Grenzen von #container hinaus. Da kannst du stattdessen mit padding arbeiten.

Mathias

[Photografx]

Danke für die nochmalige bzw. ausführlichere Antwort ... ich hatte es vorher nicht ganz kapiert ... aber gottseidank hat du kapiert was mein ziel war !

DU BIST SUUUPER !!!!!
siehe Link -> XHTML_juhu

Die Seite macht (fast) das was ich von Ihr erwarte ... habe dem "c_body" noch ein "position:relative" mitgegeben und kann jetzt darin absolut positionieren UND er passt sich der Größe an !!!!

kann es gar nicht erwarten das ganze mit einer dynamischen breite auszuprobieren ...

werde dann hier posten damit alle was davon haben ...

Danke!!!
AlexxJ

[Patrick Andrieu]

Hallo Photografx!

DU BIST SUUUPER !!!!!
siehe Link -> XHTML_juhu

Fehlt nur noch, dass Du »Galerie« richtig schreibst ;)

Im englischen braucht es zwei »l« und ein »y«, im Deutschen nur ein »l« und den IE, äh, »ie«, denn das Wort wird nicht von »Galle« abgeleitet ;)

Galerie, gallery.

Viele Grüße aus Frankfurt/Main,
Patrick