Schönere Seiten dank "float"

Teil 3: CSS-Workshop: float

  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.

CSS-Eigenschaft float

© 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 zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".