Probleme mit dem Aktivem Tab CSS

Hallo Leute!

Ich bin gerade dabei, mir mein eigenes Theme zu basteln, was auch eigentlich wunderbar klappt... Soweit... :neutral:

Nun bin ich auf ein kleines Problem gestossen, nämlich das CSS für den aktiven Tab, also wenn ich einen link in meinem Blog anklicke, das dieser dann die durch in meinem CSS definierten eigenschaften behält.

Das Prinzip is klar, in meiner Header.php gibt es folgende Codezeilen:

<ul id="menu">
  <li id="mst"></li>
  <li class="<?php if ( is_home() ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"> <a href="<?php echo get_settings('home'); ?>">
    <?php _e('Blog'); ?>
    </a> </li>


  <?php wp_list_pages('sort_column=menu_order&title_li=&depth=1&echo=1'); ?>
  <li id="tof"><a href="feed:<?php bloginfo('rss2_url'); ?>">RSS Feed</a></li>


</ul>

soweit klar.
Öffne ich nun meinen Blog, und klicke in dieser Navigation auf einen Link, dann sehe ich im Quelltext dieser Seite, das das angeklickte Object eine zusätzliche definition erhalten hat:

<ul id="menu">
  <li id="mst"></li>
  <li class="current_page_item"> <a href="http://localhost/wordpress">
    Blog    </a> </li>
  <li class="page_item page-item-3"><a href="http://localhost/wordpress/?page_id=1" title="Seite1">Seite 1</a></li>
<li class="page_item page-item-28"><a href="http://localhost/wordpress/?page_id=2" title="Seite 2">Seite 2</a></li>
<li class="page_item page-item-34"><a href="http://localhost/wordpress/?page_id=3" title="Seite 3">Seite 3</a></li>
  <li id="tof"><a href="feed:http://localhost/wordpress/?feed=rss2">RSS Feed</a></li>
</ul>

nämlich die Klasse: current_page_item

Jetzt dürfte es ja kein problem sein, diesem Aktiven Link ein bissl CSS unterzujubeln. Dacht ich mir... :?Ich habs mal mit folgendem CSS Versucht:

#menu ul li.current_page_item {
    background: url('images/nhbg.gif') repeat-x left top;
    color: #FFFFFF;
}

allerdings scheint dies nicht zu klappen. Das Bild für die Aktive Anzeige Benutze ich auch bei meinen Hovereffekten, dort funktioniert es wunderbar, allerdings als Aktive Darstellung gehts voll daneben, es tut sich garnichts.

Oder hab ich hier nur einen Denkfehler drinne? :confused:

Kann mir da jemand von euch weiterhelfen? Wäre echt dankbar! :cry:

Hey!
Danke für die schnelle Antwort!
Hab´s gleich mal ausprobiert, leider ebenfalls ohne Erfolg :-(

Ich verstehe nicht, warum es nicht ausrecht, einfach

.current_page_item {
    background: url('images/nhbg.gif') repeat-x left top;
    color: #FFFFFF;
}

in meine style.css zu schreiben. selbst das nimmt er nicht :-x

Hmm... Kann es vielleicht auch sein, das das CSS für mein LI zwar gesetzt wird, aber allerdings wieder von
#menu li a welches ich benutze um meine Links zu definieren überschrieben wird, weil a href NACH dem LI steht?

<li class="current_page_item"><a href="http://localhost/wordpress">Blog</a></li>

Das CSS sieht folgendermaßen aus:

<style type="text/css">
#menu {
    display: inline;
    background: url('images/bt.gif') repeat-x left top;
    padding: 0;
    outline: none;
    margin-top: 45px;
    margin-right: 20px;
    margin-bottom: 0;
    margin-left: 0;
    float: left;
    width: 100%;
}
#menu ul {
    list-style: none outside;
}
#menu li {
    display: inline;
    float: left;
    overflow: hidden;
    margin-top: 0;
    margin-right: 5px;
    margin-bottom: 0;
    margin-left: 0;
}
#menu li a {
    float: left;
    height: 40px;
    color: #FFF;
    font: normal 13px/40px verdana, helvetica, sans-serif;
    background: url('images/bt.gif') repeat-x left top;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 10px;
}
#menu li a:hover {
    background: url('images/bth.gif') repeat-x left top;
}
#menu #mst {
    height: 40px;
    width: 15px;
    background: url('images/btl.gif') no-repeat left top;
}
#menu #tof {
    margin-right: 0;
    background: url('images/btr.gif') no-repeat right top;
    float: right;
}
#menu #tof a {
    margin-left: 70px;
    padding: 0 10px 0 22px;
    background: url('images/feed.png') no-repeat left;
    font: normal 11px/40px verdana;
}
</style>

Mehr hab ich bis jetzt nicht drin, weil ich hier noch hänge...

Problem gelöst!

Habe meinen fehler gefunden!

Das CSS für die aktive hervorhebung habe ich in

#menu .current_page_item {
    background: url('images/nhbg.gif') repeat-x left top;
    color: #FFFFFF;
}

geändert.

Der eigentliche Fehler lag in der CSS für den Link, dort wurde der Hintergrund erneut definiert, also doppelt gemoppelt. Entferne ich nun den Hintergrund aus dieser CSS:

#menu li a {
    float: left;
    height: 40px;
    color: #FFF;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 10px;
    font-family: verdana, helvetica, sans-serif;
    font-size: 13px;
    line-height: 40px;
    text-decoration: none;
}

Dann klappt auch meine Navigation, da der Hintergrund vorher schon gesetzt war und dadurch meine aktive hervorhebung nochmal überschrieben hat :-D
Trotzdem vielen vielen Dank für Deine Hilfe Monika! :mrgreen:

Gruß, Daniel