Frage zu CSS-Navi

[bp158]

Hi,

ich hoffe Ihr könnt mir bei meinem kleinen Problem helfen bzw. mir ein wenig die Tomaten vor den Augen entfernen ;)

Also ich habe ein CSS Navi was soweit auch funktioniert, nur möchte ich jetzt einen Navi-Punkt daraus separieren.

hier mein stylesheet:

#navigation {
                /* background: #DDD; */
                border-bottom: 1px solid #A1A1A1;
                margin: 0px;
                /* margin: 1em 0 0; */
                padding: 0px;
                /* padding: 0.6em 0 0; */
                font-weight: bold;
                        }
                        
#navigation ul, #navigation ul li {
                list-style: none;
                margin: 0;
                padding: 0;
                        }
                        
#navigation ul {
                padding: 5px 0 5px;
                text-align: center;
                        }
                        
#navigation ul li {
                display: inline;
                        }

#navigation ul li a {
                background: url(../images/tableft03.gif) no-repeat left top;
                color: #FFF;
                text-decoration: none;
                padding: 5px 0;
                        }

#navigation ul li span {
                background: url(../images/tabright03.gif) no-repeat right top;
                padding: 5px 7px 5px 3px;
                margin: 4px 0 4px 4px;
                        }

#navigation ul li a:hover span {
                text-decoration: underline;
                background-position: 100% -75px;
                        }

#navigation ul li a:hover {
                background-position: 0 -75px;
                        }

#navigation #current a {
                background-position: 0 -150px;
                        }

#navigation #current a span {
                background-position: 100% -150px;
                        }

/*- Internet Explorer...It's Hacktastic!--------------------------- */

/*\*//*/
#navigation ul li a {
                display: inline-block;
                white-space: nowrap;
                width: 1px;
                        }

#navigation ul {
                padding-bottom: 0;
                margin-bottom: -1px;
                        }
/**/

/*\*/
* html #navigation ul li a {
                padding: 0;
                        }
/**/

und hier das Navi selbst

  <div id="navigation">
   <ul>
    <li id="current"><a href="home.php"><span>Home</span></a></li>
    <li><a href="unternehmen.php"><span>Unternehmen</span></a></li>
    <li><a href="produkte.php"><span>Produkte</span></a></li>
    <li><a href="download.php"><span>Downloads</span></a></li>
    <li><a href="service.php"><span>Service</span></a></li>
    <li><a href="kontakt.php"><span>Kontakt</span></a></li>
    <li><a href="impressum.php"><span>Impressum</span></a></li>
    <li><a href="login.php"><span>zum Login</span></a></li>
   </ul>
  </div>

Es ist so, das die Reiter im normalzustand grau sind, wenn ich drüber gehe werden sie blau und wenn sie aktiv sind (id="current") dann rot.
Nun möchte ich aber, das der Loginreiter generell rot ist (im ausgeloggten Zustand) bzw. grün (im eingeloggten Zustand). Ich habe dazu schon mit Inline-CSS probiert, aber da war dann gleich garkein hintergrund mehr da :(

Der Inline-CSS-versuch sah so aus:

<li><a href="login.php" style="background: url(../images/tableft03.gif) no-repeat left top; color: #FFF; text-decoration: none; padding: 5px 0; background-position: 100% -225px;"><span style="background: url(../images/tabright03.gif) no-repeat right top; background-position: 100% -225px;">zum Login</span></a></li>

Schonmal danke für die Hilfe.

BP

 

[prm]

Definiere mal eine Klasse rot:

.rot {Styleangaben}

Dann Aufruf mit

<a class="rot" href=...

Wozu dient <span> ? Da der einheitlich vorkommt, kannst du diesbezügliche Angaben doch gleich a zuweisen.

 

[bp158]

Hi,

das <span> dient dem hintergrundbild, da es aus zwei bildern zusammengesetzt wird (tableft & tabright), jenachdem wie lang das Wort ist, was im <span> steht ...

Sollte Inline-CSS nicht priorisierter als die CSS-Vorgaben aus dem Stylesheet sein ??

Das mit der Klasse .rot hatte kein Erfolg :(

BP

 

[prm]

Versuch's mal damit:

#navigation a.rot:link {color: #f00;}
#navigation a.rot:visited {color: #f00;}
#navigation a.rot:hover {color: #f00;}

 

[bp158]

Hi,

leider auch keine Erfolg :((

BP

 

[prm]

Hab's getestet. Bei mir klappt es.
Hast du das auch außerhalb der IE-Hacks stehen?
Gibt es einen Link zur Seite?