Subnavigation: Aktive Ebene1 gibt seine Styles an Ebene 2 weiter

[Andi]

Hallo zusammen!

Ich sitze seit vier Stunden vor meinem Quelltext und zweifle langsam an mit selber.

Ich habe eine horizontale Hauptnavigation und links neben dem Inhalt eine zweistufige Subnavigation. Die Seite läuft auf Bais des CMS MODX und die Navi mit dem CMS-eigenen Package Wayfinder. Ausgegeben wird für die Subnavi folgender recht simpler Quellcode:

<div class="subnavi">  
<ul>  
<li class="first active">  
<a title="Subnaviebene 1" href="index.php?id=3">Subnaviebene 1</a>  
<ul>  
<li class="first">  
<a title="Subnaviebene 2" href="index.php?id=4">Subnaviebene 2</a>  
</li>  
<li>  
<a title="Subnaviebene 2" href="index.php?id=6">Subnaviebene 2</a>  
</li>  
<li>  
<a title="Subnaviebene 2" href="index.php?id=8">Subnaviebene 2</a>  
</li>  
<li>  
<a title="Subnaviebene 2" href="index.php?id=9">Subnaviebene 2</a>  
</li>  
<li>  
<a title="Subnaviebene 2" href="index.php?id=10">Subnaviebene 2</a>  
</li>  
<li>  
<a title="Subnaviebene 2" href="index.php?id=11">Subnaviebene 2</a>  
</li>  
<li class="last">  
<a title="Subnaviebene 2" href="index.php?id=12">Subnaviebene 2</a>  
</li>  
</ul>  
</li>  
<li>  
<a title="Subnaviebene 1" href="index.php?id=7">Subnaviebene 1</a>  
</li>  
<li>  
<a title="Subnaviebene 1" href="index.php?id=13">Subnaviebene 1</a>  
</li>  
<li class="last">  
<a title="Subnaviebene 1" href="index.php?id=14">Subnaviebene 1</a>  
</li>  
</ul>  
</div>

Es wird also eine normale ungeordnete Liste des im CMS angelegten Seitenbaums erzeugt. Die IDs sind die IDs der jeweiligen Seiten im CMS.

Das CSS davon sieht so aus:

/*----- Subnavigation -----*/  
  
.subnavi {  
font: bold 11px Verdana, Arial, Helvetica, sans-serif;  
color:#66ccff;  
width:200px;  
height:250px;  
float:left;  
margin-top:20px;  
}  
  
.subnavi ul {  
list-style:none;  
margin:0;  
padding:0;  
}  
  
  
/*----- Subnavi Ebene 1  -----*/  
  
.subnavi ul li {  
margin-bottom:30px;  
}  
  
.subnavi ul li a {  
color:#66ccff;  
background:url(../img/common/pfeil_subnavi_hover.png) left no-repeat;  
padding-left:15px;  
text-decoration:none;  
}  
  
  
.subnavi ul li a:hover {  
color:#ffffff;  
background:url(../img/common/pfeil_subnavi.png) left no-repeat;  
  
}  
  
  
.subnavi ul li.active a {  
color:#ffffff;  
background:url(../img/common/pfeil_subnavi.png) left no-repeat;  
}  
  
  
/*----- Subnavi Ebene 2 -----*/  
  
.subnavi ul li ul {     /*----- Ganzer Subnaviblock -----*/  
margin:15px 0 15px 20px;  
}  
  
  
.subnavi ul li ul li {   /*----- Subnavi Einzelpunkte -----*/  
margin:0 0 10px 0;  
}  
  
  
.subnavi ul li ul li a {  
color:#66ccff;  
background:url(../img/common/pfeil_subnavi_hover.png) left no-repeat;  
padding-left:15px;  
text-decoration:none;  
}  
  
.subnavi ul li ul li a:hover,  
.subnavi ul li ul li.active a {  
background:url(../img/common/pfeil_subnavi.png) left no-repeat;  
color:#ffffff;  
}

Was ich nun nicht verstehe: Die Navigationspunkte der Ebene 2 nehmen die Styles an die ich bei

.subnavi ul li.active a

definiert habe. Anstatt diese anzunehmen die ich bei

.subnavi ul li ul li a

definiert habe. Wenn ich die obere Definition auskommentiere funktioniert die Untere.

Das Einzige was mit noch einfällt ist, dass der aktive Oberpunkt der Subnavi also:

.subnavi ul li.active a

seine Styles an seine Unterpunkte vererbt. Aber darüber habe ich erstens nirgends etwas gefunden und zweitens habe ich ja Definitionen für diesen Bereich im CSS geschrieben.

Ich hoffe ich konnte mein Problem einigermaßen verständlich rüberbringen.

Vielen Dank für Eure Mühe und sonnige Grüße

Andi

[Matthias Apsel]

Om nah hoo pez nyeetz, Andi!

was sagen denn solche Tools wie firebug oder dragonfly?

Matthias

[Andi]

Om nah hoo pez nyeetz, Andi!

was sagen denn solche Tools wie firebug oder dragonfly?

Matthias

Hi Matthias!

Was meinst Du mit "was die sagen"?
Ich bin halt mit Firebug die Liste in der Navi durchgegangen.
Dann werden ja immer die verschiedenen Elemente der Liste hervorgehoben.Meine CSS-Anweisungen scheinen soweit zu stimmen. Daher bin ich ja so ratlos.

