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:
Code
<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:
Code
#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;
}
Alles anzeigen
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