Vererbung bei Listen (Hintergrund)

img · #1 (**permalink**) 15.04.2009, 15:25

Hallo miteinander,

es geht mal wieder um folgendes Menü (Testcase)

Das Menü hat 3 Ebenen, wenn man auf Ebene 2 ist und in das Dropdown (Ebene3) geht, bleibt der aktuelle Bereich von Ebene 2 noch aktiv. Soweit so gut.

Ich hätte gerne, dass aber auch der aktive Bereich der 1. Ebene aktiv bleibt, vergebe ich aber für #eben01 li:hover einen Hintergrund, so vererbt er sich komplett auf alle anderen listen (Ebene 2 und 3). Der entsprechende Eintrag ist im CSS markiert.

Wie schaffe ich es, dass lediglich die oberste Ebene betroffen ist und die beiden unteren bleiben wie sie sind?

Code:

* { margin: 0; padding: 0; }

 html, body, p, ul, h1, h2, ... {
margin: 0;
padding: 0;
}

body {
	font-family:Arial, Verdana, Sans-serif;
	line-height: 18px;
	background: #ffffff;
	margin: auto;
	}

#navibereich, #navibereich a {
	color:#ffffff;
	font-size:11px;
	text-decoration:none;
	text-transform:uppercase;
	}

/*#ebene01 li:hover {
	background:#a5d643;
	}
*/


#ebene01 {
	list-style-type:none;
	width: 100%;
	height:25px;
	display: block;
	background:#525252;
	border-top:1px solid #000000;
	border-bottom:1px solid #000000;
	}

#ebene01 li{
	float:left;
	}
	
#ebene01 a {
	display:block;
	margin: 0 1em;
	padding 0.5em;
	height:25px;
	padding-top:3px;
	}

.ebene02{ /*_________________________________ 100% breite? */
	background:#a5d643;
	height:24px;
	position:relative;
	top:0;
	left:0;
	margin-top:27px;
	margin-bottom:1px;
	list-style-type:none;
	}

.ebene02 li:hover {
	background:#699611;
	}

.ebene03 li{
	width:100%;
	border-top:1px solid #ffffff;
	}
	
.ebene03 li a{
	width:100%;
	}

.ebene03 {
	display:inline;
	background-color:#a5d643;
	position:absolute;
	list-style-type:none;
	border-left: 3px solid #699611;
	margin-top:20px;}

.ebene03 li:hover{
	background:#699611;
	}
	
.ebene02,
.ebene02 .ebene03 {                            /* Ebene 2 und 3 verstecken */
   height:     0px;
   position:   absolute;
   left:       -9999px;
   width:      0px;
	}
	
.ebene02 li:hover {
	position:relative;
	}

.ebene02 li:hover ul.ebene03 {
	position:absolute;
	top:0;
	left:0;
	margin-top:25px;
	}

li:hover ul,
.ebene02 li:hover ul {                          /* Ebene 2 und 3 bei hover wieder sichtbar machen */
   height:              auto;
   left:                auto;
   width:               auto;
	}

fricca · #2 (**permalink**) 15.04.2009, 15:40

Den Kind-Selektor verwenden oder -- wenn IE < 7 berücksichtigt werden soll -- für die nächsten Ebenen überschreiben (li:hover li).

Mit Vererbung hat das nichts zu tun. Dein Selektor spricht alle Nachfahren an -- unabhängig von der Verschachtelungstiefe.

regloh · #3 (**permalink**) 15.04.2009, 15:44

Der IE < 7 kennt doch aber :hover nur für Links oder?

fricca · #4 (**permalink**) 15.04.2009, 15:52

Richtig.
Wenn IE < 7 berücksichtigt werden soll, braucht es Nachhilfe. Ein Script wie Suckerfish löst das Selektorproblem auch nicht.
Eine Verwendung des Kind-Selektors für richtige Browser und zusätzlich des Nachfahrenselektors mit Überschreibung für IE < 7 würde den Code noch mehr aufblasen. Dann gleich für alle den Nachfahrenselektor.

img · #5 (**permalink**) 15.04.2009, 15:52

ok ich hab das jetzt wie folgt versucht:

