zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Vererbung bei Listen (Hintergrund)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.04.2009, 16:25
img img ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.05.2008
Beiträge: 258
img befindet sich auf einem aufstrebenden Ast
Standard Vererbung bei Listen (Hintergrund)

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;
	}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.04.2009, 16:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.04.2009, 16:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

Der IE < 7 kennt doch aber :hover nur für Links oder?
Mit Zitat antworten
  #4 (permalink)  
Alt 15.04.2009, 16:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 15.04.2009, 16:52
img img ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.05.2008
Beiträge: 258
img befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von img (15.04.2009 um 16:59 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 15.04.2009, 16:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.

Geändert von fricca (15.04.2009 um 17:01 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 15.04.2009, 17:03
img img ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.05.2008
Beiträge: 258
img befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
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.
Mit Zitat antworten
  #8 (permalink)  
Alt 15.04.2009, 17:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 15.04.2009, 17:11
img img ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.05.2008
Beiträge: 258
img befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 15.04.2009, 17:15
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
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
Problem mit Listen in Eltern mit Padding: Punkte werden im verbotenen Bereich angezei braindead (X)HTML 5 13.09.2007 17:43
Div Orientierung Leonidus CSS 22 30.05.2007 18:05
Hintergrund wird im IE abgehackt lekim CSS 0 29.03.2006 15:14
Vererbung bei Listen ONeill CSS 5 16.02.2006 10:51
hintergrund bei listen kurtzman CSS 8 26.01.2006 19:01


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