nicht angemeldet
hallo Forum,
molily hat unlängst in einem (vermutlich hier im Forum zu wenig beachteten) Grundsatzartikel eine sehr lesenswerte Zusammenfassung zu CSS-Layouts geschrieben.
Ich habe nun mit einem Layout zu kämpfen, das ziemlich alle die Probleme aufweist, die in molilys Artikel genannt werden. Ganz kurz zur Struktur:
<div id="servivenavi"></div>
<div id="header"></div>
<div id="hauptnavi"></div>
<div id="content">
<div class=left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div id="fusszeile"></div>
Es wird also eine ziemlich gewaltige "DIV-Suppe", da in den "content"-Bereichen left, middle und right auch noch weitere DIVs eingeschachtelt werden müssen - Vorgabe vom Auftraggeber. Basta.
Ich will natürlich das Geld des Auftraggebers haben. Also mache ich denn mal, wenn auch mit steigendem Unbehagen. Und ich stoße an genau die Stellen (vorrangig im IE6 - übrigens firmeninterner Standardbrowser des Auftraggebers), die molilys Artikel wenigstens teilweise erklärt. Es geht um Block formatting contexts. Da passiert es nämlich, daß "gefloatete" Elemente, wenn sie nebeneinanderstehen, plötzlich nicht mehr für die Maus zugänglich sind, auch wenn ihre Inhalte sichtbar dargestellt werden.
Konkret: ich habe in "<div class='middle'>" eine ganze Liste von Verweisen stehen, die auch alle wunderbar funktionieren - im IE6 (und übrigens auch in Opera). Aber im Firefox nicht, und im IE7 erstaunlicherweise auch nicht. Da gibts nicht einmal den Mauszeiger in der Form des "Händchens". <div class="left"> (der links davon steht) hat eine Anweisung für "float='left'" bekommen müssen, und _das_ scheint das Hemmnis zu sein (alle DIVs bekommen übrigens ausgeklügelte Pixelangaben für Breite und Höhe, was insgesamt zu einem wenig flexiblen Layout führen muß - siehe Archiv-Thread).
Der Hintergrund für dieses Verhalten eines (weitgehend) standardkonformen Browsers wird im bereits zitierten Artikel ziemlich ausführlich dargestellt. Mir haben allerdings diverse Experimente mit "overflow" überhaupt keine Lösung erbracht, erst als ich aus lauter Verzweiflung mal den z-index mit dem Wert 2 angegeben habe, gings plötzlich.
Ich bin nun einmal nicht zufrieden damit, daß "es funktioniert". Das tut es. Aber es wird ja Gründe geben, weshalb Mathias in seinem Artikel nicht von dieser Möglichkeit gesprochen hat.
Also: in welchem Verhältnis steht "overflow: hidden" zum nachfolgenden relativ positionierten DIV, und wieso "funktioniert" dann "z-index: 2"?
Grüße aus Berlin
Christoph S.