Hintergrundbild wird nicht angezeigt

[Steffen]

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:

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

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

  
#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

[lars]

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

Lass die aktuell angezeigte Seite in Menü unverlinkt. Sollte man so oder so machen. Danach nimmst Du das 'strong' im 2. CSS schnipsel raus.

[Steffen]

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

Lass die aktuell angezeigte Seite in Menü unverlinkt. Sollte man so oder so machen. Danach nimmst Du das 'strong' im 2. CSS schnipsel raus.

Das ist wohl keine schlechte Idee.
Leider hilft mir das aber bei meinem Problem nicht.
Trotzdem Danke!
Steffen

[ChrisB]

Hi,

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

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

  

> ~~~css
  

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

Woraus schliesst du das?
Selbst wenn da eins ist, kannst du es doch gar nicht sehen - es liegt ja ein Link davor, der selber wieder ein Hintergrundbild hat. (Sofern letzteres keine Transparenzen hat.)

Interessanterweise funktioniert auch das hier nicht:

#tabnav ul li strong {
background-color:red;
}

#tabnav ul li strong a {
background:transparent url(img/links3.gif) no-repeat left bottom;
color: #033;

  
transparent plus Hintergrundbild ist immer noch eine „Farbkombination”, die darunter liegendes verdeckt.  
  

> Ich hoffe sehr ihr könnt mir helfen, bin schon am Verzweifeln.  
  
Wenn zwei Elemente auf Grund bestehender Formatierung ein Hintergrundbild haben, und davon aber nur das hintere überhaupt zu sehen sein soll - dann gestalte den Hintergrund des inneren Elements \*im\* äusseren komplett durchsichtig.  
  
MfG ChrisB  
  

-- 
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]

[Steffen]

Woraus schliesst du das?
Selbst wenn da eins ist, kannst du es doch gar nicht sehen - es liegt ja ein Link davor, der selber wieder ein Hintergrundbild hat. (Sofern letzteres keine Transparenzen hat.)

»»
Das hab ich nicht richtig erklärt, sorry. Wie du im CSS siehst ist das eine Hintergrundbild rechts ausgerichtet, das andere links. Außerdem ist die Option no-repeat angegeben. Da das Hintergrundbild des Links nicht die komplette Breite einnimmt, sollte dann am rechten Rand das andere Hintergrundbild durchscheinen. Hier mal ein Screenshot:
http://i.imagehost.org/view/0755/problem

Hoffe das ist jetzt verständlicher.

Gruß
Steffen

[ChrisB]

Hi,

Wie du im CSS siehst ist das eine Hintergrundbild rechts ausgerichtet, das andere links. Außerdem ist die Option no-repeat angegeben. Da das Hintergrundbild des Links nicht die komplette Breite einnimmt, sollte dann am rechten Rand das andere Hintergrundbild durchscheinen.

OK, aber das müsste man schon live in Augenschein nehmen können, um zu sehen wo der Fehler liegen könnte - da reicht ein Screeenshot nicht aus.

MfG ChrisB

[Patrick Andrieu]

Hallo Steffen!

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

<strong> umschließt <a> vollständig, ohne jeglichen Abstand. Da kann ja von der Hintergrundgrafik von <strong> deswegen nichts durchschimmern, die von <a> überdekct ja alles.

Gibt <strong> ein Minimum an padding (left).

Schau Dir mal einen Nachbau von mir (zwar mit <span>, ansonsten ähnlich):

http://www.atomic-eggs.com/z_testdir/html/sd.html

Viele Grüße aus Frankfurt/Main,
Patrick