XHTMLforum - Hintergrundbild wird nicht angezeigt

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Hintergrundbild wird nicht angezeigt (http://xhtmlforum.de/showthread.php?t=59457)

Hintergrundbild wird nicht angezeigt

Hi!
Ich bin gerade dabei, eine "Sliding-Door-Navigation" zu erstellen, so ähnlich wie das hier gezeigt ist: A List Apart: Articles: Sliding Doors of CSS
Dafür ist es nötig, dass man in zwei verschiedenen verschachtelten html-Elementen jeweils Hintergrundgrafiken angibt, die sich dann überlappen. Hier erstmal das Markup:

HTML-Code:

<div id="tabnav">

        <ul>

          <li><strong><a href="nav_steffen.html">Schulleben</a></strong></li>

          <li><a href="design.html">Button 2</a></li>

          <li><a href="#">Button 3</a></li>

          <li><a href="#" class="oneColElsCtr">Button 4</a></li>

          <li><a href="#">Button 5</a></li>

        </ul>

</div>

Das <strong>-Tag umschließt den momentan besuchten Link.

Hier ist ein Auszug aus dem dazugehöriger CSS-Code:

Code:

#tabnav ul li strong {

        background:transparent url(img/rechts3.gif) no-repeat right bottom;

}



#tabnav ul li strong a {

        background:transparent url(img/links3.gif) no-repeat left bottom;

        color: #033;

Wie man sieht haben die Elemente <strong> und <a> jeweils ihre eigenen Hintergrundbilder.
Mein Problem ist nun, dass das Hintergrundbild von <strong> nicht angezeigt wird.
Eine falsche URL ist ausgeschlossen, das habe ich genaustens überprüft.
Erst habe ich gedacht, <strong> könnte man evtl. kein Hintergrundbild zuweisen, aber mit <div id="strong"> hats auch nicht geklappt.
Die CSS-Angabe kommt auch definitiv beim Browser an, das habe ich mit Developer-Tools sichergestellt.

Interessanterweise funktioniert auch das hier nicht:

HTML-Code:

#tabnav ul li strong {

        background-color:red;

}



#tabnav ul li strong a {

        background:transparent url(img/links3.gif) no-repeat left bottom;

        color: #033;

Ich hoffe sehr ihr könnt mir helfen, bin schon am Verzweifeln.
Vielen Dank schon mal!!!

Zitat:

bin schon am Verzweifeln.

Zweifle nicht, stell das Online und poste einen Link. So blickt kein Mensch durch.

Hier ist erstmal ein Screenshot...hoffe das hilft weiter:
http://i.imagehost.org/0755/problem.jpg

Hübsch. Dein Problem ist aber doch der Code ?

Ich dachte ich hätte alle wichtigen Code-Ausschnitte gepostet.
Was soll ich denn noch posten? Vom Markup her denke ich mal ist alles klar....oder?
Also poste ich mal noch mehr CSS....

Code:

strong { font-weight:normal; }



#tabnav {

        float:left;

  width:100%;

        background-color:yellow;

  font-size:93%;

  line-height:normal;

}



#tabnav ul {

  margin:0;

  padding:0;

  list-style:none;

}



#tabnav ul li {

  float:left;

  padding:0;

        width:165px;

        background-color:transparent;

    }

                

#tabnav ul li:hover {

        font-weight:bold;

        color:green;

        

}



#tabnav a {

    display:block;

    padding:6px 10px;

                height: 23px;

                text-decoration:none; color:#999;

                font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

                background:transparent url(img/repeat.gif) bottom repeat-x;

    }

                

#tabnav ul li strong  {

        background:transparent url(img/rechts3.gif) no-repeat right bottom;

}



#tabnav ul li strong a {

        background:transparent url(img/links3.gif) no-repeat left bottom;

        color: #033;

Wenn ich noch was posten soll sag einfach bescheid. Danke fürs Bemühen;)

Die Probleme kann man so gut wie nie aus Schnippseln erkennen. Es hängt halt
alles zusammen. Schau doch mal, ob Du das Online stelen kannst.

Zitat:

Zitat von hallo2008 (Beitrag 452671)

Ich dachte ich hätte alle wichtigen Code-Ausschnitte gepostet.
Was soll ich denn noch posten? Vom Markup her denke ich mal ist alles klar....oder?

ein Link ist immer am Besten.

Fürs Zusammenbauen hat hier kaum jemand Zeit.

Wozu brauchst du 2 Grafiken?
Eine für alles reicht aus. Das nennt sich CSS-Sprites. ;)