Oder kann ich mich mit Firebug noch anders auf die Fehlersuche begeben? Bin für jeden Tipp dankbar.

Grüße

Andi

[ChrisB]

Hi,

Ich bin halt mit Firebug die Liste in der Navi durchgegangen.
Dann werden ja immer die verschiedenen Elemente der Liste hervorgehoben.Meine CSS-Anweisungen scheinen soweit zu stimmen. Daher bin ich ja so ratlos.

Oder kann ich mich mit Firebug noch anders auf die Fehlersuche begeben?

Firebug kann dir alle Regeln anzeigen, die auf ein Element zutreffen.
Insbesondere zeigt er dir auch an, welchen Eigenschaften aus einer Regel von der Angabe der gleichen Eigenschaft in einer anderen Regel mit höherer Spezifität überschrieben werden (erstere erscheinen „durchgestrichen“).

.subnavi ul li.active a

Dieser Selektor hat die Spezifität 0,0,2,3.

.subnavi ul li ul li a

Dieser Selektor hat die Spezifität 0,0,1,5.

Und der Gewinner ist damit – natürlich der erstere.

MfG ChrisB

[Andi]

.subnavi ul li.active a

Dieser Selektor hat die Spezifität 0,0,2,3.

.subnavi ul li ul li a

Dieser Selektor hat die Spezifität 0,0,1,5.

Und der Gewinner ist damit – natürlich der erstere.

MfG ChrisB

Hi ChrisB,

wow, vielen Dank für die Info. Davon hab ich ehrlicherweise noch nie was gehört. Hab eben gesehen, davon gibts auch einige Infos in Selfhtml. Was ich da nicht gefunden habe: Was mache ich jetzt? Ich möchte ja gern, die aktive Subebene 1 und die aktive Subebene 2 stylen. Aber um die Ebene 2 anzusprechen müsste

.subnavi ul li ul li a

ja funktionieren.

Vielen Dank nochmals für Deine Mühe und viele Grüße

Andi

[Matthias Apsel]

Om nah hoo pez nyeetz, Andi!

.subnavi ul li ul li a

Du könntest eine vorhandene Klasse nutzen oder eine neue vergeben.

.subnavi ul li ul.classname li a

Wenn ein Elternelement (z.B. der Body) eine Klasse hat:

.classname .subnavi ul li ul li a

Du könntest

!important verwenden

Variante 2 ist wohl die beste dabei.

für aktuelle Browser könntest du die Pseudoklasse :not verwenden.

Das Wiki ist eine gute Anlaufstelle: Selektoren, Kaskade

Matthias

[Andi]

Du könntest

!important verwenden

Variante 2 ist wohl die beste dabei.

Hallo Matthias, hallo ChrisB,

nochmals vielen Dank für Eure Mühe!
Mit !importanthat es geklappt! Genial.
Ich hoffe ich darf noch eine Frage nachschieben.
Alle Subnavipunkte haben einen kleinen Doppelpfeil als Grafik im Background. Wenn nun die erste Subnavi-Ebene aktiv ist also:

.subnavi ul li.active a

und in der zweiten Subnavi-Ebene ebenfalls etwas angeklickt wird, also

.subnavi ul li ul li.active a

Dann wäre es super, wenn sich der Doppelpfeil in der ersten Subnavi-Ebene zu einem Pfeil nach unten ändern würde.

Das heißt ich müsste .subnavi ul li.active a unter der Bedingung ändern dass .subnavi ul li ul li.active a auch greift.

Ich habe mir dazu heute Selektoren wie > und + angesehen. Aber das scheint nicht das Richtige zu sein.

Danke und viele Grüße

Andi

[ottogal]

Schau dir dazu den Wayfinder-Parameter &hereClass an.
Weiteres dann eher im MODx-Forum: http://www.modxcms.de/forum/

[Matthias Apsel]

Om nah hoo pez nyeetz, Andi!

Mit !importanthat es geklappt! Genial.

!important ist immer nur eine Notlösung !important

Das heißt ich müsste .subnavi ul li.active a unter der Bedingung ändern dass .subnavi ul li ul li.active a auch greift.

Das wäre ein Rückwärtsselektieren, was imho mit reinem CSS nicht möglich ist.

Dann wäre es super, wenn sich der Doppelpfeil in der ersten Subnavi-Ebene zu einem Pfeil nach unten ändern würde.

Dafür bieten sich sprites an.

Matthias

[ChrisB]

Hi,

.subnavi ul li.active a

Dieser Selektor hat die Spezifität 0,0,2,3.

.subnavi ul li ul li a

Dieser Selektor hat die Spezifität 0,0,1,5.

Und der Gewinner ist damit – natürlich der erstere.

wow, vielen Dank für die Info. Davon hab ich ehrlicherweise noch nie was gehört. Hab eben gesehen, davon gibts auch einige Infos in Selfhtml. Was ich da nicht gefunden habe: Was mache ich jetzt?

Na ganz einfach: Du erhöhst die Spezifität deines zweiten Selektors.

Die „Erwähnung“ der Klasse active im ersten Selektor sorgt dafür, dass dieser höhere Spezifität hat. Also nehme diese Klasse auch in deinen zweiten Selektor auf.

MfG ChrisB