background-image via externem Stylesheet nicht angezeigt

[12oclock]

Hallo ihr,

ich seh grad den Wald vor lauter Baeumen nicht mehr, vielleicht koennt ihr mir helfen ...

Fuer ein Projekt moechte ich hinter links (<a>) Hintergrundbilder anzeigen.

HTML:

  
<div>  
  <div>  
    <a href="suche.php-html" id="sl"></a>  
  </div>  
  .  
  .  
  .  

CSS:

  
a {  
  float:left;  
  color: #ff9900;  
  width: 128px;  
  height: 57px; 	  
  border: 0 none;  
}  
#sl a:link {  
  float:left;  
  background-image: url(absolute/url/zum/bild); 	  
  background-repeat: no-repeat;  
  width: 128px;  
  height: 57px; 	  
  border: none;  
}  
#sl a:hover {  
  background-image: url(absolute/url/zum/bild);  
  background-repeat: no-repeat;  
  width: 128px;  
  height: 57px;  
  border: none;  
  float:left;  
}  
  .  
  .  
  .  

Firebug zeigt mir, dass der Bild-Pfad korrekt ist und mit genau dem gleichen CSS nur inline (im HTML) funktioniert's auch. In einer externen CSS Datei dagegen nicht -- bin kurz vorm Verzweifeln :-(

CSS Datei wird wohl auch korrekt eingebunden, da Font-Spezifikationen uebernommen werden ...

Habt ihr eine Idee?!

Gruss

[ChrisB]

Hi,

Firebug zeigt mir, dass der Bild-Pfad korrekt ist

Wie hast du das überprüft?

CSS Datei wird wohl auch korrekt eingebunden

Ist sie selber auch korrekt? (CSS validiert?)

Habt ihr eine Idee?!

Liefere uns bitte ausreichend Informationen, die das Problem nachvollziehbar machen. </hilfe/charta.htm#tipps-fuer-fragende>

MfG ChrisB

[12oclock]

Hi :-)

Hi,

Firebug zeigt mir, dass der Bild-Pfad korrekt ist

Wie hast du das überprüft?

... wenn ich in Firebug's CSS-Tab mit der Maus den Pfad ueberfliege, wird mir das Bild angezeigt. Ausserdem kann ich das Bild ueber den Pfad direkt in der Adresszeile eines Browsers aufrufen ...

CSS Datei wird wohl auch korrekt eingebunden

Ist sie selber auch korrekt? (CSS validiert?)

Ja, das CSS wurde korrekt validiert.

Habt ihr eine Idee?!

Liefere uns bitte ausreichend Informationen, die das Problem nachvollziehbar machen. </hilfe/charta.htm#tipps-fuer-fragende>

Die Seite kann man hier anschauen

MfG ChrisB

Gruss + Danke

[gast42]

Die Seite kann man hier anschauen

wieso sollten inhaltsleere Links dargestellt werden?

[12oclock]

Hmm ...

wieso sollten inhaltsleere Links dargestellt werden?

Die Links sind jetzt nicht mehr "inhaltsleer" und werden trotzdem nicht Hintergrund-bebildert.

Des weiteren sind sie nun auch Block-Elemente ...

Funktioniert aber immer noch nicht :-/

Gruss

P.S.: das initiale CSS hat - wie im Anfangspost bemerkt - uebrigens inline funktioniert, weiss jemand, wieso das so ist?! oO

[12oclock]

... sieht auch so aus, als ob er die link-styles (z.B. #sl a:link) garnicht anwendet :-?

[Der Martin]

Hi,

... sieht auch so aus, als ob er die link-styles (z.B. #sl a:link) garnicht anwendet :-?

haben deine Links denn ein Vorfahrenelement mit der ID "sl"?
In deinem Codeausschnitt ist jedenfalls keins.

Ciao,
 Martin

[120clock]

Hi,

... sieht auch so aus, als ob er die link-styles (z.B. #sl a:link) garnicht anwendet :-?

haben deine Links denn ein Vorfahrenelement mit der ID "sl"?
In deinem Codeausschnitt ist jedenfalls keins.

... oh Mann ^^ das war's.

Ich habe einfach die falschen Selektoren verwendet.

Statt:

  
#sl a:link { ...  

... muss es natuerlich:

  
a:link#sl { ...  

... heissen!

Danke Dir Martin!
(... und allen anderen _helfenden_ auch!)

[Gunnar Bittersmann]

@@120clock:

nuqneH

... muss es natuerlich:
a:link#sl { ...
... heissen!

Nein, muss es nicht. Nicht, dass du dich bald wunderst, dass schon wieder kein Hintergrundbild angezeigt wird: die Pseudoklasse :link macht ihrem Namen keine Ehre.

Qapla'

[120clock]

@@120clock:

nuqneH

... muss es natuerlich:
a:link#sl { ...
... heissen!

Nein, muss es nicht. Nicht, dass du dich bald wunderst, dass schon wieder kein Hintergrundbild angezeigt wird: die Pseudoklasse :link macht ihrem Namen keine Ehre.

... du sprichst in Raetseln, mein klingonischer Freund ^^

Falls Du aber meintest, dass nach einem Klick kein Bild mehr da ist, kann ich Dich beruhigen, dafuer ist gesorgt:

HTML (mit "unsichtbaren" Link-Titeln)

  
<div>  
  <div>  
    <a href="suche.php-html" id="sl">  
      <span class="not_visible">Suche</span>  
    </a>  
  </div>  
  .  
  .  
  .  

CSS

  
.not_visible {  
  display:none;  
}  
a:link#sl {  
  float:left;  
  background-image: url(absolute/path/to/image); 	  
  background-repeat: no-repeat;  
  width: 128px;  
  height: 57px; 	  
  border: none;  
  display:block;  
}  
a:hover#sl  {  
  background-image: url(absolute/path/to/image);  
}  
a:visited#sl  {  
  background-image: url(absolute/path/to/image);  
}  

