5568 sujets

Sémantique web et HTML

Pb compatibilité ancre pour le retour en haut de la page

Pages :
Bonsoir,

Dans le cadre de la création du site Internet de notre société familiale, je me suis lancé dans la création d'un site basique en xhtml et css.
Le live de Raphaël Goetter, CSS 2 Pratique du design web ma grandement aidé dans cette démarche. (PS: les alsaciens sont les meilleurs! Smiley cligne )

Cependant, j'ai un problème de compatibilité pour l'ancre "retour en haut de page". En effet, si je me réfère à la page n°211 du livre précédement cité, il est conseillé d'écrire le code suivant dans le fichier .htm ou .html:
<body id="haut">
...
<a href="#haut">retour en haut de page</a>

Ce code est validé en xhtml strict ou transitional et fonctionne avec le navigateur Internet Microsoft Explorer 6...
Mais ne marche pas avec le navigateur Internet Microsoft Explorer 5.5 Smiley decu

J'ai fait une brève recherche sur le net via google, et j'ai trouvé cette solution:
<body id="top" name="top">
...
<a href="#top">retour en haut de page</a>

Cela fonctionne avec les navigateurs Internet Microsoft Explorer versions 5.5 et 6...
Mais le code n'est pas validé par le W3C Smiley bawling

