Schönere Seiten dank "float"

Teil 3: CSS-Workshop: float

Inhalt
  1. CSS-Workshop: float
  2. Teil 2: CSS-Workshop: float
  3. Teil 3: CSS-Workshop: float

Zentrierte floats

Eigentlich gibt es nur links- oder rechtsbündige floats. Wenn man eine Gruppe von Objekten wie zum Beispiel Navigationsschaltflächen zentrieren muss, ist es jedoch prinzipiell nicht unmöglich. Wobei es ergibt sich hier ein kleines Problem und zwar die Breite der Elemente beeinflusst ihre Ausrichtung. Man muss sich hierzu eines Workarounds bedienen.

© Archiv

Internet Explorer bis einschließlich Version 8 Beta berechnet falsche Dimensionen von float-Elementen mit Scrollbalken.

Es macht nichts aus, wenn die einzelnen float-Elemente eine definierte feste Breite besitzen, denn in diesem Fall kann man den ganzen Block anhand der Breite des übergeordneten Objektes einfach mit margin: auto zentrieren. Die Elemente dieser Konstruktion dürfen jedoch nicht ohne Weiteres eine flexible Breite haben. Man müsste nämlich jedes Element mit einer individuellen CSS-Klasse auszeichnen und jeweils eine unterschiedliche Breite darauf anwenden. Nun, diese Vorgehensweise ist theoretisch machbar, aber nicht so recht zufriedenstellend.

Zum Glück geht es auch einfacher. Die Idee besteht schlicht und ergreifend darin, zwei Floats ineinanderzuverschachteln. Das äußere float-Element hat keine definierte Breite und wird mittels position:relative 50 Prozent von links angeordnet. Das verschachtelte innere float-Element wird nun umgekehrt ausgerichtet und erhält eine negative relative Position von -50%. Auf diese Weise lässt sich eine Gruppe von floats tatsächlich zentrieren. Die relative Position sorgt dafür, dass der Umfluss beibehalten wird, und erlaubt es den übrigen Inhalten, darunterzufließen. Der CSS-Code dazu:

#buttons{
float:left;
position:relative;
left:50%;
text-align:left;
}
#buttons ul{
list-style:none;
position:relative;
left:-50%;
}
#buttons li{float:left;position:rela
tive;}
/* IE benötigt position:relative */
#buttons a{
text-decoration:none;
margin:10px;
background:red;
float:left;
border:2px outset blue;
color:#fff;
padding:2px 5px;
text-align:center;
white-space:nowrap;
}
#buttons a:hover{ border:2px inset
blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}
/* horizontalen Scrollbalken verste
cken */

Wenn man sagt, dass es keine zentrierten floats gibt, dann ist damit nur gemeint, dass es keinen fertigen Befehl für diese Aufgabe gibt, es bedeutet aber noch lange nicht, dass man nicht standardkonform einen zentrierten float bewerkstelligen könnte.

Flash und IE 6, 7, 8

Float-Konstruktionen mit Flash-Inhalten stellen im Internet Explorer 6, 7 und 8 eine ganz eigene Herausforderung dar. Um festzustellen, ob Sie von einem der zahlreichen Bugs im Internet Explorer rund um Flash-Integration betroffen sind, überprüfen Sie, ob das float-Layout mit Bildplatzhaltern anstelle der Flash-Inhalte erwartungsgemäß funktioniert.

Liefert auch der Internet Explorer das gewünschte Resultat, solange sich kein Flash-Element innerhalb der float-Konstruktion einfindet, haben Sie höchstwahrscheinlich die Ursache gefunden. Ersetzen Sie in diesem Fall den Standard-Code zum Einbinden von Flash-Inhalten durch eine andere Methode, zum Beispiel das Skript <swfobject>. Dieses Skript ersetzt dynamisch ein div-Element und dadurch kann man auf Seiten mit Flash in float-Konstruktionen viele Probleme mit dem Internet Explorer vermeiden.

hasLayout, float

Während sich Browser wie Firefox, Google Chrome, Safari und Opera mehr oder weniger gut an Standards halten und sich nur in Nuancen unterscheiden, sind Microsoft-Browser eine Kategorie für sich.

Microsoft hat offenbar eine eigene Vorstellung davon, was Web-Standards sind, und schafft oft eigene Regeln an den offiziellen W3C-Standards vorbei. Zahlreiche Fehler in der Darstellung von float-Konstruktionen im Internet Explorer bis einschließlich Version 7 lassen sich auf die hasLayout-Eigenschaft zurückzuführen.

hasLayout ist eine proprietäre Eigenschaft, die Microsoft im Internet Explorer eingeführt hatte, um Workarounds für zahlreiche Bugs im Zusammenhang mit dem CSS-Rendering einschließlich float-Konstruktionen bereitzustellen.

In der Realität schuf Microsoft ein paralleles Browser-Universum, indem man einmal für standardkonforme Browser entwickelt und einmal dieselbe Seite auf den hasLayout-Mechanismus im Internet Explorer 7 hin überprüfen und anpassen muss. Die hasLayout- Eigenschaft existiert nur implizit. Das macht die Sache kompliziert.

Ein Objekt erhält diese Eigenschaft entweder völlig automatisch (aufgrund seines Charakters, wie zum Beispiel im Falle des Elements <body></body>) oder durch die Zuweisung bestimmter CSS-Eigenschaften (zum Beispiel position:absolute).

Die hasLayout-Eigenschaft kann weder direkt einem Objekt zugewiesen, noch kann sie auf den Wert false zurückgesetzt werden, außer durch Manipulationen an CSS-Zuweisungen. Setzt man zum Beispiel die CSS-Eigenschaft float auf den Wert none, kann das betreffende Element die hasLayout-Eigenschaft verlieren, sofern keine anderen CSS-Anweisungen hasLayout verursachen.

Mit jeder neuen Version des Internet Explorers kommen neue Fehlerkorrekturen aber leider auch neue Fehler hinzu. Mit der zweiten Beta des Internet Explorer 8 wurde endlich die hasLayout-Eigenschaft eliminiert. Das bedeutet aber auch, dass Layouts, die auf diese Eigenschaft setzen, im IE8 nicht mehr funktionieren.

Mit dem Internet Explorer 7 wurde dank der komplett neu entworfenen CSS-Rendering-Engine ein großer Fortschritt in der CSS-Unterstützung durch diesen Browser erzielt. Leider hat das trotzdem viele Webseiten auf den Kopf gestellt, zum Teil, weil der Doctype- Switch nicht mehr funktionierte.

In der Version 7 und nun 8 Beta besteht Internet Explorer endlich den Acid-2-Test. Microsoft hat sich offenbar bemüht, dem eigenen Webbrowser Standards beizubringen, auch wenn hasLayout erst mit dem Internet Explorer 8 eliminiert wird.

Mehr lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.