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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…