Adaptation du menu coquelicots

Je me suis inspiré de ce menu css (http://css.alsacreations.com/Galeries-de-menus-en-CSS) pour créer une "carte-image" (des zones de l'image correspondent à des liens hypertextes). les zones sont définies dans l'identifiant spécifique de chaque liens, avec une pseudo classe supplémentaire pour que la partie-lien de l'image "grossisse" au passage de la sourie. Cela marche très bien sous Opéra 9 ou Firefox, mais certaines zones ne réagissent pas du tout, d'autres très mal, sous IE7. Pourriez-vous m'aider ? Merci !!!

a écrit :
Exemple de code css :
#conseils {
height: 150px;
width: 65px;
top: 140px;
left: 90px;
padding: 0px 0px 0px 0px;
}

#conseils:hover{
height: 187px;
width: 83px;
top: 101px;
left: 69px;
background: url(conseils.gif) no-repeat;
padding: 0px 0px 0px 0px;

}

a écrit :
Exemple de code html :
<ul>
<li><a id="conseils" title="conseils" accesskey="1" href="conseils.html"></a></li>
</ul>

Modifié par rasleboldesid (01 Sep 2006 - 07:48)

Bonjour rasleboldesid,

Il me semble que ton lien est désespérément vide de tout contenu. En dehors du fait que cela pose de sérieux problèmes d'accessibilité, il est possible que certains navigateurs refusent de prendre en compte (et en particulier de rendre actif) des éléments de contenu... sans contenu.

Désolé, je ne comprends pas ta réponse : à quel lien fais-tu référence ? à quel contenu ? Je ne fais que débuter, j'ai donc besoin de quelques éclaircissments supplémentaires... Merci !
Le lien avec les menus fonctionne :
http://css.alsacreations.com/Galeries-de-menus-en-CSS

Ok : j'ai compris : tu parles des balises <a> : d'accord ok !

Par contre , si je dois écrire le texte à l'intérieur, il faut que je le positionne sous des angles spécifiques (ce que me permettait le fait de les inclure dans le dessin) : est-ce possible en css ?
Modifié par rasleboldesid (01 Sep 2006 - 14:16)

Je viens d'essayer de mettre un horrible &nbsp entre les balises a... c'est pire : ça affiche des traits d'union qui sont les seuls liens avec les pages web internes... tout l'espace défini en id n'existe plus... manifestment je n'ai pas la solution !!!

Salut.

Tu dois placer l'image directement dans le code html. En effet, ces images contiennent une information importante, la destination du lien. C'est donc une partie du contenu de ta page.

Et le contenu doit se trouver dans le code html premièrement parce que c'est sa place (au nom de la séparation contenu/mise en forme) et deuxièmement pour être accessible à tous les visiteurs, dans toutes les conditions imaginables (appareils mobiles, pas de css, pas d'images, lecteur d'écran, navigateur texte, etc).

En plaçant l'image dans le code html, tu résouds tes problèmes. Si l'image n'est pas affichée pour une raison ou pour une autre, elle est remplacée par son texte alternatif (alt="...") et l'information n'est pas perdue.

En la laissant en arrière-plan, il suffit que les CSS soient désactivées pour que ton menu devienne inutilisable.
Modifié par Sopo (01 Sep 2006 - 18:01)

Merci Sopo : j'ai pas fait ça, parce que je ne maîtrise pas encore assez le css pour refonder tout le code du menu précité que j'ai déjà pas mal arrangé à ma sauce. Mais j'ai trouvé la solution : c'étaient les balises <li> qui étaient présentes dans le menu coquelicots qui empêchaient IE de faire tourner mon site : maintenant ça fonctionne au poil !
Tu as surement raison : mettre des photos dans le css c'est sûrement contradictoire, mais pour l'instant ça marche...
Encore merci !