icon in einem Link(Button) ausrichten

[michi]

Das ist mein Link

<a class="button" href="seite.php"><img src="images/pfeil.png">Link</a>

.button{border: 1px solid #ccc; padding: 5px;text-decoration:none;color:#202F42;font-size:15px;}
.button img {padding-top: 15px;}

Der Link soll einen Rahmen haben, und vorne ein Bild inerhalb des Rahmens. Das würde ich aber gerne ausrichten, aber es verschiebt sich der ganze Link nicht nur das Bild.

[Gunnar Bittersmann]

@@michi

<a class="button" href="seite.php"><img src="images/pfeil.png">Link</a>

Fehler: zwingend notwendiges alt-Attribut fehlt. Hier: alt="".

Der Link soll einen Rahmen haben, und vorne ein Bild inerhalb des Rahmens. Das würde ich aber gerne ausrichten, aber es verschiebt sich der ganze Link nicht nur das Bild.

Ausrichten auf Englisch: align. In der Vertikalen: vertical-align. [MDN]

Sinnvoller dürfte aber sein, das Bild überhaupt nicht im Markup (HTML) zu haben, sondern im Stylesheet als Hintergrundbild.

LLAP 🖖

[michi]

<a class="button" href="seite.php" alt="link">Link</a>

.button{border: 1px solid #ccc; padding: 5px;text-decoration:none;color:#202F42;font-size:15px;}
.button img {background-image:url(images/pfeil.png);}

Du meinst so, aber dann wird das Bild überhaupt nicht mehr eingeblndet

[michi]

Sorry ich hab da einen SCHMARRN gemacht.

.button{border: 1px solid #ccc; padding: 5px 5px 5px 25px;text-decoration:none;color:#202F42;font-size:15px;background-image:url(images/pfeil.png);background-repeat: no-repeat;background-position: 5px;}

Jetzt gehts,

danke

[Gunnar Bittersmann]

@@michi

<a class="button" href="seite.php" alt="link">Link</a>

Nein, beim a-Element macht das alt-Attribut keinen Sinn.

Jedes img-Element muss ein alt-Attribut haben.

LLAP 🖖

[michi]

Danke.. aber jetzt kommt noch eine Grafik Frage:

Wenn ich zusätzlich zum Auswahltext noch eine Grafik einbinden möchte

  <select>
    <option value="de">de</option>
    <option value="en">en</option>
    <option value="fr">fr</option>
  </select>

option [value="de"]{background-image: url(images/de.png);}
option [value="en"]{background-image: url(images/en.png);}
option [value="fr"]{background-image: url(images/fr.png);}

müsste doch eigentlich auch funktionieren, tut es aber nicht

[Gunnar Bittersmann]

@@michi

müsste doch eigentlich auch funktionieren, tut es aber nicht

option ist so ziemlich das undankbarste Element, wenn’s um Stylen geht.

Mal so aus Neugier: Was soll das werden? Doch nicht etwa ein Sprachauswahlmenü?

Flaggen stehen nicht für Sprachen und Pull-down-Menüs sind zur Spachauswahl ungeeignet.

LLAP 🖖

[marctrix]

Hej Gunnar,

<a class="button" href="seite.php"><img src="images/pfeil.png">Link</a>

Fehler: zwingend notwendiges alt-Attribut fehlt. Hier: alt="".

Sinnvoller dürfte aber sein, das Bild überhaupt nicht im Markup (HTML) zu haben, sondern im Stylesheet als Hintergrundbild.

Wir kennen das Bild nicht, daher würde ich das so nicht sagen. Ich gehe jetzt mal davon aus, dass das Bild Informationen transportiert (wäre jedenfalls schön, also so etwas wie externer Link, interner Link, E-Mail-Link oder Downlod).

Dann sollte die entsprechende Info auch in den alt-Text.

Übeigens @michi: sicher wäre ein svg angebracht.

Marc