Oder: Wie können Elemente über einem zentrierten Seitenlayout sauber positioniert werden?
Unsere PHP Usergroup in Frankfurt hatte die Tage fünfjähriges Jubiläum. Im Zuge dessen wollte ich dem bestehenden Layout eine Badge, eine Art Banderole oder aber auch Siegel, anheften. Wie bei anderen modernen Layouts ist auch unserer Usergroup Homepage im Browser zentriert. Ein solches Jello Layout das auf recht annehmbare Weise die unterschiedlichen Bildschirmgrößen kompensiert macht dies aber schwierig.
Das Problem:
Die Badge muss sich relativ zum zentrierten Design ausrichten ohne das es zu tief an einer Stelle im Seitenquelltext verankert wird. Im Falle unserer WordPress Template wollte ich es zB. im Footer unterbringen, sodass es am Ende der Seite geladen wird. Bei dem hier vorgestellten Lösungsansatz spielt es am Ende aber keine Rolle mehr, wo es im HTML Quellcode auftaucht. Am besten dort, wo es am einfachsten verwaltet werden kann. Schließlich wird die Usergroup ja irgendwann auch wieder älter oder es muss ein weiteres Goodie her – weil es doch soviel Spaß macht.
Die Lösung:
Jedes (zentrierte) Layout hat seine Markup und CSS mit der es zentriert wird. Dies wird einfach in einem absolut positionierten DIV nachgebaut der über der Seite liegt – quasi eine Art Ersatz-BODY. So kann über das bestehende Layout alles Mögliche drüber gelegt werden. Das dabei auftretende Problem, das einige Browser bei einem DIV über der Seite die noch sichtbaren darunterliegenden Inhalte nicht mehr bedienbar machen (z.B. Mozilla Firefox) wird für unsere Anwendung ebenfalls gelöst. Aber erstmal den ersten Schritt zum Kopieren der Positionierung. Hier hilft ein Tool wie Firebug oder der DOM Inspector schnell weiter.
Am Beispiel des PHPUGFFM Seitenlayouts und Firebug ist mit einigen wenigen Klicks im DOM-Baum der Seite das Element zum zentrieren der Seite gefunden. Dies geschieht im Firebug mit der HTML Ansicht und der Inspect Funktion. Das DIV Blockelement mit der ID #outer wird mit einer festgelegten Breite von 59.7em und einem Margin-Wert Auto Rechts und Links gestylet um das DIV im Browserfenster zu zentrieren. Zur Abwärtskompatibilität trägt das übergeordnete BODY Blockelement die CSS Auszeichnung zum Zentrieren von Text (text-align: center;):
#outer { background:#FFFFFF url(body-schatten.gif) repeat-y scroll 45em 0pt; border:1px solid #CCCCCC; margin:0pt auto; padding:0pt; width:59.7em; } body { text-align:center; }
Dies kann schnell nachgebaut werden. Der Lösungsansatz war erst ein absolut positioniertes DIV als Ersatz-BODY zu nutzen und darin die Seitenpositionierung nachzubauen. Der Einfachheit halber lasse ich hier die Ränder außer acht. Diese wirken sich natürlich unter realen Bedingungen auf die Positionierung aus und müssen, wie an unserer Usergruppenseite auch gesehen werden kann, auch mit kopiert werden. Hier der Nachbau-Beispielcode ohne Ränder:
<div style="position: absolute; top: 0pt; left: 0pt; width: 100%">
<div style="margin: 0pt auto; width: 59.7em; text-align: left">[test]</div>
</div>Das Äussere DIV liegt einfach über der Seite und das innere DIV bildet die Layoutzentrierung ab. Das darin stehende [test] wird nun oben Links im Layout dargestellt – egal wo es sich innerhalb des Seitenquellcodes befindet. Dies braucht nun einfach nur durch die Badge Grafik ersetzt werden. Diese sollte die Grafikabteilung schon soweit angepasst haben das sie sich richtig auf die Webseitengrafik legen lässt. In meinem 5-Jahre-Fall wurde eine GIF Grafik gewählt, da PNG immer noch in einigen Browsern mit falschen Farben dargestellt wird. Ansonsten würden sich die weichen Kanten, die bei PNG möglich sind natürlich hervorragend eignen um Badges und andere grafische Goodies über dem Inhalt zu platzieren, vor allem bei einer feststehenden Positionierung (postion: fixed;). Eine solche setzt dem ganzen sicherlich die Krone auf.
Sieht gut aus – aber funktioniert noch nicht
Damit ist das Problem auf der grafischen Seite gelöst. Leider tun sich aber einige Browser mit DIVs schwer deren Hintergründe zwar transparent sind aber die nun mal über anderen Elementen liegen. Sie lassen Klicks mit der Maus nämlich nicht durch. In diesem Fall ist das besonders ärgerlich, da die DIVs für das Badge über das Logo gesetzt wurden und dieses auf die Startseite der Internetangebotes verlinkt – ein ganz zentraler Link der unter allen Umstände anzuklicken sein sollte.
Umso ärgerlicher das dies gerade der Firefox von Mozilla macht. Und wenn man dies als Bug reporten möchte bekommt man auch noch mit das dieser Fehler bereits seit 2001 bekannt ist und irgendwann in der Zukunft gelöst werden soll – wenn überhaupt. Solange können wir natürlich nicht warten. Eine recht simple Lösung bildet hier die CSS Anweisung zur Darstellung von Elementinhalten die das Eltern-Element grafisch betrachtet in der Fläche verlassen. Overflow nennt sich die CSS-Anweisung und ein Wert von visible weist den Browser an eben auch solche Elemente darzustellen, die aufgrund der Größe des Elternelementes nicht mehr sichtbar sind.
Geben wir unserem DIV-Konstrukt doch einfach eine Höhe von 0 und weisen den Browser an, die darin liegende Dinge trotzdem anzuzeigen. So steht das DIV niemanden mehr im Weg aber die Badge ist trotzdem sichtbar. Dies geschieht durch ein simples Anfügen von height: 0; overflow: visible; in die jeweiligen Style-Attributen. Der Beispiel-Quelltext sieht nun so aus:
<div style="overflow: visible; position: absolute; top: 0pt; left: 0pt; width: 100%; height: 0">
<div style="margin: 0pt auto; overflow: visible; width: 59.7em; text-align: left; height: 0">
[test]
</div>
</div>Nun können alle Inhalte die nicht von dem Text [test] verdeckt sind auch im Firefox problemlos angeklickt werden. Das Ergebniss ist oben links zu sehen (bis die Badge dort wieder verschwindet). Deswegen hier der Entscheidende Teil des Quellcodes an der realen Usergruppenseite:
<div id="special-5years" style="position: absolute; top: 0pt; left: 0pt; width: 100%; height: 0%">
<div class="insanide" style="border-style: solid; border-color: #cccccc; border-width: 0pt 1px; margin: 0pt auto; width: 59.7em; text-align: left; height: 0%">
<a href="http://phpugffm.de/index.php/archives/148" class="unblink" title="5 Jahre PHP Usergroup Frankfurt am Main"><img src="http://phpugffm.de/wp-content/themes/phpug_de/5dot0-years.gif" alt="5.0 Jahre Badge" style="margin: 0.625em 0pt 0pt 0.125em; width: 4em; height: 4em" border="0" /></a>
</div>
</div>Das auf der Usergruppen Seite verwendete HTML und CSS habe ich gegen IE 6, Opera 9 und Mozilla Firefox auf Windows getestet. Im Grunde genommen ist es bei der vorgestellten Methodik aber unerheblich, denn das Grunddesign ist ja schon in der fertigen Website vorhanden. Dies entscheidet (abgesehen vom overflow:visible; height:0; Kniff) über die Kompatibilität in den diversen Browsern.
Dieses nette Prinzip lässt sich natürlich für alle Arten der Seitenpositionierung anwenden (nicht bloß das zentrierte Layout) und die eigene Seite schnell mit deinem *Special* *Special* *Blink* *Blink* erweitern. Viel Spaß dabei.
