Discussion :

[oceane751]

Bonjour à tous

J'ai un menu dont les div sont des images.
Il y a un hover sur ses images

voici des bout de code

code CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.restauration {
background-image:url(images/3.JPG);
background-repeat:no-repeat;
width:129px;
height:34px;
}
 
.restauration:hover {
background-image:url(images/3hover.JPG);
background-repeat:no-repeat;
width:129px;
height:34px;
}

puis un bout de mon XHTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<li style="width:129px;"> <a class="MenuBarItemSubmenu" href="spip.php?rubrique4"><div class="restauration"></div></a>

Donc le hic est que le validateur w3c n'aime pas ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a class="MenuBarItemSubmenu" href="spip.php?rubrique4"><div class="restauration"></div></a>

il me sort :
document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag


Je ne vois pas ce que je peux faire pour remedier à cela

Merci d'avance pour votre aide

[oceane751]

désolée je viens de trouver

- mettre des span au lieu de div
- mettre un display:block; dans la classe où il y a l'image

problème résolu

[Erwan31]

désolée je viens de trouver

- mettre des span au lieu de div
- mettre un display:block; dans la classe où il y a l'image

problème résolu

Non c'est une erreur

[oceane751]

pourquoi?
le validateur aime et donc moi aussi

[Erwan31]

pourquoi?
le validateur aime et donc moi aussi

Pardon j'ai pas eu le temps de développer.
Ce n'est pas une erreur d'un point de vue de la validité (la validation n'est qu'un outil et non une fin en soi), autrement dit elle n'a pas pour fonction de garantir l'absence de mauvaises pratiques même si elle est un des maillons de la qualité web.

En ce qui concerne l'accessibilité, le contenu textuel du menu ne sera ni accessible pour les robots d'indexation, ni en cas de CSS désactivée ou d'images non chargées pour une raison ou une autre.
Pour ces raisons, tu dois placer ton image dans le code HTML avec le alt correspondant au nom de la rubrique, et la faire changer d'état via JS ou si possible mettre ton image en fond et écrire le texte de l'intitulé par dessus en HTML, le changement d'image se faisant alors via une translation vertical du background pour éviter d'avoir à preloader l'état hover de l'image.