Navigation (liste) mit Text und Bild

[xero7]

Hallo,

ich habe ein kleine Problem. Ich habe eine Liste erstellt, welche die Navigation darstellt.

<ul>

<li>
  <a href="#"><img src="images/email.png" alt="kontakt" />&nbsp;&nbsp;Kontakt</a></li>
</ul>

Nun habe ich jedoch das Problem, dass die Grafik, welche eine Höhe von 16px hat, den Linktext nach unten schiebt. Sieht dann ungefähr so aus

[::] Kontakt

DIch habe wirklich schon einige Varianten durchprobiert. Hat aber bis jetzt nichts geklappt. Wichtig ist jedoch, dass die Grafik im <a> bleibt und nicht als li Bild definiert wird.

Bitte um schnelle Hilfe.

Liebe Grüße,
Xero

 

[feelx75]

AW: Navigation (liste) mit Text und Bild

Hoi...

wenn ich dich richtig verstanden habe, müsste es funktionieren, wenn du das Bild etwas nach oben 'rückst' mit negativer margin-bottom eigenschaft... etwa so im CSS:

LI A IMG {margin-bottom: -10px;}

 

[sokie]

AW: Navigation (liste) mit Text und Bild

da beides inline elemente sind, kannst du sie per css vertical-align: middle; zueinander ausrichtien.

li a img{
  vertical-align: middle;
}

ps: statt der &nbsp; gibst du dem img besser ein margin-right das wird genauer.

 

[xero7]

AW: Navigation (liste) mit Text und Bild

Vielen Dank.
Hat super geklappt.

Liebe Grüße