Se connecter / S'enregistrer
Votre question

Problème menu horizontal XHTML/CSS

Tags :
  • Png
  • Programmation
Dernière réponse : dans Programmation
4 Août 2010 22:31:53

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

a c 232 L Programmation
5 Août 2010 09:58:24

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.
m
0
l
5 Août 2010 11:02:15

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... ) =)
m
0
l
a c 232 L Programmation
5 Août 2010 11:52:46

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 :) 
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS