images per CSS definieren (ohne Block-Element?)

[Der Martin]

Hi,

Nun gibt es im Web Dutzende von Seiten wo das mit div und background-image gezeigt wird, jedoch ein "kleiner" Haken wird nicht debattiert:
Dass ein Block-Element eine neue Zeile erzwingt

das kommt ganz drauf an, wie die Verwandtschaftsverhältnisse dieses Elements aussehen. Wenn das Element selbst seine Position und Größe mit CSS (anhand von margins und durch die Nachbarelemente, oder gar durch explizite Positionierung) oder durch die Art der Verschachtelung erhält, ändert auch display:block oft nichts mehr daran.

und mit anderen display-Attributen als "block" (also z. B. display:inline oder run-in) funktioniert es nicht (getestet mit Firefox).

Bei inline-Elementen darf width und height nicht wirken, also ist das Element dann so groß, wie es sein Inhalt erfordert.

.linkArrow {
  background-image: url("/img/arr_link4.gif");
  width:5px;
  height:8px;
  margin-right:4px;
}

<a href="#verteiler"><div class="linkArrow"></div>Mail-Verteiler</a>

Das ist invalides HTML: a-Elemente dürfen keine Blockelemente enthalten. Und wozu überhaupt das div?

<a href="#verteiler" class="linkArrow">Mail-Verteiler</a>

.linkArrow
 { display: block;
   background: #DDF url("/img/arr_link4.gif") no-repeat left;
   padding-left: 5px;
   height: 12px;
   margin-right: 4px;
 }

Ist das nun Teil einer Navigationsliste, sorgen die umschließenden li-Elemente für die richtige Position; befindet sich so ein Link im Fließtext, kann man display: block; auch durch inline-block ersetzen.
Bei der geringen Größe des Pfeil-Bildes würde ich mir sogar überlegen, die Größenangabe für das a-Element ganz wegzulassen (damit habe ich auch keinen Grund für display: block). Ich vertraue darauf, dass niemand ernsthaft die Schrift (Zeilenhöhe) kleiner als 8px einstellt - und wenn, dann nur um einen Überblick über das Gesamtlayout einer große Textmenge zu bekommen, so dass die nicht mehr erkennbaren Verzierungen dann auch keine Rolle spielen. Und linke/rechte paddings und margins darf man auch Inline-Elementen geben.

Ist natürlich blöd wenn nach meinem Link-Icon erstmal eine Newline kommt.

Das ist aber auch ein selten auftretender Fall. Und man kann den Umbruch ja auch mit white-space: pre; (oder nowrap) verhindern, wenn man das unbedingt will.

So long,
 Martin