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

**aL1ba** · 17/09/2010, 20h12

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

**Rahim-US** · 17/09/2010, 20h24

Utilise des ID au lieu des name

**polymorphisme** · 18/09/2010, 10h05

Bonjour,

Utilise des ID au lieu des name

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

**Rahim-US** · 18/09/2010, 13h34

Oui je veux dire
Cela par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

au lieu de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**aL1ba** · 18/09/2010, 19h29

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.

**aL1ba** · 19/09/2010, 01h00

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 ???

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

HTML

Vue hybride

Discussions similaires

Partager

Partager