Bugs dans un menu CSS/xHTML

Fermé
Ced62-59 - 5 oct. 2007 à 11:33
 Ced62-59 - 5 oct. 2007 à 19:12
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

4 réponses

Reivax962 Messages postés 3671 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 007
5 oct. 2007 à 12:51
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 <div> 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
0
Merci pour ta réponse.

Je vais faire comme tu me dis et je posterais le code juste apres.

Ced
0
bg62 Messages postés 23358 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 28 septembre 2022 2 324
5 oct. 2007 à 15:39
et regardes ensuite ici : http://jigsaw.w3.org/css-validator/
tu pourras visualiser les erreurs
@+
b g
0
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
0