@Bastianoso

Allgemeines Block-Element DIV

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. 🙁

Hinterlasse einen Kommentar

  Abonnieren  
Benachrichtige mich bei
Restaurant Weihnachten Fernsehen Redirect iOS Wirtschaft projekt52 Apple Kater Silvester Sibirische Katze Film Bilanz Musik Windows Netzwerk Gesellschaft OS X Kino Programmieren Konzert Computer Facebook C++ Organisation Inventur E-Mail IST-Analyse Einkaufen Sport Laufen Ausbildung iPhone Tipps & Tricks twitter Fahrrad URL Altona Mac OS X Fotos Netzwerktechnik Weiterleitung Hamburg Ernährung Deutschland Kredite Microsoft BarCamp Datenschutz Datenbanken Datenübertragung Abschlussprüfung web 2.0 Sommer Projektmanagement Sicherheit Buchhaltung Werbung Webserver IKEA Terminal Internet Party Alkohol Videos

Hinweise zum Artikel