Quelqu'un peut-il me suggérer une solution alternative?
Je crois qu'il ne te reste plus qu'à choisir entre la conformité (engagement dans le futur) et la compatibilité (engagement par rapport au passé). Mais si le Xhtml n'est pas correct simplement à cause de l'attribut name (qui cependant est complété d'un id), ce n'est pas bien méchant.

Dorian Smiley smile
Ce point de la faq n'est pas à mon avis très au point. Je me permet une fois encore de présenter le topo suivant :

a écrit :

#_top sans ancrage ne fonctionne jamais.

#top fonctionne avec IE sans ancrage. Mais pas avec FF et Opera.

L'ancrage par un id="ancre" marche avec FF, Opera, IE6. Mais, de mémoire pas avec les versions antérieures d'IE.

<a href="#"> marche avec IE5, IE6, FF mais pas avec toutes les versions d'opera. De plus et c'est un vrai problème, ça ne redonne pas le focus au lien en tête de document. Donc intérêt quasi nul.

L'ancrage par <a name="ancre"> marche avec IE5, IE6, FF(geckos), Opera. Et c'est valide xhtml 1.0 strict.


Il me semble également que l'ancrage <a id="ancre" /> fonctionne pour les versions de IE inférieures à la 6. Mais ce serait à vérifier et quoiqu'il en soit c'est réservé à l'élément a
Modifié par clb56 (05 Feb 2006 - 00:59)
Igor a écrit :
Bonjour et bienvenue sur Alsacréations,

As-tu pensé à faire une recherche et consulter la FAQ: Comment faire un lien vers un endroit précis de la page (ancre) ?



Bonsoir M. IGOR,

J'ai visité le lien que vous m'avez suggérer. Je suis au regret de vous annoncer qu'il y a des erreurs. En effet, ce n'est pas compatible avec le navigateur Internet Microsoft Explorer Versions 4 et 5 (Voici ce qui est marqué):

./.
Il ne semble pas nécessaire de définir l'ancre (id) "top" lorsqu'on utilise ce nom.
Et cela fonctionne sur tous les navigateurs suivants : NS4, 6, 7, 8, Opera 7.x, 8, IE 4, 5 , 6, Mozilla et FireFox.
./.

Je crois que M. DODORMIR a raison. J'ai vu, ce soir, un ami informaticien dans une petite SSII alsacienne. Il m'a suggérer la même chose, à savoir:
1° Mettre de côter les navigateurs anciens.
2° Coder selon ci-après:
<body id="top">
...
<a href="#top">Retour</a>
3° Rester dans la norme (dans mon cas XHTML Strict)

Je vous remercie TOUS pour vos infos.
Smiley biggrin

Antoine
clb56 a écrit :
Ce point de la faq n'est pas à mon avis très au point. Je me permet une fois encore de présenter le topo suivant :


#_top sans ancrage ne fonctionne jamais.

#top fonctionne avec IE sans ancrage. Mais pas avec FF et Opera.

L'ancrage par un id="ancre" marche avec FF, Opera, IE6. Mais, de mémoire pas avec les versions antérieures d'IE.

<a href="#"> marche avec IE5, IE6, FF mais pas avec toutes les versions d'opera. De plus et c'est un vrai problème, ça ne redonne pas le focus au lien en tête de document. Donc intérêt quasi nul.

L'ancrage par <a name="ancre"> marche avec IE5, IE6, FF(geckos), Opera. Et c'est valide xhtml 1.0 strict.


Il me semble également que l'ancrage <a id="ancre" /> fonctionne pour les versions de IE inférieures à la 6. Mais ce serait à vérifier et quoiqu'il en soit c'est réservé à l'élément a


Merci CLB56,

Cependant, je crois qu'il y a des erreurs dans tes propos.
Je me suis forgé une opinion sur cette question d'ancrage.
Je pense qu'il faut se tourner vers le futur.
Et, donc, le livre de Raphaël (CSS 2 Pratique du design...) donne la bonne solution, à savoir:
<body id="haut">
...
<a href=#haut">retour haut de page</a>

Cela ne fonctionne pas avec le navigateur Internet Microsoft Explorer 5.5, mais cela est validé en code XHTML Strict par le W3C, et, de plus, il existe des raccourcis clavier pour retourner en haut de la page.

C'est pourquoi je vais utiliser la solution de Raphaël.
Smiley smile

Antoine
antoinediss a écrit :

Cependant, je crois qu'il y a des erreurs dans tes propos.


Ben dans ce cas ce serait sympa de me dire lesquelles d'erreurs Smiley cligne

En prenant soin de faire les tests bien sur Smiley cligne
Pour conclure ce post,

Je vous remercie TOUS d'avoir contribuer à la résolution de ce problème d'ancrage. L'ancre "id" semble la plus appropriée, même si il peut y avoir des problèmes d'incompatibilité avec les versions antérieures à IE 6. En effet, qui de nos jours est connecté sur le web avec un navigateur non mis à jour? Je pense que la réponse est "personne" Smiley biggol .

Encore merci à TOUS! Smiley cligne
Bonjour,

Rapidement : antoinediss, clb56 : la gestion des ancres "id" et "name" dans IE est beaucoup plus complexe que cela. Dans un souci d'accessibilité et pour aller au plus direct et au plus simple, privilégier les ancres ayant pour syntaxe :

<a name="foo" href="#"></a>


La présence du href est liée à la non reconnaissance dans de nombreux cas d'une ancre par IE en l'absence de cet attribut, lors de la tabulation (reprise de la tabulation après le lien ayant menu à cet ancre, et non au lien suivant l'ancre).
Modifié par Laurent Denis (05 Feb 2006 - 09:52)
Salut à tous, Smiley smile

Moi perso, j'utilise pour mon site web la méthode suivante,

à l'endroit où je veux que ça pointe, je mets :
<a name="haut_page"></a>

et tout en bas de la page, le lien qui permet d'y aller sous cette forme :
<a href="#haut_page" class="l1">Haut de la page</a>

ça marche très bien sous IE6, Firefox et Opera (je n'ai pas IE<6 pour tester Smiley cligne ) et c'est valide xHTML 1.0 Strict Smiley biggrin

Note : après avoir vérifié ce que je viens de dire Smiley cligne j'ajouterai un petit bémol, sous Opera 8.5 (la version que j'ai quoi), cela ne fonctionne q'1 seule fois. Si on s'amuse à redescendre la page et à faire cliquer de nouveau sur "haut de page" le navigateur dit non Smiley biggol , alors que sous les autres navigateurs no problemo. Petit bug d'Opera ??? Smiley lol


Mais si je te suis bien Laurent Denis, je devrais plutôt coder la première partie comme ça alors :
<a name="haut_page" href="#"></a>

C'est bien ça ?
Modifié par Pandore (05 Feb 2006 - 12:42)
Alors là, je suis étonné ! Je croyais que l'attribut name n'était pas conforme xhtml 1.0 Strict Smiley sweatdrop Il me semble que j'avais fait l'expérience et que c'est ainsi que j'avais découvert qu'il fallait remplacer par "id", ou à la limite, mettre les deux.

Chez moi, le code suivant ne fonctionne pas sous IE 6.0 (SP2)

<body id="haut">
[...]
<a href="#haut">Haut de page</a>


Par contre, ça fonctionne si je me sers de l'id qui qualifie le logo (c-a-d un div)

EDIT: le problème dans ce dernier cas, c'est que IE me renvoie non pas à la hauteur du logo mais juste en dessous Smiley biggol .

Dorian
Modifié par dodormir (05 Feb 2006 - 14:36)
En réponse à M. CLB56,

Vous avez écrit:
#top fonctionne avec IE sans ancrage. Mais pas avec FF et Opera.
Ceci est faux.

Si je tape le code suivant:
<body id="top">
...
<a href="#top">retour en haut de page</a>

Il fonctionne avec les navigateurs Internet suivants:
- Netscape Navigator 6,
- Internet Explorer 6,
- Opéra 7.5,
- Safari... (je n'ai pas essayé sur FireFox)

Mais si je tape le code suivant:
<body>
...
<a href="#">retour en haut de page</a>

Il fonctionne avec les navigateurs Internet suivants:
- Netscape Navigator 6,
- Internet Explorer 6,
- Safari... (je n'ai pas essayé sur FireFox)

Concernant le code suivant cité par M. CLB56:
<a id="ancre" />
C'est du chinois! Smiley langue
Pandore a écrit :

Salut à tous, Smiley smile

Moi perso, j'utilise pour mon site web la méthode suivante,

à l'endroit où je veux que ça pointe, je mets :
<a name="haut_page"></a>

et tout en bas de la page, le lien qui permet d'y aller sous cette forme :
<a href="#haut_page" class="l1">Haut de la page</a>

ça marche très bien sous IE6, Firefox et Opera (je n'ai pas IE<6 pour tester Smiley cligne ) et c'est valide xHTML 1.0 Strict Smiley biggrin

C'est pas validé en XHTML 1.0 Strict! Smiley eek
Voilà ce qui est écrit sur le site du W3C:

4.10. The elements with 'id' and 'name' attributes
HTML 4 defined the name attribute for the elements a, applet, form, frame, iframe, img, and map. HTML 4 also introduced the id attribute. Both of these attributes are designed to be used as fragment identifiers.

In XML, fragment identifiers are of type ID, and there can only be a single attribute of type ID per element. Therefore, in XHTML 1.0 the id attribute is defined to be of type ID. In order to ensure that XHTML 1.0 documents are well-structured XML documents, XHTML 1.0 documents MUST use the id attribute when defining fragment identifiers on the elements listed above. See the HTML Compatibility Guidelines for information on ensuring such anchors are backward compatible when serving XHTML documents as media type text/html.

Note that in XHTML 1.0, the name attribute of these elements is formally deprecated, and will be removed in a subsequent version of XHTML.

C'est écrit en anglais. Pour ceux qui ne comprenne pas, veuillez utiliser un traducteur en ligne. Smiley lol
Bonjour,

Encore une fois : l'attribut name de l'élément a est valide XHTML1.0 strict, transitional et frameset. Son usage en doublon de l'attribut id fait partie des recommandations de compatibilité HTML de cette spécification. La syntaxe la plus conforme en XHTML1.0 traité en tant que HTML est :
<a name="foo" id="foo"></a>


Attention : en XHTML1.0, cet attribut est déprécié, ce qui signifie:
- qu'il figure toujours dans la spécification et dans la DTD
- que son usage est donc toujours valide
- mais qu'il est appelé à devenir par la suite obsolète, c'est à dire à disparaître (et donc à devenir invalide) dans une spécification ultérieure.

De fait, c'est en XHTML1.1 et au-delà que l'attribut name de l'élément a est invalide.
Modifié par Laurent Denis (06 Feb 2006 - 17:01)
antoinediss a écrit :

C'est écrit en anglais. Pour ceux qui ne comprenne pas, veuillez utiliser un traducteur en ligne. Smiley lol


Merci d'éviter ce type de remarque. On pourrait aisément te signaler que tu cites un texte que tu n'as pas compris toi-même. Smiley rolleyes
M. DODORMIR a écrit,

dodormir a écrit :

Chez moi, le code suivant ne fonctionne pas sous IE 6.0 (SP2)

<body id="haut">
[...]
<a href="#haut">Haut de page</a>


Par contre, ça fonctionne si je me sers de l'id qui qualifie le logo (c-a-d un div)


C'est plutôt bizarre! Smiley confus
Je ne crois pas qu'il existe, à jour d'aujourd'hui, une SP2 pour IE6.
En effet, si je vérifie ma version qui est mise automatiquement à jour en ligne, je lis:
Internet Explorer
Version: 6.0.2800.1106IC
Mises à jour: SP1;Q833989;Q823353;Q903235;

Je pense que ton système d'explotation est XP version SP2
(Pour vérifier tu vas dans Démarrer, Exécuter et tu tapes winver).
Le système d'expoitation n'est pas le navigateur Internet!

Vérifie la version de ton navigateur Internet en cliquant sur l'onglet ? situé en haut à droite, puis cliques sur A propos d'Internet Explorer.
Je pense que tu dois être avec une version IE5.5.
Tiens moi au courant. Smiley cligne

Amicalement,
Antoine
antoinediss a écrit :

Je ne crois pas qu'il existe, à jour d'aujourd'hui, une SP2 pour IE6.


Il s'agit de la version spécifique d'IE6 pour Windows XP SP2, qui ajoute le blocage des popups.
M. Laurent DENIS a écrit un code validé en XHTML 1.0 Strict,

<body>
<p><a name="top" id="top"></a></p>
...
<p><a href="#top">retour en haut de page</a></p>

Ce code est juste, mais je ne comprends pas pourquoi, <body name="top" id="top"> n'est pas valable! Smiley decu

Merci Laurent! Smiley cligne
Pages :
Sujet clos
Aller à