show menü - aktuelle Seite in anderer Hintergrundfarbe

[surf-andrea]

hi folks,

ich möchte gerne in einem Menü showmenu2 für die aktuelle Seite eine andere Hintergrundfarbe. Und zwar soll es eine Seite der Ebene 2 sein.

Beispiel:

- home
  - 1
  - 2
  - 3

Meine showmenu2 sieht so aus:
<?php show_menu2(0, SM2_ROOT+1, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, '<ul id="header_menu" class="menu">'); ?>

mein css teil so: .nav2 ul li.menu-current {background-color:#FFFFFF;}

Wenn ich auf der home Seite bin, ist die mit weissem Hintergrund zu sehen. Wenn ich aber auf eine Unterseite von Home, z.B. 1 oder 2 gehe, bleiben die in der alten HIntergrundfarbe.

Was mache ich falsch?

Danke.
Andi.

[Ruud]

mein css teil so: .nav2 ul li.menu-current {background-color:#FFFFFF;}

Just try

Code:

.nav2 ul li.menu-current a {background-color:#FFFFFF;}

(note the a after menu-current)

Ruud

[Ruud]

Sorry, was trying to answer too fast here.. 

After reading your question again, I think you need this line added to your css:

.nav2 ul li.menu-parent a {background-color:#FFFFFF;}

This will make your home button stay white as long as you are in the sub-pages of home.

Ruud

[surf-andrea]

das funktioniert leider nicht.

Nach hinzufügen von ist zwar der Home button gleich, aber die aktive Unterseite wird nicht als weisser Hintergrund dargestellt.

danke
Andi.

[Stefek]

Du musst in den Quellcode der Seite schauen. (Empfehle Dir die FireFox Extension Firebug dazu.)

Und dann schaust Du in der Gegend Deiner Ungeordneten Liste und den Listen Items.

Da gibts nämlich irgendwo sowas:
<ul id="header_menu" class="menu">
  <li>blabla
   <ul>bladubla

schau in dieser Gegend UND dort gibt es bei den verschiedenen LI's auch Klassen (menu-parent, menu-current etc.).

Erschließe Dir auf diese Art die nötigen CSS-Selektoren dafür.

Hier ein kleines Bild, das Dir helfen könnte:


Übrigens, ein guter crash-kurs für CSS (leider nur auf Holländisch) ist hier zu finden:
http://www.webontwikkelaar.nl/css/cursus/

LG,
Stefek

[surf-andrea]

vielen Dank Stepek,

im Quelltext habe ich nachgeschaut. Da ist der wichtige Teil:

<li class="menu-current">

Nur damit funxt es einfach nicht. Ich sehe immer nur parent weiss, wenn ich als CSS Zeile einfüge:

nav2 ul li.menu-current {background-color:#FFFFFF;}

Ich habe es dann mit child probiert, aber das scheint es irgendwo nicht zu geben...

OJE!

Vielen Dank auf jeden Fall für deine Hilfe.
Andi.

[vyni]

Servus Andi,

eine Frage von einem, der so gar nix versteht: Soll die ganze Seite einen weißen Hintergrund erhalten oder soll das Menü den weißen Hintergrund haben?

Wenn 2teres, dann wäre es hilfreich, wenn Du einen Link zur Seite bereitstellst, denn dann könnte man mit dem von Stefek erwähnten Firebug kurz draufschauen, und Dir ganz genau sagen was Du machen sollst.

Gruss aus Himberg, immernoch bei Wien


Edit: gut, das scheint meine erste Frage zu beantworten. Dann probier´ als Alternative (falls id="nav2")

#nav2 ul li menu-current {back.....} oder einfach
li menu-current {back.....} und manchmal hilft auch einfach nur menu-current {back......}

[vyni]

Ich hab´ das jetzt einmal mit einem template nachgespielt:

Meine Vermutung: Du hast irgendwo im css einen Eintrag ähnlich

.menu a:link, .menu a:visited, .menu a:active {
    color: #FFFFFF;
    display: block;
    background-color: #003366;
    text-decoration: none;
}

das setzt alles andere außer Kraft, weil zutreffend.

Reduziere das auf das allernotwendigste - z.B: text-decoration und display

LG aus Himberg

[surf-andrea]

so sehen die css Teile aus.

/*Drop-down menu*/

.nav2 {position:absolute; width:770px;margin-left:28%;margin-top:99px; border:none; font-size:12pt;font-weight:bold;} /*Color navigation bar normal mode*/
.nav2 ul {list-style-type:none;}
.nav2 ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/;width:180px;}
.nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:2.1em; line-height:2.1em; padding:0 12px 0 16px; text-decoration:none; font-weight:bold; color: #6f7488;}
..nav2 ul li ul {display:none; border:none;} /*XXXXXXXXXXXXXXXXXXX*/

/*Non-IE6 hovering*/
.nav2 ul li.menu-current a {background-color:#FF0000;} /*HIER IST DAS MENÜ CURRENT*/
.nav2 ul li:hover {position:relative;} /*Sylvain IE hack*/
.nav2 ul li:hover a {background-color:#eff0f0; text-decoration:none; font-weight:bold; color: #6f7488;} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.0em; margin-top:0.1em; left:0;}
.nav2 ul li:hover ul li a {white-space:normal; display:block; width:10.0em;  height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px;  background-color:#eff0f0; font-weight:bold; color:#6f7488;} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:#FFFFFF;border:2px solid #EFF0F0; height:19px; width:9.9em; margin-left:-3px; margin-top:-2px; text-decoration:none;} /*Color subcells hovering mode*/



Wenn ich die Zeile mit /*HIER IST DAS MENÜ CURRENT*/ einfüge dann klappt es zwar, dass ich den aktuellen Link rot sehe. ABER wenn ich diese Zeile wieder einblende
..nav2 ul li ul {display:none; border:none;} /*XXXXXXXXXXXXXXXXXXX*/
indem ich einen Punkt wegmache, dann geht es nicht mehr.

Puhh, leider brauche ich aber {display:none; border:none;}, Sonst sehe ich die Menüs die eigentlich beim Drüberfahren aufklappen sollen immer.

Hmmm
Danke.
Andi.

[vyni]

Hast jetzt dazu einen Link oder nicht?

So tu ich mir echt schwer irgendwas als falsch oder richtig zu erkennen.

Wenn nicht, dann schick´ mir ein zip von Deinem Template - vielleicht finde ich dann was.


LG aus Himberg