Bonjour à tous,
 
J'ai tenté la conception d'un menu horizontal et réactif en css.
Lorsque je suis sous easyphp, internet explorer, firefox je n'ai aucun souci : en cliquant sur ma barre de menu j'accède rapidement aux pages choisies.
 
C'est sur chrome que cela pose problème et je ne sais pas :
-comment modifier ma feuille de style uniquement pour chrome
-ce qui cloche au niveau de mes éléments  
 
Je vous joins les éléments (la page en ligne et ici http://www.lyon-graphiste.fr/bonus/index.php et je vous joins ma feuille de style associée http://www.lyon-graphiste.fr/bonus/monstyle.css
Si quelqu'un peut m'aiguiller un petit peu pour que j'y vois plus clair.:cry:

J'ai testé sous Firefox et chrome je ne vois pas la différence. Le menu horizontal apparaît avec des bouton d'une certaine largeur et ces boutons s'élargissent lorsqu'on clique dessus.
 
Effectivement c'est pas très beau.
 
Je constate dans ta CSS que tu définis une largeur de 100px pour les balises <a> de classe menu lorsqu'elles sont dans l'état "link".
 
Si je puis me permettre un conseil, voici comment je procède pour la création d'une CSS:
* Premièrement définir les paramètres de style généraux sur les balise (style par defaut de chaque balise : a{...} div {...} body {...})
* Deuxièmement définir les paramètres de style par classe et par id (a.menu {...}, a#menu{...})
* Enfin s'occuper des états (a.menu:hover {...},  a.menu:link {...})
 
Cela permet de réutiliser un maximum de paramètres et d'éviter les erreurs. Car "a.menu:hover" par exemple aura les style de "a", "a.menu" et  "a.menu:hover".  
On ne redéfinis dans une classe que les paramètres différents du style par defaut.
De mêm on ne redéfinis dans les états que les paramètres qui changent par rapport au style de base (a + a.menu).
 
Pour en revenir à ton problème je constate dans ta CSS que "a.menu:link" as une largeur de 100 pixel ("width: 100px;" ) alors que "a.menu" as une largeur définir à "width: 100%;".
 
La définition de la largeur dans "a.menu:link" est en trop a moins que tu souhaite modifier la largeur du lien lorsqu'il est dans l'état link.

En fait du coup c'est la partie lien active qui avait une width à 22.5% je l'ai viré et du coup au clic dessus cela ne change plus la largeur donc ca c plutot pas mal.
Par contre jeme rends compte qu'il y a pas mal de propriétés doublons dans ma feuille car je suis débutante et du coup c un peu fouilli, je m'y perds moi meme et ca donne ca!
En meme temps ce site et à rendre pour un exam donc j'aimerai bien que ma stylesheet soit correcte.
Tu vois des choses qui te choquent sinon?

 
Rien ne me choque particulièrement, et en effet un peu de ménage ne serait pas de trop.  
N'oublis pas que le temps que tu passe à faire du code propre, c'est du temps que tu ne perdra pas plus tard a te demander ou ça coince.
J'y suis passé aussi et crois moi tenir un code propre fait plus gagner de temps qu'il n'en fait perdre.

Un petit détail. Pour ta liste avec des icones "checked" verte, tu emploies une url sur list-style-image
Mais tu ne peux pas passer bouger l'icone avec cette méthode (je trouve que les icones sont trop haute). Tu dois plutôt mettre un background-image sur le li  
http://webdesign.about.com/od/css/a/aa012907.htm
 
Pour tes lignes orange en dessous de tes titres, plutôt qu'employer un div pour le faire, donne une border-bottom aux h2
 
Détail minuscule mais que je trouve important, après la phrase CE QUE NOS CLIENTS EN DISENT, tu as trois petits points, cela se nomme des points de suspension, et c'est un seul caractère. En html entities c'est &hellip;
... vs …
Dans la balise il faut un p
http://www.w3.org/wiki/HTML/Elements/blockquote
 
Et bien sur, tu dois aussi utiliser une liste pour ton menu, pas une suite de liens !
 
Bonne chance.

Ca c clair qu'un code propre et bien organisé c du temps de gagné ! j'en suis bien consciente
 
David je te remercie pour ces précieux conseils que je vais appliquer de suite et remettant la main dans le camboui
 
Justement c un truc qui me tourmentait : normalement on crée des menu horizontaux grâce a des li ke l'on passe en en list-style-type none...
 
Par contre il va falloir que j vire quoi pour avoir mes listes propres avec ce code ?

 
Par défaut, dans ta css, tu mets ol,ul en list-style:none
Si tu veux des icônes, ce sont des background image.
 
Sinon, pour ton menu réactif, tu peux avoir des effets sympa en css3. Par exemple avec une image qui bouge: http://www.admixweb.com/demos/menucss3/
http://www.admixweb.com/2010/03/16 [...] ntal-menu/  
 
Ou simplement une transition de la couleur au survol
http://www.gethifi.com/blog/nicer- [...] ransitions  

Merci à tous !