CSS > zones réactives incompatibles sous IE...?

Bonjour !

J'ai un petit souçi, et pas des moindres, je débute en CSS (avec DWeaverMX8) et je m'en sors à peu près correctement, ouf , j'ai donc fait, sur les conseils avisés d'un ami, des zones réactives en CSS à la place de "maps".

J'utilise Firefox, et en voulant essayer mon site sur IE, j'ai pu constater que les zones etaient comme inexistantes, j'ai demandé à nouveau conseil à cet ami vraiment sympa mais il est super occupé avec ses "PHP/mysql" (auquel je ne comprends pas grand chose encore )

Voici l'url :
http://sideeffect95.free.fr/home
la feuille de style est ici : /side.css

Donc sous Firefox > impec, ça fonctionne et tout... mais sous IE, nada !

Merci d'avance pour votre aide !
Modifié par Grange (07 Dec 2005 - 23:44)

Salut,
c'est pas impossible que je soit un peu gland, mais je n'ai pas trouvé les zones dont tu parles...

C'est où dit?
Modifié par Thinkedou (07 Dec 2005 - 23:46)

Dans la feuille de style ? zone1, zone2 etc...

http://sideeffect95.free.fr/side.css

Ah vi,
Mais euh,

alors pourquoi utiliser des zone maps alors qu'il ne se passe rien au survol? Pourquoi pas juste des images avec un <a> ?

Enfin, y a peut être une raison.

Ensuite (mais je ne sais pas si c'est ça), il manque la fermeture d'instruction à chacune des zones :

#zone1 {    /* zone cliquable */
float: left;
width : 79px;
height: 24px;
margin-left: 82px;
margin-top: 9px;
display: block
}

Ferme bien ton "display:block;"

J'utilise des zones maps car les titres des rubriques ne sont pas des images indépendantes mais intégrées dans le visuel du site, (je fais tout sous photoshop et je fais des zones, je trouve ça plus sympa mm si je sais pas si c'est W3Cment correct).

Donc sinon je me suis encore fait avoir par des guillemets ou des ";" de fermeture oubliés... j'ai donc fermé display:block mais rien ne se passe...

Ok,

Je pense que c'est w3cment correct, mais tu as juste une armée de balises <a> vide et dans ta feuille de style 8 id qui sont (à mon avis) de trop...

Mais sinon, en regardant un peu tout ça de plus près, il semble que ton div "menu" ne plaise pas beaucoup à Ie, plus précisement la position : absolute de ce dernier.
Je pense qu'il faut reprendre le dragon à la base du cou et virer le bloc div menu qui ne sert à rien dans ton cas. Ensuite tu peux tout simplement positionner chacune des tes zones en absolute.

Une autre question tant que j'y suis, pourquoi autant de z-index ??

Voilà, j'ai vu aussi que tu pouvais vachement optimiser ta css avec des déclarations groupées par exemple, mais ça tu comptes peut être le faire après

Bon j'ai supprimé la div menu qui c'est vrai ne servait a rien au final... mais ça ne fonctionne toujours pas sous IE. c'est incroyable...

En ce qui concerne les Z-index, je ne sais pas très bien m'en servir encore , y en a peut-etre trop.

Pour les déclarations groupées, je ne sais pas ce que c'est.

En tout cas merci pour ton aide à cette heure si tardive.

Re,

C'est pas si tardif, ma période d'activité webesque se situe entre 20h et 4h du mat

Si tu as supprimé la Div Menu, tes éléments ont du se retrouver un peu dans les choux, le meilleur moyen pour voir ça c'est de leur mettre des border, on fait d'une pierre deux coups, car on peut faire ça rapidement avec une déclaration groupée justement

#zone1,#zone2,#zone3,#zone4,#zone5,#zone6,#zone7,#zone8 {
  border: 1px solid #fff;
}

Rajoute ça dans ta css, comme ça tu va mieux visualiser tes zones et pouvoir les ajuster en conséquence.
Modifié par Thinkedou (08 Dec 2005 - 02:07)

Non y a pas de problème avec ça, j'ai pu replacer les zones comme il fallait : constate par toi même.

Mais c'est toujours IE qui me pose problème... FF toujours ok.

Bonjour,

Grange a écrit :
j'ai donc fait, sur les conseils avisés d'un ami, des zones réactives en CSS à la place de "maps".

Ahem. Les conseils n'étaient pas si avisés que cela : ces pseudos-maps CSS sont un bricolage très irréfléchi quant à l'interopérabilité et à l'accessibilité du résultat.

Tels que tu les as utilisés, ces liens sans contenu sont formellement valides. Mais ils seront souvent inexploitables lorsque la page n'est pas affichée comme prévu avec CSS, puisque seul le positionnement CSS permet de les rendre visibles, cliquables, etc.

Certes, la présence des attributs title permettra parfois de compenser l'absence de contenu (cela peut être le cas dans un lecteur d'écran, mais pas obligatoirement). D'autres navigateurs rendront parfois disponible l'url des liens (lynx - un navigateur texte)... Mais tout cela laisse une bonne part de visiteurs finalement privés de liens.

Partant de là, deux possibilités de correction :
- remettre des libellés textuels dans les liens, et les masquer à l'écran via la technique de Bohman (voir http://blog-and-blues.org/weblog/2004/06/10/239 ). Ce qui ne résoudra pas pour autant le bug que tu rencontres dans IE Windows (il lui faut un background sur les liens pour que leur surface soit entièrement cliquable)...
- mieux : faire de véritables images <img> pour chaque lien, dotée d'un alt à la fiabilité garantie

Enfin, problème identique pour les titres de la page qui n'existent qu'à travers l'image...
Modifié par Laurent Denis (08 Dec 2005 - 06:28)