login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Afbeelding als link gebruiken.

Offline rolandt - 26/12/2007 13:14
Avatar van rolandtNieuw lid
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="../testlink.html" class="news"><div id="news"></div></a>


php code - Bekijk de code zonder highlighting - Klap code in 
  1. div#news {
  2. 	width:190px;
  3. 	height:91px;
  4. 	}
  5.  
  6. a.news:link, a.news:visited  {
  7. 	background:url(../img/news.gif) no-repeat left;
  8. 	text-decoration:none;
  9. 	outline:none;
  10. 	}
  11.  
  12. a.news:hover, a.news:active {
  13. 	background:url(../img/hover.gif) no-repeat left;
  14. 	text-decoration:none;
  15. 	outline:none;
  16. 	}


De code werkt perfect in IE. Echter in FF krijg ik geen afbeelding te zien. De link werkt wel. Hoe krijg ik het ook voor elkaar dat FF de afbeelding (en veranderende afbeelding) laat zien?

Groet,
Roland.

6 antwoorden

Gesponsorde links
Offline Stijn - 26/12/2007 13:16
Avatar van Stijn PHP expert
css code - Bekijk de code zonder highlighting - Klap code in 
  1. a.news:link, a.news:visited  {
  2.     background:url("../img/news.gif") no-repeat left;
  3.     text-decoration:none;
  4.     outline:none;
  5.     }


De url moet in quotes staan.
Offline rolandt - 26/12/2007 13:24
Avatar van rolandt Nieuw lid Ik moet je helaas teleurstellen Stijn. Het resultaat is nog steeds het zelfde als zonder de quotes.
Offline Pieter - 26/12/2007 14:59
Avatar van Pieter Gouden medaille

SEO guru		 En als je er &nbsp; in plaatst?
Offline Xan - 26/12/2007 15:46
Avatar van Xan HTML interesse probeer het eens andersom:


html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="news"><a href="#"></a></div>


css code - Bekijk de code zonder highlighting - Klap code in 
  1. #news{
  2. width:190px;
  3. height:91px;
  4. }
  5.  
  6. #news a{
  7. display:block;
  8. width:190px;
  9. height:91px;
  10. background:url(../img/plaatje.jpg) top center no-repeat;
  11. }
  12.  
  13. #news a:hover{
  14. background:url(../img/plaatje_hover.jpg) top center no-repeat;
  15. }


ik denk dat dat beter werkt.
Offline rolandt - 27/12/2007 00:49
Avatar van rolandt Nieuw lid Dankje Xan voor de oplossing, en alle anderen ook bedankt voor het mee denken.

Na bestudering van de voorgestelde oplossing heb ik de html tag en de daarbij behorende css code nog iets korter kunnen maken.
Ik bedacht mij toen dat ik zoiets ook al een keer eerder geprobeerd had, en het toen niet werkte. Het blijkt dat het zonder display:block niet werkt. Hier was ik dus zelf nooit opgekomen.
Maar wat is de functie van deze code hierin? Welke uitvoer blokkeert hij en waarom wordt daarna de afbeelding wel getoond?

Groet,
Roland.
Offline timmie_loots - 27/12/2007 02:42
Avatar van timmie_loots PHP gevorderde Je zet een block-level element in een inline-level element (een div in een link, in dit geval), ik geloof dat Firefox hierdoor van het block-level element een inline-level element maakt. Width/height properties gelden niet voor inline-level elementen, gezien beide elementen ook geen inhoud hebben die de elementen enige grootte kan geven worden de elementen 0 pixels bij 0 pixels groot.

Je kunt zelf wel verzinnen dat je dan niets ziet.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.225s