CSS - Bei Menu nur Text anklickbar

[adistoe]

Hallo zusammen

Ich habe ein Problem mit meinem Menu.

Wenn ich einen Link anklicken möchte, funktioniert dies nur, wenn ich auf den Text klicke, nicht aber, wenn ich auf den Hintergrund des Buttons klicke.

Mein Menu ist eine <ul> und die Formatierung sieht folgendermassen aus:

#Navigation{
	font-size:12pt;
	margin:10px 10px 20px 10px;
	padding:5px;
	border-radius:15px;
	vertical-align:middle;
	text-align:center;
    float:left;
	}
	
#Navigation li{
	width:100px;
	padding:5px 30px;
	list-style-type:none;
	background-image:url(../images/button_holz.png);
	border-radius:5px;
	font-weight:bold;
	}

#Navigation li#current{
	background-image:url(../images/button_holz_actual.png);
	}
	
#Navigation li:hover{
	background-image:url(../images/button_holz_hover.png);
	text-decoration:none;
	}
	
#Navigation a:link, #Navigation a:hover, #Navigation a:visited{
	color:white;
	text-decoration:none;
	}

Ich hoffe, jemand kann mir helfen

Mit freundlichen Grüssen
adistoe

PS: display:block sagt Google, doch das bewirkt was andres^^

#Edit: das float:left; will nicht in die richtige Position, stimmt bei meiner CSS datei aber, also nicht wundern^^ (Code Tag...)

[MrPuschel]

PHP Code:

#Navigation a:link, #Navigation a:hover, #Navigation a:visited{
    color:white;
    text-decoration:none;
        display:block;
        line-height:1.5em;
} 


Müsste so funktionieren. Durch display-block wird dein a vom inline zum block Element und füllt dein li ganz aus. Über line-height steuerst du die Höhe des a Elements und des darum liegenden Listen Elements.

[adistoe]

Die Höhe nimmt er so schonmal. aber wie bring ich es auf die ganze Breite?
mit Width nicht möglich...

[MrPuschel]

Probier mal display:inline-block statt display:block. Dann sollte das li Element auch der Länge nach ausgefüllt werden.

[adistoe]

leider kein Unterschied.

#edit:
Nochmal mit Width probiert:
Bei width ändert sich die Breite nach rechts (nach links nicht), jedoch verschiebt sich dann der Text aus dem Hintergrund...

[MrPuschel]

Poste doch bitte mal dein html.

[adistoe]

<nav id="Navigation">
		<ul>
			<li id="current"><a href="index.html">Home</a></li>
			<li><a href="sinn-und-zweck.html">Sinn & Zweck</a></li>
			<li><a href="forschung.html">Forschung</a></li>
			<li><a href="buergerorte.html">Bürgerorte</a></li>
			<li><a href="aktuelles.html">Aktuelles</a></li>
			<li><a href="publikationen.html">Publikationen</a></li>
			<li><a href="international.html">International</a></li>
		</ul>
	</nav>

[MrPuschel]

[adistoe]

uiui das macht's noch schlimmer^^
Jetzt werden die Hintergrundbilder ineinander genommen und der Link ist trotzdem nicht auf der ganzen Breite :O

[MrPuschel]

Dann ist dein CSS anscheinend fehlerhaft. Fang nochmal von null an.

[pdf]

oder schicke uns doch einfach mal die komplette seite online

[MrPuschel]

Er hat bereits die Lösung. Er muss sie nur noch anwenden.

[adistoe]

@pdf: Die Seite ist nicht online verfügbar.

@MrPuschel: Danke für die Hilfe aber es ist nicht immer, wenn ein Problem nicht gleich gelöst werden kann, die ganze CSS fehlerhaft.

Da ich anscheinend nicht auf weitere Hilfe hoffen kann, guck ich, wie ich selbst weiterkomme.

Damit Thema erledigt und #closerequest.

[MrPuschel]

@MrPuschel: Danke für die Hilfe aber es ist nicht immer, wenn ein Problem nicht gleich gelöst werden kann, die ganze CSS fehlerhaft.

Da ich anscheinend nicht auf weitere Hilfe hoffen kann, guck ich, wie ich selbst weiterkomme.

[adistoe]

Lass gut sein.

Ich bitte einen Mod, den Thread zu schliessen.

#edit:
btw. MrPuschel, ich hab bereits mit einer neuen CSS getestet, funktionierte aber ebenfalls nicht.