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

**Eric2a** · 19/09/2010, 04h08

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 :

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

<p><a name="..."></a></p><!--no need 4 txt-arrival-->

Ensuite on a le choix :

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

Code :

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

1
2
3
4
5
<a href="#blocka">exemple de cellier.</a><br />
<a href="#blockb">exemple de bibliothèque.</a><br />
<a href="#blockc">exemple d'ilot de cuisine(1).</a> <br />
<a href="#blockd">exemple d'ilot de cuisine(2).</a><br /> 
<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 :

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

<div id="bloka">

devient

Code :

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

<div id="cellier">

etc...

et aussi dans la partie CSS

Code :

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

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

**aL1ba** · 19/09/2010, 13h45

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.

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

HTML

Discussions similaires

Partager

Partager