Wie siehts mit Bildern aus ?

Einfache Bilder werden oft benutzt, um einzelne Sektionen voneinander zu trennen. Kann man Bilder denn auch mit dem <hr> Tag mischen ? Ja, man kann, aber das ist nicht ganz einfach.

Der erste Versuch mit der Eigenschaft background-image. Überraschenderweise klappt das in allen 3 Browsern, na ja, beinahe, wie das folgende Beispiel zeigt:

1
2
3

height: 25px;
color: transparent;
background: #fff url(/smilies/msn_sunglasses.png) no-repeat scroll center;

Sieht im Mozilla gar nicht mal schlecht aus, da nur das Bild sichtbar ist. Leider ist das Ergebnis im IE und im Opera nicht so gut. Sie zeigen einen Rahmen um das gesamte <HR> Element. (Siehe Hinweis 1.3). Leider gibt es keinen Weg diesen Rahmen verschwinden zu lassen.

Deswegen wurde dem Ganzen dann ein DIV Element im Quellcode hinzugefügt:

1
2
3

<div class="hr6">
  <hr />
</div>

Die Klasse hr6 hat folgende Styledefintion:

1
2
3
4
5
6
7

.hr6 {
height: 25px;
background: #fff url(msn_sunglasses.png) no-repeat scroll center;
}
.hr6 hr {
display: none;
}

Das Ergebnis sieht nun in allen Browsern perfekt aus.

Fazit

Die oben angewendete Methose den <hr> in einen <div> mit einer eigenen Klasse zu packen und dann den <hr> Tag per display:none nicht anzeigen zu lassen, scheint mit Abstand die flexibelste Lösung zu sein. Dafür sind dann die einfachen <hr> Trennlinien in einem Browser sichtbar, der nicht mit CSS umgehen kann. (Alte Browser oder Handhelds), sobald Stylesheets verwendet werden können kann man dann den <div> Tag vollkommen frei formatieren. Vorsicht jedoch :

  • Hintergrundbilder werde in den Standardeinstellungen der meisten Browser nicht gedruckt. Somit ist das dann benutzte Stylesheet nur für den Monitor gültig (media="screen"). Für den Druck muß ein separates Style-Sheet angelegt werden (media="print")
  • Das einfache <hr>-Element hat Standardvorgaben für die margin-top und margin-bottom Eigenschaften. Diese gehen manchmal in einigen Browsern verloren, wenn man den <hr> Tag in ein <div> Element packt. Deswegen hat es Vorteile, wenn man die beiden Eigenschaften sicherheitshalber auf den dann vorhanden <div> Tag legt.

Notes

  1. Adam Kuehn über den Mac:
    1. Beispiel 1: Funktioniert leider nicht im NN6 und der IE5 zeigt ein 2px-hohes graues Rechteck.
    2. Beispeil 2-5: Funktioniert in beiden Browsern. Im Gegensatz zum NN6 der die Breite 80% respektiert, verwendet der IE5 eine Breite von 100%.
    3. Beispiel 6: Sieht gut im NN6 aus (= 3 Bilder). Der IE5 zeigt nur einen grauen <hr>-Tag, ca. 12px hoch, 80% breit, und ohne Rahmen. Die Hintergrundgrafiken werden leider dennoch nicht angezeigt.
    4. Beispeil 6 mit Workaround: Sieht gut in beiden browsern aus (=3 Bilder).
  2. Der Grund, warum der IE5/Mac einen grauen Kasten für die Beispeile 1 und 6 zeigt, ist auf die Eigenschaft color:transparent zurückzuführen. Transparent keine zulässige Eigenschaft. Nur backgound-color darf transparent sein. Dieses ist eigentlich ein weiterer Grund für die letzte Lösung des im <div> vergepackten <hr />-Tags.
  3. Craig Saila zeigt auf die Web Building Tips hin, wo noch mehr Tips zu horizontal rules zu finden sind.

©2002 Marek Prokop
Letztes Update: 18. April 2006

Pages: 1 2