Hallo Leute, habe ein kleines Problem mit der Formatierung der Links.
Und zwar habe ich die Links mit Hintergrundbildern versehen (verschiedene, deshalb die Klassen).
Irgendwie klappt das aber nicht so ganz, es wird nämlich immer nur der Teil des Bildes angezeigt, wo der Text steht.
Hier der vorläufige Code:
HTML:
CSS:
In einem anderen Forum habe ich den Tipp gekriegt, auch line-height zu verwenden. Funktioniert aber auch nicht. Hier der Code:
Frage: Wie krieg ich das hin????
Greetz
Laura
Und zwar habe ich die Links mit Hintergrundbildern versehen (verschiedene, deshalb die Klassen).
Irgendwie klappt das aber nicht so ganz, es wird nämlich immer nur der Teil des Bildes angezeigt, wo der Text steht.
Hier der vorläufige Code:
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>
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;
}
In einem anderen Forum habe ich den Tipp gekriegt, auch line-height zu verwenden. Funktioniert aber auch nicht. Hier der Code:
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;
}
Frage: Wie krieg ich das hin????
Greetz
Laura