Bonjour,
 
je cherche à faire un menu avec des boutons qui sont des images en normal (sans souris dessus) et en hover.
comme c'est un menu, ces bouton doivent renvoyer à des liens.
 
j'ai écrit le code suivant dans mon XHtml 1.0 Strict:
 
"<a href="questionnaire.html"><div id="Questionnaire">
</div></a>"
 
et dans le CSS:
 
#Questionnaire
{
float:left;
background-image: url(bouton_normal.jpg);
height: 43px;
width: 222px;
top: 0px;
margin: 0px;
padding: 0px;
}
#Questionnaire:hover
{
float:left;
background-image: url(bouton_hover.jpg);
height: 43px;
width: 222px;
top: 0px;
margin: 0px;
padding: 0px;
}
 
je précise que ces images/bouton sont placé dans des <div> disposé en float et qui se suivent de manière a faire un menu horizontale.
Pour compliquer le tout, le menu en entier est dans un <div> qui est centré de la manière suivante  
 
"width: 800px;
margin-left: auto;
margin-right: auto;"
 
Je galère depuis deux jours à trouver une solutions.
 
Merci
 
A+
 
veyron

Et sinon les UL LI /LI /UL ça sert à rien en css ?

 
Accessoirement, essaie de nous informer sur le problème rencontré aussi quand tu fais un message, il semble que tu ai oublié ce détail

Petite astuce :Au lieu de mettre 2 images différente (Hover + normal), je met les 2 design de boutton sur la même image... le hover sous le normal (donc, ton image ici fera 222*86), et dans le CSS, le hover change juste la position de background à "bottom"...
L'avantage est qu'il n'a pas à charger de 2nde image (qui peut gêner).

Comme le dit Lactique, les <li> sont plus adapté, à condition de mentionné tout ce qu'il faut dans le CSS car IE et FF ne réagissent pas pareil par défaut (padding, margin etc...)

Sinon, tu n'es pas dans la bonne catégorie !

[EDIT] Un tuto à voir ! http://css.alsacreations.com/Const [...] les-en-CSS

Alors je l'ai lu ce tuto, j'ai bidouiller mon code, mais ça a fait n'import quoi (décalage incomprhensible)
Ce qui me parait bozar c'est que je n'ai pas trouvé de manière standart de le faire, alors que je pensais que ca devais etre un problème assez courant.
J'ai penser aux listes et j'ai bien essayer, mais si je poste c'est que j'ai pas trouver comme faire
Donc c'est pour dire que j'ai essayé "display: inline ;" ^^
 
Pour ce que j'attends: c'est trouver un moyen de faire marcher mon code.
En réalité la manière que j'ai mise dans mon code fonctionne bien, mais quand je vérifie mon code sur w3c il me dit que c'est incorrecte et c'est bien ca qui m'emebete car je vais etre évalué sur ca.
 
En fait je demande pas la solution toute faite, mais même des infos qui me débloqueraient.
 
V'là  
 
Merci pour vos première réponses
 
veyron

je cite l'erreur qu'il me donne (w3c):
 
"#  Error  Line 22, Column 48: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.
 
<a href="description.html"><div id="description">
 
✉
 
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
 
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>" ) inside an inline element (such as "<a>", "<span>", or "<font>" )."
 
faut t-il simplement que je fasse une <table> avec les risques de décalages que ca implique ou la solution est définitivement les listes ??

T'as pas le droit de mettre des éléments block (ici le div description) dans un <a>.

oui, les A sont des balises inlines...
Il n'est pas possible de mettre un étage dans un studio (exemple bidon mais bon !)

Vous êtes sur de ça. Il me semble l'avoir déjà fait et ça fonctionne.

@J_D_: avec la balise display ça doit etre possible, puisque tu peux forcer une balise inline a se comporter comme une bloc et inversement.
 
mais quelqu'un a t-il une idée pour que je code mon menu.
Je suis surpris que personnes d'autre n'ai eut ce problème avant...
 
des idées ??
 

là ou je bloque c'est que je ne souhaites pas mettre de texte dans <a></a> car je veux une image.
hors l'image est définie dans un div par background.
De plus pour respecter le codage xhtml je devrais mettre un lien pour un vision de la page sans css (pour y voir le fond -en opposition à la forme)

