Zitat:
Zitat von toniken
Bis gestern war ich noch der Auffassung, dass ich die Aufgabe erfüllt hätte, wenn ich die <li> floate, dem #main ein clear zuordne und der #navigation eine feste Breite verpasse.
|
So wird nur #main unter die Floats verschoben; das ul-Element bleibt weiterhin auf Null.
Nebenbei: In IE <= 7 werden die Floats tatsächlich eingeschlossen, weil die Breitenangabe hasLayout auslöst.
Lesestoff:
Über hasLayout ? das Konzept des hasLayout im IE/Win | Deutsche Übersetzung (Achtung, keine leichte Kost. Nur noch relevant für IE <= 7.)
Zitat:
|
Um auf Deine Frage zurückzukommen: In meinem Buch wird zunächst, NACH (nicht wie bei Peter Müller am Ende innerhalb) des umschließenden Divs eine <hr> eingefügt und diese gecleart.
|
So werden wiederum die Floats nicht von ul eingeschlossen, nur der nachfolgende Inhalt unter die Floats verschoben.
Ein hr-Element innerhalb der ul ist aber nicht möglich, da ul nur li enthalten darf.
Zitat:
|
Weiter unten wird dann auch noch die overflow:hidden-Methode erklärt, aber in dem Zusammenhang, dass sonst die Hintergrundfarbe des umfließenden Textes nicht das ganze <div> umfasst, wenn das gefloatete Image aus dem <div> herausragt.
|
Das ist es eben, was mit "Einschließen" von Floats gemeint ist. Wenn ein Element die Floats nicht einschließt, sieht man den Hintergrund des Elements nicht, weil es auf Nullhöhe zusammenfällt. (Dazu
Punkt 2 der FAQ)
Zitat:
|
Um meine floats nun zu umschließen, habe ich mich für die overflow:hidden-Methode entschieden.
|
Das ist kritisch in Verbindung mit einem Dropdown-Menü -- schließlich sollen überstehende Inhalte nicht abgeschnitten werden.
Bei dir wird nur deshalb nichts abgeschnitten, weil die Liste nicht
Containing Block (noch so ein nicht einfaches Konzept) der abs. pos. Sublisten ist.
Sobald du die li-Elemente der ersten Ebene oder das ul relativ positionierst, siehst du nichts mehr von deinen Dropdowns.
Wenn du dein Menü auch für IE7 tauglich machen willst, wirst du diese relative Positionierung brauchen -- damit du Positionsangaben für die abs. pos. Sublisten machen kannst. Denn jetzt hast du wieder die Situation wie am Anfang: Du vertraust darauf, dass die Browser die abs. pos. Elemente an die richtige Stelle setzen. Das
kann klappen, muss aber nicht.
Lange Rede: In deinem Fall wäre das sog. EasyClearing, angewendet auf ul, eine passende Methode zum Einschließen der Floats.
Zitat:
|
Ich denke, Du bist eine gute, wenn auch strenge Lehrerin. Du sagst nicht einfach nur vor, sondern zeigst Wege auf, damit der Schüler selbst die Lösungen findet und auch finden muss. Fehler, die der Schüler auf diese Art korrigiert bekommt, macht er sicher nicht nochmal. Ich bin selber Lehrer und weiß das zu schätzen. Ich war gestern abend fix und alle nach soviel Input, und habe aber an diesem einen Tag wohl mehr verstanden, als vorher durch Wochen von Buchlektüre.
|
Bingo! Danke, dass du das so siehst. Wirklich, ich freu mich darüber. So macht es Spaß, zu helfen.
[Der absolut überwiegende Teil der Fragenden beschwert sich und will fertige Lösungen, aber bitte sofort.]
An deinem Beispiel kann man wunderbar sehen, warum CSS
wirklich nicht einfach ist. Nur eine Menüzeile und ein Inhaltsbereich. Und trotzdem muss man man so viele CSS-Konzepte kennen, die man nicht intuitiv durch "Rumprobieren" begreifen kann.