✔ CSS-Menü aktive Zustände greifen nicht

[zweilicht]

Hi,

ich bin in Sachen CSS-ul-li-Menüs leider wohl einfach zu doof ;-) Und brauche Hilfe!

Ich bekomme in dem Menü auf

http://www.christliche-onlineberatung.de/index.php?article_id=17

einfach die aktiven Zustände nicht hin: eigentlich sollten die jeweils aktiven Menüpunkte den die over-Hintergrundfarbe beibehalten und evtl. noch gefettet werden. Es gibt dafür auch eine ID (current) für die erste Ebene und eine Klasse (active) für die zweite Ebene.

Nur will weder die ID noch die Klasse greifen!? Hier mal der CSS-Code für die Navigation (bitte um Verständnis, die aktiven Stati habe ich deaktiviert, weil sie wenn ja, dann falsch greifen und ALLE Schrift fetten - aber nichts an den Hintergründen ändern).

Ich bitte Euch um ein paar Tipps, welche IDs oder Klassen ich hier falsch bezogen habe - irgendwo überschreibe ich die Möglichkeit, aktive Zustände zu definieren!?

DANKE

/*box um den content*/
#col1_content ul {width: 225px; margin: 0; padding: 0px;}

/*allgemein erste ebene*/
  #col1_content ul li {
    list-style: none;
    margin: 0; padding: 0;
  }

/*allgemein zweite ebene inhalt*/
  #col1_content ul li ul li {
    margin: 0; padding: 0;
  }

/*inhalt zelle erste ebene*/
  #col1_content ul li a {
    display:block;
    padding: 3px 20px 3px 10px;
    text-decoration: none; font-size: 12px; font-weight: regular;
    border: solid #ffffff;
    border-width: 0 0 1px 0;
    color: #ffffff; background-color: #0776DF;
  }

/*inhalt zelle zweite ebene*/
 #col1_content ul li ul li a {
    display:block;
    padding: 3px 20px 3px 10px;
    text-decoration: none; font-size: 12px; font-weight: regular;
    border: solid #ffffff;
    border-width: 0 0 1px 0;
    color: #ffffff; background-color: #DF6F07;
  }

/*over inhalt erste ebene*/
#col1_content ul li a:focus,
#col1_content ul li a:active,
#col1_content ul li a:hover {background-color: #2A95F8;}

/*over inhalt zweite ebene*/
#col1_content ul li ul li a:focus,
#col1_content ul li ul li a:active,
#col1_content ul li ul li a:hover {background-color: #F88E2A;}

/*05.12.08 Navigation - aktive Auswahl

li#current {font-weight:bold; background-color: #2A95F8;}
li#active {font-weight:bold; background-color: #F88E2A;}
  
05.12.08 Navigation - aktive Auswahl Ende*/

 

[Maik]

Hi,

solange sich im Stylesheet die beiden entsprechenden Regelblöcke innerhalb eines Kommentars befinden, werden sie vom Browser auch nur als Kommentar-Bereich interpretiert, und greifen daher nicht in die CSS-Formatierung der Elemente ein.

/*05.12.08 Navigation - aktive Auswahl*/  /* Kommentarende fehlt */

li#current  {font-weight:bold; background-color: #2A95F8;}
li#active  {font-weight:bold; background-color: #F88E2A;}

/* Kommentaranfang fehlt */ /*05.12.08 Navigation - aktive Auswahl Ende*/

Da du zuvor die Hintergrundfarbe der "Menüpunkte" über das a-Element regelst, solltest du dies auch hier so machen, damit die Formatierung reibungslos funktioniert, ansonsten überdeckt nämlich weiterhin der Hintergrund des eingebetteten Links den Hintergrund des Listenpunkts li.

li#current a  {font-weight:bold; background-color: #2A95F8;}
li#current li#active a  {font-weight:bold; background-color: #F88E2A;}

mfg Maik

 

[zweilicht]

Hallo und erstmal danke!

Die letzten zwei Styles habe ich auskommentiert, weil sie zwar die Lösung darstellen müssten, aber nicht gegriffen haben!

Der li#current etwa hat zwar die Schrift des aktiven Elements der ersten Ebene gefettet, aber auch die Schrift aller Elemente auf der zweiten Ebene (eigentlich li#active). Das sollte ja nicht so sein. Schlimmer noch: an den Hintergründen hat sich GAR NICHTS verändert ... *heul*

Mit "a" hatte ich es auch schon probiert und es ist nichts neues passiert!? Ich schau natürlich noch mal.

Aber das Problem IST quasi genau das: die beiden Styles im Kommentar sehen aus wie Lösung, aber sie greifen eben nicht!?

Hmmm ...

 

[Maik]

Moin,

mein zweiter Lösungsvorschlag, die Formatierung auf das a-Element anzuwenden, greift bei mir einwandfrei.

Denn wie ich gestern schon darauf hingewiesen hatte, ändert sich mit deinen beiden Regeln nichts an der Hintergrundfarbe der aktiven Menüpunkte, da du in den Selektoren zuvor (#col1_content ul li a, #col1_content ul li ul li a, usw.) die Hintergrundfarbe für die Links (<a>) definierst, und diese somit den Hintergrund des (aktiven) li-Elements überlagern, und er in diesem Fall nicht zum Vorschein kommt.

Ansonsten erhöh mal in deinem Stylesheet entsprechend der zuvor genannten Selektoren die Spezifität dieser beiden Selektoren, und was das Schriftgewicht font-weight betrifft, müsstest du der unerwünschten Vererbung an die "Sublinks" mit einem entsprechenden Selektor entgegenwirken:

#col1_content ul li#current a {font-weight:bold; background-color: #2A95F8;}
#col1_content ul li#current li a {font-weight:normal; background-color: #F88E2A;}
#col1_content ul li#current li#active a {font-weight:bold; background-color: #F88E2A;}

mfg Maik

 

[zweilicht]

DANKE

Großartig und funktioniert ...

Mein Fehler war die falsche Bezeichnung:

... ul li ul li ... statt ... ul li#current li ...

... ich beginne zu verstehen ;-)