Gruss

[Der Martin]

Hallo,

a:link#sl {

float:left;
  background-image: url(absolute/path/to/image);
  background-repeat: no-repeat;
  width: 128px;
  height: 57px;
  border: none;
  display:block;
}
a:hover#sl  {
  background-image: url(absolute/path/to/image);
}
a:visited#sl  {
  background-image: url(absolute/path/to/image);
}

  
ich glaube nicht, dass du das wirklich so haben möchtest. Jetzt gilt nämlich deine Positionierung, die Größenangabe und background-repeat explizit nur für noch nicht besuchte, nicht gehoverte Links.  
Wenn du die Angaben für \*alle\* Links machen willst, Lass die Pseudoklasse weg.  
  
Übrigens ist display:block in deinem Fall überflüssig; das float impliziert das schon automatisch.  
  
Ciao,  
 Martin  

-- 
Noch Fragen? - Ich weiß es auch nicht.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[Gunnar Bittersmann]

@@120clock:

nuqneH

... du sprichst in Raetseln, mein klingonischer Freund ^^

Das ist gewollt. Mit etwas Nachdenken sollte es aber zu lösen sein. Oder zu lösen gewesen sein, der Martin hat die Lösung ja schon verraten.

a:link#sl {
  background-image: url(absolute/path/to/image);
  [snip]
}
a:hover#sl  {
  background-image: url(absolute/path/to/image);
}
a:visited#sl  {
  background-image: url(absolute/path/to/image);
}

Du sprichst auch in Rätseln: Schreibst überall dasselbe Bild 'absolute/path/to/image' hin. Soll denn überall dasselbe Hintergrundbild verwendet werden?

Die richtige Antwort ist: ja! Allerdings vermisse ich Angaben zu background-position. Informiere dich über CSS-Sprites!

Qapla'

[Gunnar Bittersmann]

@@12oclock:

nuqneH

Die Seite kann man hier anschauen

Das Problem kommt mir bekannt vor.

Im Übrigen dürfte deine Image-Map im Footer kaum der Impressungspflicht (sofern du der unterliegst) genüge tun. Zumindest solltest du die mit @alt-Attributen für die 'area'-Elemente zugänglich machen. Besser aber, den Text als solchen (mit einzelnen Links) vorsehen, nicht als Grafik.

Sämttliche Angaben zur Darstellung solltest du im Stylesheet notieren, nicht inline in @style-Attributen.

Qapla'

[Gunnar Bittersmann]

@@12oclock:

nuqneH

background-image: url(absolute/url/zum/bild);

?? Wie genau sieht der Pfad aus?

Firebug zeigt mir, dass der Bild-Pfad korrekt ist

?? Das heißt, Firebug zeigt das Bild im Tooltip?

und mit genau dem gleichen CSS nur inline (im HTML) funktioniert's auch. In einer externen CSS Datei dagegen nicht

Du hast bedacht, dass ein relativer Pfad jetzt bezüglich des Stylesheets ist, nicht bezüglich des HTML-Dokuments?

Qapla'

[Max Smily]

<a href="suche.php-html" id="sl"></a>

»»  

> ~~~css
  

> #sl a:link {  
> ...  
> }  
> 

Wie Der Martin bereits feststellte: Es folgt dem Element mit der Id "sl" keine a-Tag, auf den die CSS-Definition wirken könnte.

Das a-Tag selbst hat ja die Id "sl".

Also heißt es so

  
a#sl:link {  
  ...  
}  

Viele Grüße
Max