CSS Floating Image Alignment

[qhil]

Moin zusammen,

um ein Bild (12x12 Pixel) neben einem Link zu zentrieren, benutze ich folgenden Code:

<tr>
   <td style='text-align: left; line-height: 12px'>
      <img src='back.jpg' style='float: left'>&nbsp;<a href='seite.php'>Zurück</a>
   </td>
</tr>

Das funktioniert auch soweit ohne Probleme. Nun möchte ich allerdings einen Link mit "text-align: right" rechts ausrichten und das Bild eben auch davon anzeigen. Wenn man hier nun ebenfalls "float: left" benutzt, dann befindet sich das Bild am Anfang der Zelle und nicht vor dem Text. Mit "float: right" ist das Bild hinter dem Text, was ich auch nicht möchte. Ebenso wenig funktioniert "float:left" und zusätzlich "align: right" im Image-Tag. Das ändert gar nichts.

Hat jemand eine Idee, wie ich hier vorgehen kann? Ich steh' grad auf dem Schlauch
Danke für die Hilfe.

 

[Yuuri]

Warum packst du das Bild nicht in den Link und positionierst es dort? td ist nun mal ein Blockelement, was sich erstreckt.

 

[qhil]

Weil ich den typischen Strich eines Links nicht unter dem Bild haben möchte

 

[benneq]

sollte sich doch per css lösen lassen?!

a img {
text-decoration: none;
}

oder geht das nicht?

 

[Yuuri]

Warum lässt du den Link denn unterstreichen?

Dann pack ein <span> um das Bild und den Link und positionier diesen. So wäre es losgelöst vom Link, aber noch eigens positionierbar abhängig vom Container den beide umschließen.

 

[Kausalat]

Warum nutzt du keine seit Jahren bewährten CSS-Möglichkeiten für die Grafikeinbindung? Eine "Hilfsgrafik" (also kein "echtes" Bild an sich), die per <img>-Tag eingebunden wird, ist semantisch mehr als fragwürdig.

Lege für deinen Link doch einfach per CSS eine sich nicht wiederholende Hintergrundgrafik fest. Die horizontale Textverschiebung erreichst du durch padding. Den <img>-Tag könntest du dir dann gänzlich sparen.

<a href="#" class="zuruecklink">Zurück</a>

.zuruecklink { background: url(grafik.png) no-repeat; padding-left: 15px; }

 

[benneq]

Stimme Kausalat zu. CSS Sprites ftw!

 

[Yuuri]

@ Kausalat: Dann wird das Bild aber mit unterstrichen, was er nicht will. Deine Methode würde ich eher durch ein :before oder :after lösen anstatt hier mit einem Padding zu handtieren.

 

[Kausalat]

Nope, es wird bei der Lösung nur Text unterstrichen.

 

[benneq]

Das padding verhindert ja, dass das Bild mit unterstrichen wird.

 

[qhil]

Die Lösung von Kausalat funktioniert bestens mit dem Zusatz für die vertikale Ausrichtung. Danke für die Antworten - hat mir wirklich sehr geholfen.

   background: url(back.jpg) no-repeat left center; padding-left: 15px;'

 

[Bisumaruku]

Noch 2 Tips! Arbeite mit DIV statt TABLE, es sei denn du willst wirklich eine Tabelle darstellen und es wäre klug das Stylesheet in eine CCS Datei zu packen anstatt in deine HTML Tags.