Hintergrundbild wird nicht angezeigt

hallo2008 · #1 (**permalink**) 08.12.2009, 21:58

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

Scheppertreiber · #2 (**permalink**) 08.12.2009, 22:13

Zitat:

bin schon am Verzweifeln.

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

hallo2008 · #3 (**permalink**) 08.12.2009, 22:28

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

Scheppertreiber · #4 (**permalink**) 08.12.2009, 22:32

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

hallo2008 · #5 (**permalink**) 08.12.2009, 22:39

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

Scheppertreiber · #6 (**permalink**) 08.12.2009, 22:43

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.

hubspe · #7 (**permalink**) 09.12.2009, 07:48

Zitat:

Zitat von hallo2008

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.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
3x Divs nebeneinander = Hintergrundbild wird nicht angezeigt	JackCimberly	CSS	2	21.06.2011 23:26
Hintergrundbild wird nicht angezeigt	SteveB	(X)HTML	10	13.01.2011 20:41
CSS in HTML - Hintergrundbild wird nicht angezeigt	fossy	CSS	7	11.10.2007 17:17
Hintergrundbild wird im Firefox nicht angezeigt	Goalie2005	CSS	1	04.11.2005 13:55
Hintergrundbild über css wird nicht in mozilla angezeigt?	toby	CSS	2	15.08.2005 17:41