Se connecter avec
S'enregistrer | Connectez-vous

Problème menu horizontal XHTML/CSS

Dernière réponse : dans Programmation

Bonsoir à tous,

Je me suis lancée dans la création de mon portfolio, et j'ai un problème de codage qui me turlupine depuis quelques heures :??:  .
Alors, voilà pour le CSS : 
  1. #menu {
    

  2. 	background-repeat: no-repeat;
    

  3. 	background-position:bottom left;
    

  4. 	}
    

  5.  
  6. #menu ul li{
    

  7. 	list-style:none;
    

  8. 	float:left;
    

  9. 	padding:0;
    

  10. }
    

  11.  
  12. #menu ul li a{
    

  13. 	height:114px;
    

  14. 	width:188px;
    

  15. 	display:block;
    

  16. 	background: no-repeat top left;
    

  17. 	text-decoration:none;
    

  18. }
    

  19.  
  20. #menu ul li a:hover{
    

  21. 	background-position: bottom left ;
    

  22. }
    

  23.  
  24. #menu ul li a.accueil{
    

  25. 	background-image:url(images/accueil.png) no-repeat;
    

  26. 	}
    

  27.  
  28. #menu ul li a.image{
    

  29. 	background-image:url(images/image.png) no-repeat;
    

  30. }
    

  31.  
  32. #menu ul li a.son{
    

  33. 	background-image:url(images/son.png) no-repeat;
    

  34. }
    

  35.  
  36. #menu ul li a.cv{
    

  37. 	background-image:url(images/cv.png) no-repeat;
    

  38. }
    

  39.  
  40. #menu ul li a.contact{
    

  41. 	background-image:url(images/contact.png) no-repeat;
    

  42. }


Et l'XHTML : 
  1. <body>
    

  2.     	<div id="header">
    

  3.         </div>
    

  4.  
  5.         <br clear="all"/>
    

  6.  
  7.         <div id="menu">
    

  8.         	<ul>
    

  9.             	<li><a href="#" class="accueil"></a></li>
    

  10.                 <li><a href="#" class="image"></a></li>
    

  11.                 <li><a href="#" class="son"></a></li>
    

  12.                 <li><a href="#" class="cv"></a></li>
    

  13.                 <li><a href="#" class="contact"></a></li>
    

  14.             </ul>
    

  15.         </div>
    

  16.  
  17. 	</body>


Voilà donc là j'ai l'impression que je suis à deux doigts d'y arriver, puisque seules les images n'apparaissent pas mais pourtant je peux cliquer dessus et le cadre en pointillés s'affiche bien. Je ne sais pas si je me suis fais comprendre. En gros c'est comme si l'image était présente sauf qu'elle n'y est pas !

Merci donc d'avance à ceux qui se pencheront sur la question afin de bien vouloir m'aider =)

Spoiler
Je sais que le :" <br clear="all"/> " ne sera pas valide au W3C, je ferais la classe CSS qui le remplacera plus tard, donc n'en tenez pas compte ;) 

Autres pages sur : probleme menu horizontal xhtml css

Lassé par la pub ? Créez un compte
Expert Programmation

Salut,

C'est certainement que le chemin vers l'image n'est pas valide.
Si tu utilises Firefox, installe Firebug.
Si tu utilises IE, il y a maintenant une version pour Firebug dispo via javascript, vas sur cette page et ajoute le lien Firebug Lite à tes favoris.

Ensuite, avec Firebug, tu analyses ton élément, et tu auras l'adresse utilisée pour l'image, qui sera certainement incorrecte.

Merci de ta réponse. En revanche je suis presque certaine de pouvoir affirmer que le problème ne vient pas de là. Le chemin vers mes images est bon, vérifier et re-vérifier. D'autre part, le cadre en pointillés autour de mes boutons mesure la taille de mon image.

Spoiler
J'adore ta signature (J'accuse, Cigarette... ) =)
Expert Programmation

Ah oui, je vois, c'est parce que tu utilises background-image mais que tu spécifies une valeur pour background-repeat
Soit tu fais:
  1. background-image:url(images/son.png);
    

  2. background-repeat: no-repeat;


Soit tu fais
  1. background:url(images/son.png) no-repeat;



PS: une connaisseuse je vois :) 
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde