Höhe der Links

So, dann guck ich hier auch mal mit meinem neusten Problemchen vorbei:

Ich habe vor, die Links meiner Navigation mit Hintergrundbildern zu versehen (verschiedene).

Eigentlich klappt das auch ganz gut, nur irgendwie... kriegt der Link nciht die richtige Höhe und es wird nur der Ausschnitt angezeigt, wo der Text steht.

Code-Ausschnitt:

HTML:

<ul id="navi">
<li><a href="#" class="link1">Link 1</a></li>
<li><a href="#" class="link2">Link 2</a></li>
<li><a href="#" class="link3">Link 3</a></li>
<li><a href="#" class="link2">Link 4</a></li>
<li><a href="#" class="link4">Link 5</a></li>
</ul>

CSS:

#navi li {
    list-style-type: none;
    float: left;
    height: 72px;
}




#navi a{
    height: 72px;
}




.link1 {
    background-image: url(puzzle_1.gif);
    height: 72px;
}




.link2 {
    background-image: url(puzzle_2.gif);
    height: 72px;
}




.link3 {
    background-image: url(puzzle_3.gif);
    height: 72px;
}




.link4 {
    background-image: url(puzzle_2.gif);
    height: 72px;
}

Die Frage ist nun: Wo kann ich die Höhe (72px) einfügen, damit das komplette Bild angezeigt wird? Bei den Positionen, wos steht, klappt es nicht

Greetz
Laura

Kann man deiner Antwort entnehmen, dass du wieder da bist?^^

Irgendwie klappt es jedoch immer noch nicht, der neue Code:

#navi {
    height: 72px;
    line-height: 72px;
}




#navi li {
    list-style-type: none;
    float: left;
    height: 72px;
    line-height: 72px;
}




#navi a{
    height: 72px;
    line-height: 72px;
}




.link1 {
    background-image: url(puzzle_1.gif);
    height: 72px;
    line-height: 72px;
}




.link2 {
    background-image: url(puzzle_2.gif);
    height: 72px;
    line-height: 72px;
}




.link3 {
    background-image: url(puzzle_3.gif);
    height: 72px;
    line-height: 72px;
}




.link4 {
    background-image: url(puzzle_2.gif);
    height: 72px;
    line-height: 72px;




}

ich hab keine Ahnung, wo ich das noch reinschreiben soll

Greetz
Laura

Okay, hat jetzt geklappt.

Die Lösung für das Problem: Einfach das von dir erwähnte Inline-Element mit

display: block;

zu einem Block-Element machen - schon klappts.

Jetzt aber noch ein Problem:

Mit IrfanView hab ich eine Farbe (weiß) als transparent eingestellt. Wenn ich das Bild jetzt aber mit einem anderen zusammen einblende, ist das nicht transparent, sondern weiß, d.h. man sieht das andere Bild dahinter nicht
Woran liegt das?

So, das Problem hat sich dann auch gelöst. So sieht das ganze jetzt aus:

[Blockierte Grafik: http://666kb.com/i/baevzc8vq10f1sctu.jpg]

Die Links sind allerdings nur zu Testzwecken, der orange ist immer der aktive.

Nachtrag: Das Ganze hat natürlich noch einen hover-Effekt^^:

[Blockierte Grafik: http://666kb.com/i/baew2w49h3rm6wtte.jpg]
[Blockierte Grafik: http://666kb.com/i/baew4brc2j9uzzawi.jpg]