Fixe Positionierung mittels CSS2
1. September 2005 von anjin | kein Kommentar
Die Implementierung der CSS 2 Spezifikationen in den verschiedenen Browsern
führt oft zu überraschenden und nicht erwünschten Ergebnissen.
So ist es laut CSS 2 möglich Ebenen einer Webseite fix zu positionieren.
dh.: Auch beim Scrollen der Seite bleiben diese Ebenen immer an ihrer Position.
So lassen sich lange Texte scrollen, die Navigation, die in einer anderen Ebene
mittels der Stilanweisung “position:fixed;” fixiert wurde, scrollt nicht mit.
ABER: Der meistbenutzte Browsertyp, der Internet Explorer; unterstützt diese
Stilanweisung leider nicht.
Obige Anweisung führt zu einer fehlerhaften Darstellung innerhalb der Microsft
Browserfamilie Mozilla, NS 6-7, Firefox, Opera und Konqueror interpretieren sie
jedoch korrekt.
Es gibt für dieses Problem mehrere Lösungsansätze.
Einer wäre ein Browsercheck mittels Javascript, das entsprechend der Browser
verschiedene Stylesheets lädt.
Es gibt aber auch die Möglichkeit dieses Problem innerhalb des Stylesheets zu lösen.
Die Lösung heisst Attribut-Selektor.
Ein Beispiel innerhalb einer css Datei:
#nav {
position: absolute;
top: 30px;
left: 150px;
width: 200px;
z-index: 2;
/* usw. */
}
#nav[id] {
position:fixed;
}
Im Stylesheet wird daher zunächst das DIV mit der ID nav absolut positioniert.
Anschließend wird diesem Bereich mittels des Attribut-Selektors [id] die Eigenschaft position:fixed zugewiesen.
Im Beispiel bedeutet dies, dass der verwendete Attribut-Selektor #nav[id] auf das Element nav wirkt, wenn es ein Attribut id besitzt, unabhängig von dessen Inhalt.
Der Internet Explorer versteht keine Attribut-Selektoren – durch Verwendung ebendieser ist es daher möglich, Stylesheets, die ihn überfordern, vor ihm zu verstecken.
Ebenfalls gut geeignet ist diese Methode, um Probleme mit dem Box-Model zu umgehen.
Positionieren Sie Elemente zunächst so, dass sie im MSIE korrekt dargestellt werden und ändern Sie die Maße anschließend durch den Einsatz dieses Tricks auf die korrekten Werte.
