Page dinamyque sans javascript. Problème IE6 HELP!

Bonjour,

Voici mon premier post sur un Forum
J'ai un problème avec IE6 voici tout d'abord mon code HTML :

<span onclick="creeAjax('principal','lien1.html');">vin blanc<p>Cliquer pour d&eacute;couvrir le vin blanc</p></span>

Le creeAjax c'est juste pour afficher le contenu de lien1.html dans <div id='principal'> cela n'a pas d'importance en résumer le code pourait être :

<span>vin blanc<p>Cliquer pour d&eacute;couvrir le vin blanc</p></span>

Avec la CSS qui suit :

/* GESTION DE L'AFFICHAGE DE DEFINITION EN BAS A DROITE */
span {
text-decoration: none; /* définition du span qui affichera le "calque" */
cursor:pointer;
}

span:hover {
	text-decoration: none; /* définition du span qui affichera le "calque" */
}

span p { /* définition de la balise <p> inclue dans <span> */
display: none;
margin: 0;
padding:0;
}

span:hover p { /* définition de la balise <span> au survol */
display: inline;
position: absolute;
top: 375px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
right: 275px;
width: 120px;
height: 80px;
text-align:justify;
color:black;
}

MF et IE7 m'affiche le contenu de la balise <p> dans un autre endroit de la page lorsque la souris passe sur la balise <span> mais avec IE6, rien a faire, quelqu'un peut m'aider svp..

Bonjour,

deux problèmes majeurs... sûrement trois !

- Mettre un onclick sur un span, c'est virer tous les utilisateurs qui n'ont pas d'autres choix que de se servir de leur clavier pour naviguer.

- un span est un élément de type ligne qui ne peut pas contenir un élément de type block tel que p. Le code html est donc à revoir.

- Quelle est l'alternative pour ceux qui ne disposent pas de JS ? Ont-ils accès aux informations de la page lien1.html ?

Pour ceux qui est du <span>, j'avais pas pensé au personne n'ayant pas de souris, je tente de remplacer par des balises <a>, ce qui arrange aussi le probleme des lignes et des blocs ( ) et vous raconte ce que ca donne.
Pour ce qui est de JS, c'est sur que si la personne l'a désactivé, la requete Ajax ne marche pas mais un message l'avertis lors de son arrivé sur le site qu'il n'auras pas acces aux information si il n'active pas javascript.

Bon en fait c'est bon :
En partie grâce à ca :
http://css.alsacreations.com/Tutoriels-et-articles-divers/Afficher-Masquer-des-calques-sans-javascript[/url]

Et aux remarques du petit koala(koala64).

Bon j'envoie le code fonctionnel :
HTML :

<a href='#' onclick="creeAjax('principal','lien1.html');">vin blanc<span>Cliquer pour d&eacute;couvrir le vin blanc</span></a>

(toujours la premiere partie sans importance)

Et css :

/* GESTION DE L'AFFICHAGE DE DEFINITION EN BAS A DROITE */
a {
text-decoration: none; /* définition du lien qui affichera le "calque" */
}
a:hover {
background: none; /* correction d'un bug IE */
}
a span { /* définition de la balise <span> inclue dans <a> */
display: none;
}

a:hover span { /* définition de la balise <span> au survol */
display: inline;
position: absolute;
top: 375px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
right: 275px;
width: 120px;
height: 80px;
text-align:justify;
color:black;
}

Tester MF, IE6, IE7.

Salut,

Si par exemple, l'utilisateur ne dispose pas de JS, il se retrouve avec "vin blanc Cliquer pour découvrir le vin blanc" alors que le bouton est infonctionnel.

On peut faire la même application avec un simple lien du type :

<a href="lien1.htm">vin blanc</a>

ce qui permet d'accéder au contenu lorsque JS est désactivé.

Ajax n'a rien d'une alternative... C'est une surcouche... Développer comme tu le fais là, c'est perpétrer l'idée que Javascript et accessibilité ne font pas bon ménage... (alors que c'est totalement faux, tout est question de bonne pratique)

PS : ... et afficher/masquer des calques sans javascript, ce n'est rien d'autre que se brider... parce qu'avec JS, on peut faire mieux... et CSS aussi, n'est pas disponible partout...
Modifié par koala64 (30 Mar 2007 - 10:55)