Allgemeines Block-Element DIV

5. Januar, 2006

Heute war großer Strukturtag.
Es galt ein Photoshop-Layout in HTML umzusetzen.
Arbeitsauftrag: DIV statt Tabellen.

Der Vorgang gestaltete sich nicht weiter schwierig, da ich routiniert mit CSS arbeiten kann und die Macken der verschiedenen Browser- / Betriebssystem-Kombinationen kenne.

Das Layout war fertig, lediglich an einem Abstand, den ich einem meiner DIV-Elemente mit auf den Weg gegeben habe, fand man Anstoß.

Das Problem:
Über CSS-Styles angewiesener Abstand (margin) zwischen einem DIV-Block und einem darunterliegenden GIF hat auf PC-IE keine Auswirkung.
Auf PC-FF sowie MAC-Safari, MAC-FF und MAC-Mozilla gibt es hingegen keine Probleme.

Erster Lösungsansatz:
Ein global definiertes Abstands-DIV anstelle der margin-Definition verwenden.
Prämisse: Das Abstands-DIV ist global definiert und kann nicht geändert werden

Erster Lösungsansatz verfällt,
weil Ursache:
Die DIVs vor dem GIF stehen im float um sie inline auszurichten, sodass sie nicht umbrechen.
Das darauf folgende DIV müsste ein clearing gesetzt haben um das floating zu brechen, sodass das Abstands-DIV wieder als Blockelement dargestellt wird.
Diese Umklassifizierung kann jedoch aufgrund der globalisierung des Abstands-DIVs nicht vorgenommen werden.

Daher verschwindet der Abstand des DIVs inline neben den anderen DIVs.

Die Lösung:
Ein Clearing-DIV zu setzen ist Platzverschwendung, dann könnte man den Abstand ja direkt hart im Code implementieren, wohin der Ansatz dann auch ging.

Jedoch kam dann “von oben” die Entscheidung, doch lieber alles mit Tabellen zu machen.
Schade, denn gerade war das Layout echt plattformunabhängig und dazu noch suchmaschinenfreundlich.

 ↑ Filed under: Ausbildungsbetrieb Kommentare deaktiviert Druckversion
   Tags: nicht vergeben