CSS - Bei Menu nur Text anklickbar

02/24/2013 12:02 adistoe#1
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:

Code:
#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...)
02/24/2013 12:13 MrPuschel#2
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.
02/24/2013 15:46 adistoe#3
Die Höhe nimmt er so schonmal. aber wie bring ich es auf die ganze Breite?
mit Width nicht möglich...
02/24/2013 16:07 MrPuschel#4
Probier mal display:inline-block statt display:block. Dann sollte das li Element auch der Länge nach ausgefüllt werden.
02/24/2013 16:18 adistoe#5
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...
02/24/2013 16:35 MrPuschel#6
Poste doch bitte mal dein html.
02/24/2013 17:16 adistoe#7
HTML Code:
<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>
02/24/2013 17:26 MrPuschel#8
[Only registered and activated users can see links. Click Here To Register...]
02/24/2013 17:30 adistoe#9
uiui das macht's noch schlimmer^^
Jetzt werden die Hintergrundbilder ineinander genommen und der Link ist trotzdem nicht auf der ganzen Breite :O
02/24/2013 17:52 MrPuschel#10
Dann ist dein CSS anscheinend fehlerhaft. Fang nochmal von null an.
02/24/2013 18:07 pdf#11
oder schicke uns doch einfach mal die komplette seite online
02/24/2013 18:17 MrPuschel#12
Er hat bereits die Lösung. Er muss sie nur noch anwenden.
02/24/2013 18:38 adistoe#13
@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.
02/24/2013 18:50 MrPuschel#14
Quote:
@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.
[Only registered and activated users can see links. Click Here To Register...]
02/24/2013 19:02 adistoe#15
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.