Probleme mit übergeordnetem DIV

[Jan Sostaric]

Hallo Leute,

ich bastle gerade an der Seite http://www.qivisions.biz und habe folgendes Problem.

Ich hab es so gemacht, dass ich ein übergeordnetes DIV habe mit hellblauem Hintergrund, dieses "Fenster" ist wird zentriert im Browser angezeigt.

In diesem DIV werden dann ein Header-DIV (volle Breite) darunter eins für den Breadcrumb (auch volle Breite) darunter nebeneinander ein DIV für Menü linksbündig und daneben eins für den Content.
Als Fußzeile hab ich wieder ein DIV über die volle Breite.

Nun, damit Menü und Content gut nebeneinander passen, hab ich beide float auf left gesetzt, seitdem wird der Hintergrund nicht mehr vollständig angezeigt. Er hört nun genau da auf, wo Menü und Content anfangen, eigentlich sollte er bis unter den Footer gehen.

Das trat erst auf, nachdem ich das Content-DIV auf float=left gesetzt habe. Jedoch brauch ich das so.

Weiß jemand, wie ich das anderweitig lösen kann?

lg, Yann

PS: Ich benutze ja Joomla, hier wird das Menü als Liste angezeigt, ich hab zwar mit list-style=none die Aufzählungszeichen wegbekommen, jedoch ist die Einrückung noch da, das müsste doch mit list-style-position gehen, oder?

[Der Martin]

Hallo,

Ich hab es so gemacht, dass ich ein übergeordnetes DIV habe [...]
In diesem DIV werden dann ein Header-DIV (volle Breite) darunter eins für den Breadcrumb (auch volle Breite) darunter nebeneinander ein DIV für Menü linksbündig und daneben eins für den Content.
Als Fußzeile hab ich wieder ein DIV über die volle Breite.

schmeckt ein wenig nach div-Suppe. Warum für alles aussagefreie div-Elemente nehmen?
Ich weiß nicht, wie dein Header mal aussehen soll; hier ist das div möglicherweise angebracht, um mehrere Elemente (Textfragmente?) zu gruppieren.
Der Breadcrumb-Trail ist eine typische Liste - in diesem Fall bietet sich ein ol-Element an, weil die Reihenfolge der Einträge wichtig ist.
Die Navigation ist typischerweise auch eine Liste, nämlich eine Liste von Links. Das hast du ja auch so realisiert. Ein div-Element, das die Liste nochmal umschließt, ist unnötig. Entsprechende Formatierungen kannst du auch direkt auf die Liste anwenden.
Innerhalb des Content-Blocks verwendest du noch ein abellenlayout? Das müsste sicher auch nicht sein.

Nun, damit Menü und Content gut nebeneinander passen, hab ich beide float auf left gesetzt

Warum beide? Das Menü nach links zu floaten, würde ausreichen.

seitdem wird der Hintergrund nicht mehr vollständig angezeigt. Er hört nun genau da auf, wo Menü und Content anfangen, eigentlich sollte er bis unter den Footer gehen.

Floatest du das footer-div auch? Anyway, der Effekt ist klar: Durch das Floating werden die Elemente aus dem regulären Dokumentfluss herausgelöst; für die Platzberechnung und die Position anderer Elemente sind sie damit praktisch nicht mehr da.

Weiß jemand, wie ich das anderweitig lösen kann?

Sorge dafür, dass das Floating an geeigneter Stelle wieder aufgehoben wird. Für das footer-div würde sich ein clear anbieten.

PS: Ich benutze ja Joomla, hier wird das Menü als Liste angezeigt, ich hab zwar mit list-style=none die Aufzählungszeichen wegbekommen, jedoch ist die Einrückung noch da, das müsste doch mit list-style-position gehen, oder?

Nein. Das wird, je nach Browser, mit padding-left für die Liste (ul) oder mit margin-left für die Items (li) realisiert. Setze am besten beide auf 0.

So long,
 Martin

[Jan Sostaric]

Hi!

Erstmal danke für die schnelle Antwort

Nun, damit Menü und Content gut nebeneinander passen, hab ich beide float auf left gesetzt

Warum beide? Das Menü nach links zu floaten, würde ausreichen.

»»

Problem hierbei: Wenn ich beim Content das float wegnehme, verhält sich zwar der Hintergrund wie gewünscht, jedoch fängt dann das Content-DIV ganz links an, liegt dann also teilweise unter dem Menü, aber ich will ja, dass die beiden nebeneinander sind, mit ein wenig Abstand.

seitdem wird der Hintergrund nicht mehr vollständig angezeigt. Er hört nun genau da auf, wo Menü und Content anfangen, eigentlich sollte er bis unter den Footer gehen.

Floatest du das footer-div auch? Anyway, der Effekt ist klar: Durch das Floating werden die Elemente aus dem regulären Dokumentfluss herausgelöst; für die Platzberechnung und die Position anderer Elemente sind sie damit praktisch nicht mehr da.

Weiß jemand, wie ich das anderweitig lösen kann?

Sorge dafür, dass das Floating an geeigneter Stelle wieder aufgehoben wird. Für das footer-div würde sich ein clear anbieten.

Ich hab mal beim Footer-DIV ein float=clear eingefügt, ohne vorher bei menü und content was zu ändern. Dann ging der Hintergrund bis unter den Footer, aber Menü und Content lagen dann praktisch "über" der Seite und gingen von der Länge her bis unter den Hintergrund.

WIe Du ja schreibst, löst ein Float die Elemente aus dem Dokumentfluss, das seh ich so ja auch, aber das ist ja nicht wirklich das, was ich erreichen will. Klar, ich möchte 2 Divs nebeneinander haben, aber ich möchte sie nicht aus dem Fluss lösen, da es mir ja sonst mein "Design" durcheinander wirbelt.

Mein Hauptproblem scheint jetzt eigentlich jenes zu sein, dass mein Hintergrund-Problem erst dann auftritt, wenn ich den Content auch auf float=left setze, wie vorher das Menü. Ohne diesem verhält sich der Hintergrund richtig, aber ich hab Probleme mit der Content-Anordnung, weil dann beide DIVs linksbündig an der gleichen Stelle beginnen. Also nun teilweise übereinander liegen, statt nebeneinander.

Wie kann ich das noch lösen? Es ist das erste Mal, dass ich ein Webseiten-Layout komplett aus DIV's mache, hab bisher nur mit Tabellen gearbeitet, das will ich aber nicht mehr.

lg, Jan

[ChrisB]

Hi,

Wie kann ich das noch lösen? Es ist das erste Mal, dass ich ein Webseiten-Layout komplett aus DIV's mache, hab bisher nur mit Tabellen gearbeitet, das will ich aber nicht mehr.

Dann lies erst mal das: http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout

MfG ChrisB

[Gunnar Bittersmann]

@@Jan Sostaric:

nuqneH

Ich hab es so gemacht, dass ich ein übergeordnetes DIV habe mit hellblauem Hintergrund, dieses "Fenster" ist wird zentriert im Browser angezeigt.

Eins? Zwei! div[@id="center"] (sehr schlecht gewählter Bezeichner!) und div[@id="page"]. Beide 'div' sind wohl überflüssig.

Er hört nun genau da auf, wo Menü und Content anfangen, eigentlich sollte er bis unter den Footer gehen.

Das trat erst auf, nachdem ich das Content-DIV auf float=left gesetzt habe.

Elternelement auch floaten lassen oder im 'overflow: hidden' geben.

Qapla'