|
Für einen Freund möchte ich eine kleine simple Webseite erstellen, die er zu Werbezwecken nutzt und um seine Firmendaten im Internet zu veröffentlichen. Da dafür ein CMS zu übertrieben wäre, hab ich mich gleich mal wieder etwas in PHP und CSS einarbeiten können. (gar nicht so leicht, wenn man die Vorzüge von einem CMS kennt) Das erste Problem sollte nicht lange auf sich warten lassen. Einen Seiten-Container erstellt, sämtlichen Inhalt darin zentriert. Alle anderen Elemente mit oder ohne "float" positioniert. Das stellt noch keine Hürde dar. Am Anfang hatte ich eine große Grafik als Header, was mir aber nicht flexibel genug erschien. Also habe ich die Grafik zerschnitten und alle einzelnen Element positioniert. Beim folgenden Schritt bekam ich erwähntes Problem. In der großen Grafik hatte ich einen halb-transparenten Block mit dem Firmennamen über alles gelegt. Die Transparenz war auch nicht das Problem, aber die Überlagerung mit "position: absolute" zerstörte meine Layout. Die Lösung ist, alle Container mit "position: absolute" ausrichten. Aber wie jetzt zentrieren? Zum horizontalen ausrichten gibt es "left: 50%, diese Angabe bezieht sich allerdings auf den linken Rand des zu zentrierenden Objektes. Wenn man jetzt allerdings dieses Objekt um die Hälfte seiner Breite nach links verschiebt, hat man es zentriert. Gehen wir von folgendem Beispiel aus: ein mit einer Breite von 300Pixeln soll zentriert werden. div#layer {position: absolute; left: 50%; margine-left: -150px; }
#layer.box {z-index: 2; background: white; opacity: 0.5; filter: alpha(opacity=50); }
#layer.text{z-index: 3; margin-top: 4px; font-weight: bold; font-size: 26px;
line-height: 1.2em; color: #000000; } Hier noch ein Auszug aus dem Quelltext: Mustermann KG
- Musterstadt -
Warum ich die Box und den Text noch einmal trenne? Wird die Box nicht separat mit der Transparenz versehen, wirkt sich dieser Effekt auch auf den Text aus.  Das ist schon alles. Easy, oder? Natürlich nur wenn man's weiß ... ;-) ciao Euer jörg |
