18041 sujets

Questions générales et questions de débutants

[RESOLU] Problème ancres nommées sous Safari et Chrome

Bonjour à tous !

Je suis graphiste webdesigner et je suis en train de réaliser mon nouveau site web.
Je bloque sur un problème que je retrouve seulement sous Safari et Chrome (!)
en effet mes ancres nommées ne fonctionnent pas avec mon script jquery pour adoucir le défilement mais fonctionne sous IE9 et Mozilla, j'ai beau retourner le problème dans tout les sens je ne parviens pas à trouver d'où provient le problème... MEs compétences en intégration trouvent leurs limites...

Le lien vers mon site en construction



Merci par avance à tous pour votre aide...
Modifié par ynk9 (20 Jul 2011 - 14:00)
Bonsoir à toutes et à tous,

personnellement, je n'utilise jamais les ancres dans une page HTML car à chaque fois que l'on clique sur une de ces ancres, il y a un stockage de la position dans l'historique.

Et comme j'utilise la flèche "backward" du navigateur cela implique de cliquer un nombre très important de fois pour revenir en arrière. Donc je suis contre !

Je préfère une présentation lisible, même longue, que des débranchement dans tous les sens. A la longue, on s'y perd !

@+
Modérateur
Ca lu tout le monde,

@ynk9 :
1. Je te déconseille de faire du html5. Pour rappel, le choix d'un doctype n'est pas en fonction de la mode, mais suivant les besoins de l'application que l'on développe.
2. Bien que le html 5 ait une syntaxe très permissive, je crois que pour le coup ta page n'est pas valide.
3. Je t'invite à oublier temporairement DW. Utilise le bon vieux Notepad++ pour te faire la main sur un ou deux sites que tu feras. Les grossières erreurs que je vois, disparaîtront.
4. Aussi je t'invite à oublier temporairement la surcouche JS ou autre langages dynamiques et concentre toi sur html et CSS. Un bon site web doit fonctionner sans le javascript ou autres fantaisies plus exotiques.

@Artemus24 : Je ne suis pas tout à fait d'accord avec toi. Je pense que tu oublies que les liens d'évitement sont pas mal dans la plupart des cas.

@Mabelle : +1
Modifié par niuxe (18 Jul 2011 - 07:53)
Tout d'abord merci à tous pour votre réactivité.
Je vais tester tout ça dans la journée, je reviendrais poster les résultats qu'ils soient bons ou mauvais.

Niuxe tu parles de "grossières erreurs" de quoi parles-tu plus exactement ?
Mon site fonctionne sans javascript, les ancres répondent bien sous n'importe quel navigateur... Je pense que le problème doit provenir de mon css...

Mabelle : pour ce qui est des "<td>" j'avais lu ça sur un forum pour me sortir de ce problème mais soit j'ai mal compris soit c'était de l'ironie que je n'ai pas compris non plus...

Merci en tout cas !
Modifié par ynk9 (18 Jul 2011 - 08:48)
Les <td> sont des éléments de tableaux, donc à priori aucune incidence sur le fonctionnement d'une ancre.

La première chose à faire est de vérifier que les ancres fonctionnent (ou pas) sans JS.

Essaye également de donner des nom en lettre pour tes ancres.
Laurie-Anne a écrit :


La première chose à faire est de vérifier que les ancres fonctionnent (ou pas) sans JS.


Certainement une bonne piste de solution, car en testant chez moi, les ancres fonctionnent très bien avec Safari, sans javascript.

ps. il y a une faute dans l'adresse de ton site.
largowin a écrit :


Certainement une bonne piste de solution, car en testant chez moi, les ancres fonctionnent très bien avec Safari, sans javascript.

ps. il y a une faute dans l'adresse de ton site.


Merci à tous pour votre aide.
J'ai testé également sans le javascript et ça fonctionne bien. Seulement j'ai testé plusieurs scripts utilisés sur différents sites qui fonctionnent parfaitement sous safari et chrome mais lorsque je les test sur mon site, ça ne fonctionne pas...
Je me répète mais, ne pensez vous pas que le problème provient de mes CSS ?
Bon j'ai validé mon code par le validator W3C et j'ai fait quelques retouches comme vous me l'avez préconisé mais toujours rien Smiley decu
Je commence à désespérer... Personne n'aurait une idée ?
Modérateur
voici un code qui fonctionne sur tous les navigateurs passés, présents et futurs :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <title><!-- Insert your title here --></title>
    <style type="text/css">
        body{height:5000px;}
        #ancre{margin-top:2000px;}
    </style>
</head>
<body>
    <p><a href="#ancre">aller à l'ancre</a></p>
        
    <p id="ancre">voici l'ancre</p>
</body>
</html>
niuxe a écrit :
voici un code qui fonctionne sur tous les navigateurs passés, présents et futurs :


Merci Niuxe mais le script pour l'adoucissement du défilement ne fonctionne pas non plus avec Safari et Chrome ... Smiley ohwell
Modifié par ynk9 (20 Jul 2011 - 00:58)
Bonjour à tous !

Niuxe je me suis servis de ton code et après avoir analysé tout ça je me suis rendu compte que Safari et Chrome ne prennent pas en compte un Body avec un Height en % et mon Height était à 100% du coup le scroll restait sur place car pour lui la page était entière affiché à l'écran donc pas de possibilité pour lui d'atteindre l'ancre !

Ça fait plaisir de s'en sortir après tout le temps que j'ai passé dessus !

Merci à tous en tout cas pour votre aide vraiment !

A bientôt
Modérateur
bonjour,

Je suis étonné que ça fonctionne pas. Essaie ceci sur Safari, Chrome :

html,body{height:100%}


Là sur Chrome 12 ça fonctionne.
Sujet clos
Aller à