nicht angemeldet
Hallo zusammen!
Ich möchte mal meinen 'Unmut' über das CSS Box Model des W3C hier kundtun, und gerne eure Meinung(en) dazu hören/lesen. Vielleicht habe ich ja auch einen falschen Ansatz, oder einen Fehler in meinen Überlegungen.
Vorweg sei noch gesagt, dass sich meine 'Kritik'_nur_auf relative Größen (Prozentangaben) bezieht - nicht auf die Verwendung von absoluten Werten! Wobei es allerdings unsinnig wäre, dafür jeweils ein anderes Modell heranzuziehen.
Was mir an dem Ansatz des W3C nicht gefällt ist, dass es keine (verfügbare) Gesamt-Größe für ein Element gibt, da man mit CSS nicht Rechnen kann.
Das wirkt sich vor allem dann sehr nachteilig aus, wenn es darum geht, den verfügbaren Platz vollständig auszunutzen. Hierfür gibt es IMHO/AFAIK nur die Möglichkeit width und height gleich 100% zu setzen. Soweit so gut, nur wenn man jetzt in das äußere Element ein inneres einfügt, dessen Höhe wiederum den verfügbaren Platz komplett ausnutzen soll, gleichzeitig aber einen gewissen Abstand (margin) vom umgebenden Element haben soll, ist man mit dem Modell am Ende.
Beispiel (zur Verdeutlichung):
<div style="height: 100%; width: 100%; background-color: #fff; color: #000; padding: 0px; margin: 0px;">
<div style="height: 100%; width: 100%; background-color: #ccc; color: #000; padding: 50px; margin: 50px; border: solid 20px #c00;">
Inhalt des inneren DIV's
</div>
</div>
Der entscheidende Nachteil ist, dass sich wiederum beim inneren Element die Angaben width und height nur auf den 'Content-Bereich' beziehen, sodaß sich ein Element mit der absoluten Größe von 100% + padding + border + margin > 100% ergibt. Sorry Leute, aber hier war/ist der Ansatz von Microsoft eindeutig besser. Wie uneins sich auch die Browserhersteller bei der korrekten Umsetzung zu sein scheinen, sieht man ebenfalls an dem obigen Beispiel. Von 4 getesteten Browsern (MSIE6SP1, NS7, OP6.04, OP7.02) unter Windows zeigt es nur der MSIE6 (im Standard-compliants Mode) korrekt an. Alle anderen Browser 'verschlucken' den margin-right und margin-bottom.
Wandeln wir das obige Beispiel ein wenig ab:
<div style="height: 100%; width: 100%; background-color: #fff; color: #000; padding: 50px; margin: 0px;">
<div style="height: 100%; width: 100%; background-color: #ccc; color: #000; padding: 0px; margin: 0px; border: none;">
Inhalt des inneren DIV's
</div>
</div>
Auch das hält uns nicht in unserem 100% x 100% großen Container. Immerhin stellen jetzt alle 4 Browser das padding an allen Seiten dar (wenn auch der OP6 am unteren Rand zu klein). Nur leider 'vererbt' sich das Padding nicht im Bezug auf die Größe des inneren Elementes, weshalb dieses wiederum von seiner Größe her den verfügbaren Platz überschreitet.
Es gibt noch etliche weitere Beispiele dafür, wo dieses Modell einer 'effizienten' Platzausnutzung im Wege steht. Leider setzt sich nicht immer das 'geeignetste' Modell durch (nicht nur im Internet). IMHO ist das derzeitige Modell ein 'Schuß in den Ofen'.
Wie gefragt eine solche 'Raumaufteilung', bzw. 'Platzausnutzung' ist, zeigen nicht zuletzt die vielen Postings dazu hier im Forum.
Ich befürchte jedoch, dass sich an diesem Modell nichts mehr ändern wird - schade.
Wie geht ihr mit diesem 'Problem' um? Habe ich etwas falsch verstanden oder fehlinterpretiert? Welche Methoden verwendet ihr, um diese Probleme zu umgehen? Wie ist eure Meinung dazu?
Vielen Dank im voraus für deinen 'konstruktiven' Beitrag zu diesem Thema -
Gruß Gunther