[Mado]

bjour

http://www.delorie.com/web/lynxview.cgi?ur...cv%2Findex.html

aucun liens de menus n'apparaissent et je ne comprends pas

http://www.zengrafom.org/cv/index.html

besoin de vos lumières

merci

marie

Ce message a été modifié par mariepetroni - 14 août 2004 - 17:53.

[Monique]

Bonjour Marie,

Rien d'étonnant, tes liens sont faits sur du vide... pas de texte ni d'image, uniquement des images de fond dans ta feuille de style

[Mado]

ha merci Monique

alors c'est peut etre mieux que je fasse pas de rollover ou alors y'a peut etre un autre moyen de faire modifier l'image au passage de la souris?

[ElMoustiko]

Une petite technique assez simple :
(ps en passant : l'effet roll over donne du dynamisme au site, et c'est vraiment mieux je trouve, même si l'effet negatif photo sur qui suis je est moyen je trouve)

code xhtml :

<ul>
<li><a href="lien1"><span>Titre du lien1</span></a></li>
<li><a href="lien2"><span>Titre du lien2</span></a></li>
<li><a href="lien3"><span>Titre du lien3</span></a></li>
<li><a href="lien4"><span>Titre du lien4</span></a></li>
<li><a href="lien5"><span>Titre du lien5</span></a></li>
<li><a href="lien6"><span>Titre du lien6</span></a></li>
<li><a href="lien7"><span>Titre du lien7</span></a></li>
<li><a href="lien8"><span>Titre du lien8</span></a></li>
<li><a href="lien9"><span>Titre du lien9</span></a></li>
</ul>

code css :

ul {
width: XXpx;
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
float: left;
}
ul li a {
display: block;
width: (XX/3)px;
height: YYpx;
background: url(image_du_lien) no-repeat 0 0;
}
ul li a span {
display: none;
}
ul li a:hover {
backgrounf: url(image_du_lien) no-repeat 0 -YYpx;
}

Et pour l'image utilisée, tu prend une image par carré, et l'image contient l'etat survolé et l'etat normal l'un en dessous de l'autre pour diminuer les temps de chargement. Pour plus de détails, je te laisse consulter ces quelques tutoriels :
http://www.elmoustik...p?tut=roll_over
http://www.alsacreat...ollover_unique/

Voila @++

ps : j'ai pas testé le code xhtml/css, c'est ecrit à chaud et à cette heure ci, victime d'insomnie (fatigué donc ! ) je ne garanti rien ! Mais a priori ca doit etre bon

[Mado]

merci elmoustiko et je fais un ul pour chaque petit carré sinon j'aurai tooujours la meme image en survol nan?

ai je bien compris?

merci

[LaurentDenis]

ElMoustiko, ton menu accessible... est inaccessible en fait

Tu utilises la technique FIR:

ul li a span {
display: none;
}

<li><a href="lien1"><span>Titre du lien1</span></a></li>

L'idée étant qu'un lecteur d'écran ignorera la feuille de style et/ou ignorera le display:none et restitura le contenu du span... Mais ce n'est hélas pas le cas : Jaws, Window Eyes et IBM HPR appliquent le display:none (ou aussi bien un visibilty: hidden), et ton menu devient alors une succession de liens sans texte ni contenu, comme si tu avais écrit:

<li><a href="lien1"><span></span></a></li>

Mieux vaut utiliser la méthode de Paul Bohman pour laquelle aucun problème n'a jusqu'ici été signalé dans les lecteurs d'écran :

ul li a span {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}

Et mieux vaudrait encore tout simplement inclure l'image directement dans le lien, et la seconde (celle du survol) via CSS.

[LaurentDenis]

Tiens, au passage, il faudrait vérifier ce que donne dans les navigateurs et les lecteurs d'écran :

ul li a span {

span {
position: absolute;
clip: rect(1px 1px 1xp 1xp);
clip: rect(1px, 1px, 1px, 1px);
}

<li><a href="lien1"><span>Titre du lien1</span></a></li>

Cette syntaxe de clip ramènant à zéro la zone de visibilité du span... ce pourrait être une alternative au FIR et à la méthode de Bohman.

[Monique]

Bonjour Laurent,


Je viens de faire un essai avec Jaws, le lien est lu mais pas la liste (normal, il n'y a pas ul dans ton code)

Il dit : link Titre du lien1

[LaurentDenis]

La version de Jaws que tu utilises n'appliquerait donc pas la propriété "clip". Mais reste à voir comment le style est invoqué (link, _AT_import, règle média ?), car ce n'est pas neutre, si mes souvenirs sont exacts.

Intéressant, ça. Il va falloir creuser

D'autant que cette solution permettrait en fait d'éliminer le <span> commun à ces méthodes de masquage de contenu. Par exemple, pour un titre dont le contenu texte est remplacé par un logo, on utiliserait quelque-chose comme :

h1 {
background-image:url(titre.jpg);
background-repeat:no-repeat;
background-position: top left;
padding-left: 200px;
position: absolute;
clip: rect(auto 200px auto auto);
}

<h1>Texte du titre</h1>

(Pour une image de 200 px de large)

Avec évidemment la contrainte de cette position absolue...

[Mado]

bijour

comme j'ai trois serie de 3 bouton je mets 9 ul un pour chacune des images background?

je vais essayer la methode de laurent en mettant l'image sur le lien et l'image hover dans la css

merci

marie

un lien que je viens de trouver

http://www.projectse.../css/uberlinks/

Ce message a été modifié par mariepetroni - 15 août 2004 - 11:26.

[ElMoustiko]

Wé exact laurent, bien vu, tu me reprend une fois de plus à juste titre...
Moi qui pensait bien faire...

Non non pas 9 ul ! l'ul englobe toutes les petites icones, 1 ul contenant 9 li.

@++

[Monique]

LaurentDenis, le dimanche 15 août 2004, 12:11, dit :

La version de Jaws que tu utilises n'appliquerait donc pas la propriété "clip". Mais reste à voir comment le style est invoqué (link, @import, règle média ?), car ce n'est pas neutre, si mes souvenirs sont exacts.

Ma version de Jaws : 5.00.621

J'ai essayé avec link et avec @import
Jaws ne prend pas cette règle de style en compte et dit : heading level 1 texte du titre

Si j'ajoute un media dans l'élément link, le style n'est pris en compte ni par IE ni par Firefox.
Si j'ajoute un media à @import, le style est pris en compte par les navigateurs graphiques.
Mais la règle de style n'est prise en compte dans aucun cas par Jaws.

[LaurentDenis]

Citation

Mais la règle de style n'est prise en compte dans aucun cas par Jaws.

Ce qui est intéressant, c'est que, d'après ces essais rapides, cette technique de masquage du texte dans le titre est extrêmement facile à utiliser...

Ce message a été modifié par LaurentDenis - 15 août 2004 - 19:20.

[Monique]

LaurentDenis, le dimanche 15 août 2004, 20:18, dit :

d'après ces essais rapides, cette technique de masquage du texte dans le titre est extrêmement facile à utiliser...

... et cela semble bien fonctionner

J'ai testé ton essai pour OpenWeb avec Jaws

[Mado]

j'ai tente de vous suivre mais je ne comprends pas grand chose...

je fais comme ca alors?


ul {
width: XXpx;
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
float: left;
}
ul li a {
display: block;
width: (XX/3)px;
height: YYpx;
background: url(image_du_lien) no-repeat 0 0;
}
ul li a span {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}

li_folio a hover {background-image : url(image1)}
li_cv a hover{ background-image url(image2)}
etc?

je crois que j'ai rien compris
desolée

[Mado]

j'ai trouvé une façon de faire mais je ne sais pas si elle est bonne

j'ai mis du texte dans une balise <p class="hidden"></p>

p { visibility : hidden;}

ce qui fait qu'on ne le voit pas mais qu'apparement ca marche avec lynx

My Webpage

merci

Ce message a été modifié par mariepetroni - 15 août 2004 - 22:49.

[petit-ourson]

Mado, le dimanche 15 août 2004, 22:45, dit :

j'ai trouvé une façon de faire mais je ne sais pas si elle est bonne

j'ai mis du texte dans une balise <p class="hidden"></p>

p { visibility : hidden;}

ce qui fait qu'on ne le voit pas mais qu'apparement ca marche avec lynx

My Webpage

merci

Sous lynx oui, cela marche.

Mais comme disais LaurentDenis :

Citation

L'idée étant qu'un lecteur d'écran ignorera la feuille de style et/ou ignorera le display:none et restitura le contenu du span... Mais ce n'est hélas pas le cas : Jaws, Window Eyes et IBM HPR appliquent le display:none (ou aussi bien un visibilty: hidden), et ton menu devient alors une succession de liens sans texte ni contenu, comme si tu avais écrit:

Ce message a été modifié par petit-ourson - 15 août 2004 - 23:33.

[Mado]

alors svp expliquer moi ce que je dois faire parce que je n'ai pas compris

ce que elmoustiko m'a donné comme soluce n'est pas good apparement et je n'ai pas compris le reste

qu'est ce qui fonctionne pour tous alors svp
merci

[Mado]

c'est comme ca qu'il faut que je fasse?

http://developpeur.journaldunet.com/tutori...ionnement.shtml

merci

[LaurentDenis]

Marie, dans http://www.zengrafom.../blocks_zen.css , remplace

 { visibility : hidden;}

par :

p.hidden {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}

Ton code est un peu touffu, et il est difficile de te donner une solution complète. Mais ceci devrait déjà remédier déjà au problème des lecteurs d'écran pour lesquels tes liens risquent de ne pas avoir de contenu