Um vor eine h1 Überschrift eine Grafik zu positionieren ist folgendes CSS erforderlich:

Das Padding und der Pfad zur Grafik sind natürlich individuell zu setzten. Die letzten beiden background Angaben (left und center) geben die Position der Grafik an, in diesem Fall links neben dem Element und vertikal zentriert. Die Position der Grafik kann selbstverständlich auch über Maßeinheiten wie Pixel oder Prozent gesteuert werden. Bei Pixelangaben wird die Grafik relativ zur linken oberen Ecke des Elements positioniert. Bei Prozentangaben wird ein Punkt innerhalb der Grafik, ausgehend von der linken oberen Ecke der Grafik, definiert. Wenn Sie z.B. eine horizontale und vertikale Position von 5 % angeben, wird ein Punkt innerhalb der Grafik, 5% von der linken oberen Ecke entfernt, an einer Stelle die innerhalb des Elements 5 % von der oberen linken Ecke des Elternelements entfernt liegt, positioniert. Zu guter Letzt muss für die vertikale Zentrierung ein Wert von 50% angeben werden.

Eine mir oft gestellte Frage: “Wie zentriere ich mein Design im Browser?”

Als Basis dient uns ein einfaches einspaltiges Layout. Der zu zentrierende div-Bereicht heißt: “center”.

Der div-Bereich erhält in diesem Beispiel eine feste Breite und die horizontalen Ränder werden auf “auto” gesetzt:

Im Quirks-Modus erkennen der IE 5.x und 6 allerdings keine automatischen Ränder. Durch einen kleinen Hack wird die Fehlinterpretation der Eigenschaft “text-align: center” des IE zur Zentrierung genutzt.

vollständigen Artikel lesen…