15.04.2009, 16:25
|
|||
|
|||
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;
}
|
| Sponsored Links |
|
15.04.2009, 16: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.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken
|
| Sponsored Links |
|
15.04.2009, 16: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.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken
|
|
15.04.2009, 16:52
|
|||
|
|||
|
ok ich hab das jetzt wie folgt versucht:
Code:
#ebene01 li:hover {
background:#a5d643;
}
....
.ebene02 li:hover li {
background:#699611;
}
Geändert von img (15.04.2009 um 16:59 Uhr)
|
|
15.04.2009, 16: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.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (15.04.2009 um 17:01 Uhr)
|
|
15.04.2009, 17:03
|
|||
|
|||
|
Zitat:
Code:
li:hover {
background:#a5d643;
}
....
.ebene02 li:hover {
background:#699611;
}
.ebene03 li:hover {
background:#699611;
}
|
|
15.04.2009, 17: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.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken
|
|
15.04.2009, 17: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;
}
|
| Sponsored Links |
|
15.04.2009, 17: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.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ä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 |
Linear-Darstellung
