CSS Menü

[Karl_Moik]

Hallo,

ich wollte ungern für meine "kleine" Frage ein exra Thema aufmachen und hab nun ein Thema allgemein zu Menüdesign via CSS erstellt.

Meine Frage:

http://img25.imageshack.us/img25/7263/moiklovesyou30pc6.jpg

Es ist eine simple Navigation.

<ul>

    <li><a href="#">Navipunkt</a></li>

    <li><a href="#">Navipunkt</a></li>

    <li><a href="#">Navipunkt</a></li>

    <li><a href="#">Navipunkt</a></li>

</ul>

Nun - wie im obigen Screenshot zu sehen - füllt der Link <a> das Listenelement <li> nicht aus.

#navi {

	list-style-type: none;

	letter-spacing: 2px;

}


#navi li {

	float: left;

	border-right: 1px solid white;

}


#navi a {

	color: white; 

	text-decoration: none;

	padding: 5px 15px; 

}

Ich habe gehofft, dass das Padding im Link die <li> gleich mit aufspannt. Dem war leider nicht so.

Kennt das Problem jemand und kann direkt helfen? Wäre super

[Crash2001]

Gib doch einfach eine Breit mit im CSS.

#navi li {

	float: left;

	border-right: 1px solid white;

        width: 100pt;

}

Oder so z.B.. Das sollte meine ich auch bei <li> gehen. Falls das li jedoch länger ist, wird es glaube ich dennoch darüber hinausgehen.

[Karl_Moik]

Gib doch einfach eine Breit mit im CSS.

#navi li {

	float: left;

	border-right: 1px solid white;

        width: 100pt;

}

Oder so z.B.. Das sollte meine ich auch bei <li> gehen. Falls das li jedoch länger ist, wird es glaube ich dennoch darüber hinausgehen.

Das Problem ist ja nicht das <li> sondern das <a>, dass sich nicht in der Größe anpasst.

[Crash2001]

Na dann gib dem doch per CSS die entsprechende width mit, falls das geht. Oder leg den Link komplett auf das <li> oder eine kleine tabelle da drin.

Alternativ kannst du natürlich auch entsprechend viele Leerzeichen zum auffüllen nachstellen in dem link.

[Karl_Moik]

Na dann gib dem doch per CSS die entsprechende width mit, falls das geht. Oder leg den Link komplett auf das <li> oder eine kleine tabelle da drin.

Alternativ kannst du natürlich auch entsprechend viele Leerzeichen zum auffüllen nachstellen in dem link.

Also mit Leerzeichen aufzufüllen ist nun echt keine schöne Lösung. Es geht auch mehr um die Höhe als um die Breite.

Trotzdem danke.

[Crash2001]

Gibt ja auch noch height ...

Oder gibt auch noch die Möglichkeit, ein (transparentes) Bild hinter den Link zu legen.

Bearbeitet 15. Februar 2009 von Crash2001

[LoehnenGate]

Wenn der Link <a> das Listenelement <li> ausfüllen soll, dann versuche es doch mal mit <style="display:block">.

Auf diese Weise geht der Link über die gesamte Zeile und ist klick-sensitiv.

Gruß

Loehnengate