Bugs dans un menu CSS/xHTML Fermé

Question

Bonjour,

J'essaye de mettre en place un menu mais il y a des bugs et je ne sais pas du tout comment les résoudre..... Les langages utilisés sont CSS et xHTML.

Voici le site de test pour le menu :
http://digital.man.free.fr/css/

Voici le code CSS du menu (Code CSS inscrit dans un fichier externe au code xHTML) :

ul#menu {
margin: 0px;
padding-left: 15px ;
}

ul#menu li
{
display:block;
float:left;
height:40px;
margin:0;
}

ul#menu a
{
position:relative;
width: 77px ;
height: 40px;
display: block ;
background: url(menu_final.gif) 0 0 no-repeat;
}

ul#menu li#menu_vide1{width:25px;}
ul#menu li#menu_vide1 a{background-position:0px 0;}

ul#menu li#menu_information{width:89px;}
ul#menu li#menu_information a:link{background-position:-25px 0;}

ul#menu li#menu_vide2{width:25px;}
ul#menu li#menu_vide2 a{background-position:-114px 0;}

ul#menu li#menu_agenda{width:58px;}
ul#menu li#menu_agenda a:link{background-position:-139px 0;}

ul#menu li#menu_vide3{width:25px;}
ul#menu li#menu_vide3 a{background-position:-197px 0;}

ul#menu li#menu_histoire{width:57px;}
ul#menu li#menu_histoire a:link{background-position:-222px 0;}

ul#menu li#menu_vide4{width:24px;}
ul#menu li#menu_vide4 a{background-position:-279px 0;}

ul#menu li#menu_membres{width:70px;}
ul#menu li#menu_membres a:link{background-position:-303px 0;}

ul#menu li#menu_vide5{width:24px;}
ul#menu li#menu_vide5 a{background-position:-373px 0;}

ul#menu li#menu_revuedepresse{width:116px;}
ul#menu li#menu_revuedepresse a:link{background-position:-397px 0;}

ul#menu li#menu_vide6{width:25px;}
ul#menu li#menu_vide6 a{background-position:-513px 0;}

ul#menu li#menu_extraits{width:55px;}
ul#menu li#menu_extraits a:link{background-position:-538px 0;}

ul#menu li#menu_vide7{width:24px;}
ul#menu li#menu_vide7 a{background-position:-593px 0;}

ul#menu li#menu_liens{width:38px;}
ul#menu li#menu_liens a:link{background-position:-617px 0;}

ul#menu li#menu_vide8{width:25px;}
ul#menu li#menu_vide8 a{background-position:-655px 0;}

ul#menu li#menu_contacts{width:66px;}
ul#menu li#menu_contacts a:link{background-position:-680px 0;}

ul#menu li#menu_vide9{width:24px;}
ul#menu li#menu_vide9 a{background-position:-746px 0;}




Pour l'instant, je n'ai mis qu'un lien valide, c'est "Informations", qui ouvre la page infos.html. Quand on clique dessus, la page demandée s'affiche bien mais il y a un décalage qui se créé dans le menu. ce décalage reste présent le temps que les fichiers temporaires du navigateur ne sont pas supprimés. J'ai testé sous IE et Firefox, même probleme.

Peut être pourriez vous m'aider ?

Merci

Reivax962 · Answer

Bonjour, à ta place, je reverrai complètement la façon de faire le menu. Parce qu'afficher 17 fois une même image en essayant de les superposer pour que ça ne se voit pas, ce n'est pas propre du tout ! Pourquoi ne pas mettre une fois l'image, via un

ayant un background, puis dans le div mettre directement des liens vides ayant une certaine largeur ? Pourquoi s'embêter avec des listes ? Par ailleurs, si tu souhaites référencer ton site, cette façon de faire n'est pas bonne car les moteurs de recherche ne pourront pas savoir à quoi correspond un lien, tu perdras en efficacité si ceux-ci n'ont pas de texte inclu. Xavier

Ced62-59 · Answer

Merci pour ta réponse.

Je vais faire comme tu me dis et je posterais le code juste apres.

Ced

bg62 · Answer

et regardes ensuite ici : http://jigsaw.w3.org/css-validator/
tu pourras visualiser les erreurs
@+
b g

Ced62-59 · Answer

Bonsoir,

Finalement, j'ai résolu mon probleme, en partie grâce à un autre sujet posté sur ce forum dans lequel le probleme décrit est le même.

css liens en images differentes

En "mixant" mon code et celui de l'autre post, tout fonctionne à merveille. Je changerais complètement le code plus tard pour suivre l'idée de Reivax962 car le site doit être fini dans les prochains jours et je n'ai plus le temps de refaire le code en entier, je préfère passer à autre chose...

http://jigsaw.w3.org/css-validator/  -> Ca passe, sans erreur.

Merci !

Ced

Bugs dans un menu CSS/xHTML

4 réponses

Discussions similaires