Code:

#ebene01 li:hover {
	background:#a5d643;
	}

....

.ebene02 li:hover li {
	background:#699611;
	}

aber leider mit dem gleichen effekt, dass Ebene 2 die gleiche Farbe wie Ebene 1 bekommt. Der Hover für Ebene 2 wird dann nicht mehr angezeigt

fricca · #6 (**permalink**) 15.04.2009, 15:59

Du brauchst deine Ebenenklassen/-IDs nicht, entferne sie.
Nutze nur den Nachfahrenselektor. Für alle Ebenen.
Wenn dein zweiter Selektor eine ausreichend hohe Spezifität hätte, würde er die li-Elemente der dritten Ebene ansprechen, nicht die der zweiten. (edit: Falsch geschaut. Er spricht bereits die dritte Ebene an. Nimm unbedingt diese Klassen weg. Da blickt doch keiner mehr durch. Ich zumindest nicht.)

Wenn du ein Dropdown-Menü erstellen willst, musst du absolut sicher im Umgang mit Selektoren und deren Spezifität sein. Lies dich da nochmal ein.

img · #7 (**permalink**) 15.04.2009, 16:03

Zitat:

Zitat von fricca

Du brauchst deine Ebenenklassen/-IDs nicht, entferne sie.
Nutze nur den Nachfahrenselektor. Für alle Ebenen.
Wenn dein zweiter Selektor eine ausreichend hohe Spezifität hätte, würde er die li-Elemente der dritten Ebene ansprechen, nicht die der zweiten. (edit: Falsch geschaut. Er spricht bereits die dritte Ebene an. Nimm unbedingt diese Klassen weg. Da blickt doch keiner mehr durch. Ich zumindest nicht.)

Wenn du ein Dropdown-Menü erstellen willst, musst du absolut sicher im Umgang mit Selektoren und deren Spezifität sein. Lies dich da nochmal ein.

Danke für deine Antwort, habs jetzt so gemacht.

Code:

li:hover {
	background:#a5d643;
	}

....

.ebene02 li:hover {
	background:#699611;
	}

.ebene03 li:hover {
	background:#699611;
	}

So funktioniert es (im FF3) erstmal.

fricca · #8 (**permalink**) 15.04.2009, 16:04

Jetzt ändern also alle Listen auf deiner Seite die Hintergrundfarbe. Na wenn du das willst.
Nochmal: Weg mit den Klassen -- und v.a. mit dieser Mischung aus IDs und Klassen.

img · #9 (**permalink**) 15.04.2009, 16:11

mh ja das is mir bewusst... was es aber nicht besser macht das es global gilt.
Ich muss jetzt nochmal nachfragen, soll ich die Klassen zu IDs machen?

Code:

#ebene01 li:hover {
	background:#a5d643;
	}

....

#ebene02 li:hover {
	background:#699611;
	}

#ebene03 li:hover {
	background:#699611;
	}

Ich befürchte so hast du es nicht gemeint? Was für mich jetzt auch keinen Sinn hätte weil dadurch die Funktionalität nicht verändert wird bzw mein ursprüngliches Problem ja nicht behoben wird oder?

fricca · #10 (**permalink**) 15.04.2009, 16:15

Du sollst sie entfernen. Löschen. Wegnehmen.
Die Listenstruktur reicht völlig aus, um Selektoren zu bilden.
#navigation li
#navigation li:hover
#navigation li:hover li
#navigation li li:hover
#navigation li li:hover li
#navigation li li li:hover
#navigation li li li:hover li
etc.

Wenn das sauber untereinandersteht und vielleicht sogar kommentiert wird, versteht man das auch in einem halben Jahr noch.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Listen in Eltern mit Padding: Punkte werden im verbotenen Bereich angezei	braindead	(X)HTML	5	13.09.2007 16:43
Div Orientierung	Leonidus	CSS	22	30.05.2007 17:05
Hintergrund wird im IE abgehackt	lekim	CSS	0	29.03.2006 14:14
Vererbung bei Listen	ONeill	CSS	5	16.02.2006 09:51
hintergrund bei listen	kurtzman	CSS	8	26.01.2006 18:01