J'ai repris ton code tel qu'il est là.  
 
J'ai juste mis un fond de couleur à la place des images. Je n'ai aucune erreur lorsque je valide localement avec webdeveloper.  
 

heu ...
 
tu parles du code du premier post ? Oui il marche, mais il est considérer comme non valide par le testeur du site de w3c, or c'est notamment par ca que seront vérifier mes pages.
 
Je comprend qu'il geule (le testeur ^^ W3c) parce que mettre une balise bloc dans une inligne, bah ca va pas.
 
J'ai mit le message d'erreur en question un peu plu haut

Moi je n'ai aucune erreur W3C avec ton code.

pourtant moi il me dit clairement que "<a href="questionnaire.html"><div id="Questionnaire"></div></a>" c'est pas bon.  
 
Je cite :"One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>" ) inside an inline element (such as "<a>", "<span>", or "<font>" )."  
 
ou bien: "#  Error  Line 22, Column 48: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.
 
<a href="description.html"><div id="description"> "
 
t'es bien aller là ?? http://validator.w3.org/

Ah je me rends compte que j'ai uniquement validé la CSS et pas l'ensemble du document HTML.  
 
Alors oui, il me repère l'erreur aussi. C'est bizarre mais pourquoi tu ne mets pas juste l'image dans la div, plutot qu'un background? Tu mets le lien sur l'image et pas sur la div mais j'imagine que tu y as pensé.  
 
 
 

Et donc tu/vous vas faire/faites du Xhtml Strict mais sans aucun souci d'avoir un code sémantiquement correcte.
Et on vous apprend ça à l'école ?

Oui, il faudrait savoir ce qu'on vous impose, parceque le mieux reste de mettre le <a> dans la <div>, ce qui impose biensure de mettre du texte pour le lien... mais c'est plus... "propre" !
Sinon, passe pas les images survolés ... (je sais pas si c'est au norme du strict...)

 
justement je suis en train d'apprendre et comme tu as surement lu les messages avant, tu as bien du te rendre compte que je me soucis de la sémantique, sinon je n'aurais même pas poster puisque, en effet, ça marche... mais que ce n'est pas comme ça qu'il faut coder.
Je vais essayer vos pistes, je vous tient au courant, merci
 
A+

J'AI TROUVEEEE !!!!!!!!
 
Houhhouuuu, après avoir fait des trucs dans tout les sens et mettre embrouiller pendant des jours... en fait c'était tou con, mais alors tout con.
 
J'avais évité de faire comme ça car j'étais persuadé d'avoir lu sur un site internet que le Xhtml strict ne reconnaissait pas la balise css Display...
 
suffisait de faire une balise <span> et de lui associer un paramètre css display:"block";  
 
Du fais que mes images devait être identifier en temps que <a> pour permettre d'utiliser :hover, que les blocs ne faisaient pas tous la même largeur et qu'il fallait de ce fait les identifier individuellement, la piste de mise en forme par des <ul> <li>... n'était pas possible
 
J'ai essayer un temps: http://css.alsacreations.com/Tutor [...] age-unique ... mais ca ne convenait pas.
 
v'là bon dimanche ^^

Ha bon ? moi et des milliers d'autres codeur xhtml css on fait ça tous les jours pourtant.

C'est de toute façon ta seul solution correcte sémantiquement. C'est une liste ? donc dis le dans le code, en utilisant les balises de liste.
C'est simple pourtant le xhtml.
A toi de bosser ton css pour savoir comment regler tes probleme d'affichage, ce n'est pas le html qui doit souffrir du manque de connaissance de la part du codeur. Le code html doit etre le plus court le plus propre le plus efficace. Seule la css peut etre bricolé.

En l'occurrence ici y arien de complexe a faire un ul li avec des liens, y mettre du texte qui ne s'affichera pas, y mettre une image d'arrière plan avec roll-over donc et le tout dimensionné comme un bloc pour avoir une zone rectangulaire cliquable.

Il serait bon de surfer un peu sur des sites propres et d'analyser un peu le code html et css. On va dans le mur sinon...

Ps un Ul se comporte comme une div et se gère aussi bien, aucun intéret de créer une div pour contenir un menu comme trop souvent on le voit.