zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden ul Link hover background soll über schrift gehen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.08.2009, 00:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.08.2008
Beiträge: 5
guest1 befindet sich auf einem aufstrebenden Ast
Standard ul Link hover background soll über schrift gehen

Hallo,

ich habe folgenden style:

Code:
#navigation
{
	margin: 0 auto;
	width: 890px;
	height: 36px;
	padding: 5px;
	
	background-color: #c0bea7;
	color: #262721;
	
	text-align: left;
}

#navigation ul
{
	list-style-type: none;
	
	padding: 2px;
	margin: 4px;

	font-size: 19px;
	height: 36px;
}

#navigation ul li
{
	list-style-position: inside;
	display: inline;
	margin-right: 10px;
	height: 36px;
}

#navigation ul li:hover
{
	background-color: black;
}

#navigation ul li a:hover
{
	color: white;
}
ich will wenn man mit der maus darüber fährt, dass sich die hintergrund farbe ändert und zwar nicht nur hinter der schrift sonder über die schrift hinaus. siehe bild



alles was im roten rahmen ist sollte ebenfalls schwarz sein.

ich habe verschiedene varianten probiert. unter anderem margin (mit negativen werten ), padding usw.

Hat sonst jemand noch eine idee?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.08.2009, 00:43
Benutzerbild von David
auch, ja!
XHTMLforum-Kenner
 
Registriert seit: 08.11.2007
Beiträge: 2.626
David ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer Anblick
Standard

Links sind standardmäßig Inline-Elemente. Wenn du sie aber als Blockelemente anzeigen lässt (display:block), kannst du ihnen Werte für Höhe und evtl. Breite mitgeben. Mit a:hover änderst du dann die Hintergrundfarbe. li:hover solltest du dann nicht mehr brauchen.
__________________
github | http://dnaber.de
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.08.2009, 00:59
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zumal der IE < 7 das eh nicht kann. Für alles weitere zu Menüs siehe FAQ.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #4 (permalink)  
Alt 16.08.2009, 19:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.08.2008
Beiträge: 5
guest1 befindet sich auf einem aufstrebenden Ast
Standard

Hallo

display block funktioniert. Danke

HTML-Code:
#navigation ul li
{
  display:block;
	list-style-position: inside;
	display: inline;
	margin-right: 10px;
	height: 36px;
	padding:11px;
}
Mit Zitat antworten
  #5 (permalink)  
Alt 16.08.2009, 20:38
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von guest1 Beitrag anzeigen
display block funktioniert.
So aber nicht

Code:
#navigation ul li
{
	display:block;
	list-style-position: inside;
	display: inline;
	margin-right: 10px;
	height: 36px;
	padding:11px;
}
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
clearen im 21 Jhr. Muamicus CSS 23 14.12.2010 20:50
ul richtig zentrieren Muamicus CSS 23 14.12.2010 19:28
Problem mit CSS Menü SMundt CSS 9 07.01.2009 20:12
Grafik in ein Template als Hintergrund einbinden. monsun CSS 0 30.06.2008 13:58
joomla template entschlüsseln nieselfriem CSS 2 18.03.2008 14:12


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:30 Uhr.