nicht angemeldet
CSS-Layout - Möglichkeiten und Unmöglichkeiten
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.
-
Hallo, wieder ein Beispiel, dass CSS es in 10 Jahren nicht geschafft hat die Vorteile einer Tabelle zu übernehmen.
Float und Vererbungen sind der letzte Schrott.
Ansonsten finde ich CSS aber gut. Nur leider bin ich alzu oft
gezwungen tabellen zu nehmen. Browsersicher, automatisch anpassend, und dennoch flexibel.Oli
-
Hallo Oli!
Hallo, wieder ein Beispiel, dass CSS es in 10 Jahren nicht geschafft hat die Vorteile einer Tabelle zu übernehmen.
Nein, eigentlich gibt es aktuell nur eine Browser-Familie, die die entsprechenden CSS-Eigenschaften noch immer nicht unterstützt - müsig zu erwähnen, welche das ist ..!
Float und Vererbungen sind der letzte Schrott.
Floats sind so ziemlich das Beste, was CSS uns beschert hat. Und was die Kaskadierung angeht, so hat sie zwar auch durchaus ihre Tücken, aber letztlich überwiegen wohl doch eher die Vorteile, die dieses System mit sich bringt.
Ansonsten finde ich CSS aber gut.
Na das freut ja zu hören ...!
Nur leider bin ich alzu oft gezwungen tabellen zu nehmen.
Na dann machst du imho allzu oft etwas falsch.
Gruß Gunther
-
-
Hallo Christoph,
Also: in welchem Verhältnis steht "overflow: hidden" zum nachfolgenden relativ positionierten DIV, und wieso "funktioniert" dann "z-index: 2"?
kann es sein, dass du in dieses Problem hineingerutscht bist?
Gruß Gunther
-
hallo Gunther,
kann es sein, dass du in dieses Problem hineingerutscht bist?
Da bin ich nicht sicher. Es gibt, wenn ich es richtig lese, durchaus Dinge, die mir auch begegnet sind. Aber keine Lösungen, die mich wirklch befriedigen könnten
Grüße aus Berlin
Christoph S.
-
-
Hi Christoph,
ich empfehle Dir das Buch "CSS Layouts - Praxislösungen mit YAML", in dem viele Browser-Bugs erklärt werden (vor allem die Merkwürdigkeiten des IE).
YAML steht für Yet Another Multicolumn Layout und ist eine Art Framework, bei dem die meisten Bugs berücksichtigt wurden. Dadurch kann man sich wieder mehr auf die eigentliche Auftragsarbeit konzentrieren...
http://yaml.de
http://yaml.de/css_layouts.htmlGruß
- Danny
-
hi,
ich empfehle Dir das Buch
grmpf. Ich habe nicht ganz ohne "SELF"-Gedanken molilys Artikel verlinkt.
YAML steht für Yet Another Multicolumn Layout
Ja, weiß ich. Mir ging es vorrangig darum, auf Fragen zu verweisen, die Mathias' sehr lesenserter Artikel aus meiner Sicht noch nicht ausreichend beantwortet.
Vermutlich wird sich molily ja noch in diesem Thread zu Wort melden.
Grüße aus Berlin
Christoph S.