Hintergrundbild wird nicht angezeigt

[SmolkaJ]

Hi!
Ich bin gerade dabei, eine "Sliding-Door-Navigation" zu erstellen, so ähnlich wie das hier gezeigt ist: http://www.alistapart.com/articles/slidingdoors/
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:

Code: Alles auswählen

<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: Alles auswählen

#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:

Code: Alles auswählen

#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!!!
Steffen

[Supertramp]

Mein Problem ist nun, dass das Hintergrundbild von <strong> nicht angezeigt wird.

Hallo SmolkaJ.

Hast du html, css und Bilddatenen alle im gleichen Verzeichnis oder hast du Unterordner angelegt? Mal angenommen du hast index.html in einem beliebigen Ordner und darin zwei Unterordner CSS (für die CSS-Dateien) und IMG (für die Bilder), dann müsstest du, um vom CSS Ordner aus auf die Bilder zugreifen zu können, zuerst einen Ordner "hoch" und dann in den richtigen Unterordner, d.h. in deinem CSS müsstest du schreiben (beachte das "../"):

Code: Alles auswählen

#tabnav ul li strong {
        background:transparent url(../img/rechts3.gif) no-repeat right bottom;
}


Gruss,
Supertramp

[sejuma]

Weise strong mal noch ein display: block; sowie einen width- und height-Wert entsprechend der Grafik zu.
Ansonsten oste mal einen Link zu deiner Problemseite.