problème avec 'anchor', déplacement non valide

Bien le bonjour,
Je suis en train de sécher sur ce problème, qui est le même tant sur FF,IE,Chrome,Safari ou Opéra.
J'ai crée sur une page, qui contient 5 groupes de 2 photos, des liens pour aller directement sur le groupe de photos désiré, mais ça ne fonctionne pas du tout comme je l'espérais. Ça fonctionne pour l'exemple 1 (cellier) ou le dernier, mais pour les autres situés entre ces extrèmes, c'est zéro.

Doctype

Code:

1
2
3
4
5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<p class="txtindent"><br />
<a href="#cellier">exemple de cellier.</a><br />
<a href="#biblio">exemple de bibliothèque.</a><br />
<a href="#premier">exemple d'ilot de cuisine(1).</a> <br />
<a href="#deuxieme">exemple d'ilot de cuisine(2).</a><br /> 
<a href="#troisieme">exemple d'ilot de cuisine(3).</a>
</p>
<br />
<div id="blokwrapper"><!--strt of blokwrapper-->
<div id="bloka">
 <p><a name="cellier"></a></p><!--no need 4 txt-arrival-->
<span style="float: left; padding: 5px; margin: 5px; "><img src="photo_Idetc/meuble_sketchup.jpg"  alt="Esquisse de cellier en 3 D" height="300" width="400" /></span>
<span style="float: right; padding: 5px; margin: 5px; "><img src="photo_Idetc/490.jpg" alt="Meuble fini"      height="300" width="400" /></span>
</div>
<p class="clearBoth">exemple de cellier</p>
<p><a name="cellier"></a></p><!--no need 4 txt-arrival-->
<br />
<div id="blokb">
<span style="float: left; padding: 5px; margin: 5px; "><img src="photo_Idetc/b-b1.jpg" alt="Esquisse de meuble en 3 D" height="300" width="400" /></span>
<span style="float: right; padding: 5px; margin: 5px; "><img src="photo_Idetc/b-b2.jpg" alt="Meuble fini" height="300" width="400" /></span>
</div>
<p class="clearBoth">exemple de bibliothèque</p>
<p><a name="biblio"></a></p><!--no need 4 txt-arrival-->
<br />
<div id="blokc">
<span style="float: left; padding: 5px; margin: 5px; "><img src="photo_Idetc/il-a1.jpg" alt="Esquisse de meuble en 3 D" height="300" width="400" /></span>
<span style="float: right; padding: 5px; margin: 5px; "><img src="photo_Idetc/il-a2.jpg" alt="Meuble fini" height="300" width="400" /></span>
</div>
<p class="clearBoth">exemple numéro 1 de l'ilot</p>
<p><a name="premier"></a></p><!--no need 4 txt-arrival-->
<br />
<div id="blokd">
<span style="float: left; padding: 5px; margin: 5px; "><img src="photo_Idetc/il-b1.jpg" alt="Esquisse de meuble en 3 D" height="300" width="400" /></span>
<span style="float: right; padding: 5px; margin: 5px; "><img src="photo_Idetc/il-b2.jpg" alt="Meuble fini" height="300" width="400" /></span>
</div>
<br />
<p class="clearBoth">exemple numéro 2 de l'ilot</p>
<p><a name="deuxieme"></a></p><!--no need 4 txt-arrival-->
<br />
<div id="bloke">
<span style="float: left; padding: 5px; margin: 5px; "><img src="photo_Idetc/il-c1.jpg" alt="Esquisse de meuble en 3 D" height="300" width="400" /></span>
<span style="float: right; padding: 5px; margin: 5px; "><img src="photo_Idetc/il-c2.jpg" alt="Meuble fini" height="300" width="400" /></span>
</div>
<p class="clearBoth">exemple numéro 3 de l'ilot</p>
<a name="troisieme"></a></p><!--no need 4 txt-arrival-->
</div><!--eo of blokwrapper-->
<br />
<div class="clearBoth">
</div><!--end of clearboth div-->
</div><!--end of filecontained-->

CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
       /*strt of blok wrapper*/
#blokwrapper {
                 width : 100%;
                 height: 100%;
                margin-left: auto; margin-right: auto;
                   }
 
 
#bloka, #blokb, #blokc, #blokd, #bloke, #blokf {
             width: 100%;
             height: 100%;
             margin-left: auto; margin-right: auto;
            }

J'ai souvent utilisé ces anchors avec du texte sans problème, mais avec les photos, il y a quelque chose qui m'échappe complètement. I am stumped!

Utilise des ID au lieu des name

Bonjour,

Citation:

Utilise des ID au lieu des name

Heu ... oui, en clair, cela veux dire quoi ???

Oui je veux dire
Cela par exemple

Code:

<a id="deuxieme"></a>

au lieu de :

Code:

<a name="deuxieme"></a>

Génial, ça fonctionne.
Mais je n'aurais jamais cru qu'il fallait faire ça, quand on sait comment ça fonctionne avec du texte. Je suppose que c'est dû à la façon dont le parser traite les "block".

En, tout cas, un gros merci à Rahim-US.

Un bémol......j'avais un petit doute, malheureusement confirmé par W3C, le "id" en lieu et place de name ne 'valide' pas, bien que ça fonctionne.....d'autres pistes ???

Salut,

Une ancre est un élément unique. Un id désigne un élément unique. Cette méthode est bien adaptée à ce cas.

Pour ce faire, on supprime toutes les lignes...

Code:

<a name="..."></a>

Ensuite on a le choix :

a) Renommer les ancres afin qu'elle pointent directement sur le bloc.
Code:

1 2 3 4 5 <a href="#blocka">exemple de cellier.</a> <a href="#blockb">exemple de bibliothèque.</a> <a href="#blockc">exemple d'ilot de cuisine(1).</a> <a href="#blockd">exemple d'ilot de cuisine(2).</a> <a href="#blockbe">exemple d'ilot de cuisine(3).</a>
b) Renommer les id des blocs ciblés (pour meilleure lisibilité du code)

dans la partie HTML

Code:

<div id="bloka">

devient

Code:

<div id="cellier">

etc...
et aussi dans la partie CSS
Code:

1 2 3 4 5 #cellier, #biblio, #premier, #deuxieme, #troisieme { width: 100%; height: 100%; margin-left: auto; margin-right: auto; }

Ok, je regarde ça et je reviens.
______________________________________
OK, super, tout fonctionne. J'ai aussi validé et vérifié avec IE, FF, Chrome, Opera & Safari, et c'est A1 partout. Finalement, je suis encore passé à coté du "KISS", mais je vais m'en souvenir.

Encore merci à Eric2A.