Höhe der Links

[Toastbrot]

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:

<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;
}

In einem anderen Forum habe ich den Tipp gekriegt, auch line-height zu verwenden. Funktioniert aber auch nicht. Hier der 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

 

[prm]

Gib mal a noch einen width-Wert und ein "display: block;"

 

[Toastbrot]

Okay, danke, hat funktioniert.

Hätte noch eine Frage: Wenn ich ein *.gif Bild habe, kann ich ja eine transparente Farbe einstellen. Wenn ich jetzt aber dieses Bild einblenden lasse, ist die transparente Farbe (weiß) nich transparent, d.h. man sieht das Bild, was dahinter ist, nicht. Woran liegt das?

Greetz
Laura

 

[prm]

Transparente Hintergründe: Tipps und Tricks auf CSS 4 You - The Finest in Stylesheets

 

[Efchen]

Gib mal a noch einen width-Wert und ein "display: block;"

Und damit Du es in Zukunft auch verstehst, was Du da machst, informierst Du Dich darüber, was "Inline-Elemente" und was "Block-Elemente" sind und wie sie sich verhalten, denn das ist auch sehr wichtig fürs das allgemeine Verständnis.

Dabei wirst Du dann darüber stolpern, dass "height" für Inline-Elemente nicht definiert ist und dass der Tipp von prm dafür sorgt, dass sich Dein Inline-Element wie ein Block-Element verhält und deswegen dann "height" funktioniert.

Grüße,
-Efchen

 

[Toastbrot]

Transparente Hintergründe: Tipps und Tricks auf CSS 4 You - The Finest in Stylesheets

Das ist leider nicht das, was ich brauche. Ich habe ja nur einen Teil eines Bildes, der transparent sein soll, und das ist leider auch keine rechteckige Form.

@Efchen: Den Unterschied zwischen inline und block Elementen kenne ich, ich bin nur in der Situation nicht drauf gekommen, dass es daran liegen könnte. Auf die einfachsten Sachen kommt man ja meist nicht.


Danke an alle. Das mit den tranparenten Bildern hat sich jetzt auch geklärt.