[Résolu] Renvoi vers haut de page <div id="top"></d

Bonjour,

De façon à créer à la fois une marge supérieure et une ancre de retour en haut de page, je commence toutes les pages d'un site par :

<div id="top"></div>

Et, dans la feuille de style :
div#top {height: 20px; margin: 0:}

Et, quelque part en bas de page
<a href="#top">HAUT DE PAGE</a>

Bon, tout ça est très simple, et marche parfaitement sur Mozilla, IE, ICab, etc., avec toutefois un caprice énervant de IE 5 pour MacIntosh.

Le renvoi en haut de page renvoie sur le bas du block "top", donc la marge haute de 20px est bouffée.

Bien sûr, je peux sans doute m'en sortir avec un top au dessus du top, ça devrait marcher.
<div id="surtop"></div>
<div id="top"></div>

Et, dans la feuille de style :
div#surtop {display: none;}
div#top {height: 20px; margin: 0;}

Mais je déteste le code inutile et si quelqu'un a une idée plus simple, MERCI d'avance.

Dans ce post,

jb_gfx a écrit :

Concernant les ancres, j'ai pris l'habitude de mettre :

<a href="#top">haut de page</a>

Ce n'est pas la peine de définir l'ancre "top" quand on utilise ce nom. Et ça fonctionne sur tous les navigateurs que j'ai testé : NS4, 6, 7, 8, Opera 7.x, IE 4, 5 , 6, Mozilla et FireFox.

<a href="#">haut de page</a>

Ne fonctionne pas partout (c'est dans Opera que ça pose problème, si j'ai bonne mémoire).

Comme tous devraient le faire, j'ai utilisé l'outil Recherche.

Mots recherchés : id="top"
Rechercher dans : Posts
Par date : N'importe quand

L'outil Recherche est votre amis, mangez-en !
Modifié le 19 Dec 2004 - 01:14

Oui, excuse , j'aurais dû faire une recherche, mais ce post ne répond pas vraiment à ma question, car, sans le faire exprès je faisais comme jb_gfx,

<a href="#top">

si ce n'est que je crée en plus une ancre qui en plus me sert de marge.

Bref, ce post ne résout pas le caprice de IE/Mac (qu'il est quand même dur ne négliger), MERCI envore de vos suggestions futures.

Je ne vois aucune raison d'utiliser un <div> simplement pour créer une marge. C'est aussi utile qu'un "spacer.gif". Il y a certainement un élément dans ta page qui peux reçevoir un margin-top. Sinon, un body { margin-top: value; } remplira très bien ce rôle.

Pour les ancres, il est probable que tu utilises des id pour organiser ta page en div. Ces id ainsi définies sont autant d'ancres potentielles à pointer, pour de tels besoins il faut juste les pointer.
Si tu as définie une partie de ta page comme "div id=contenu" tu peux l'appeler par un lien a href="#contenu".
Sinon pour la marge il y a forcément un autre moyen comme l'indique Stephan, tous les éléments, même body recoivent des marges.

Merci de vos réponses.

D'accord, c'est pas très joli de commencer par un <div id="top"></div>, ce serait plus pur de faire ça par le margin-top du body, mais je rappelle que mon problème est :
1) de permettre à l'utilisateur de remonter en haut de page tout en conservant la marge du haut :
2) et cela avec tous les navigateurs y compris ceux qui ne sont pas très purs comme IE/Mac.

De ce point de vue, vos réponses (dont je vous remercie encore ) n'apportent rien de nouveau.

Si je résume, en attribuant un margin-top sur ton body et avec un simple <a href="#top"></a>, IE mac renvoit en haut de page mais la marge n'est pas visible ?

Je ne vois vraiment pas pourquoi tu te casses le bicycle avec ça !

Merci de ton suivi,

IE/Mac, c'est chatouilleux.

Le retour <a href="#top"></a> ne fonctionne pas si tu n'as pas créé une ancre.

Je n'en fais pas un drame, mais c'est énervant de voir ta jolie marge de 20px bouffée.

Je pense que la seule solution universelle est celle du double DIV, comme un double spacer, c'est horrible, excusez-moi... Ou peut-être créer un élément invisible dans dans ton div, car IE/Mac a du mal avec les marges des blocks vides, peut-être...

Voilà, j'ai essayé, c'est ça le truc !!!

<div id="top" style="height: la_marge_que_tu_veux; color: #couleur_background"> o</div>

En plus, tu est obligé de rentrer un caractère dans ton DIV, un espace blanc ne suffit pas.
Ce code tout simple me paraît 100 % compatible avec les autres navigateurs.

Par ailleurs, cette discussion n'était qu'un échauffement à côté des gestions des hauteurs avec IE et Mozilla, que je vous réserve pour bientôt.

Et si tu fais ton ancre directement sur le <body id="top"> ?

C'est ce que je fais depuis le début :

<a href="#top">Haut de page</a> avec en haut mon <div id="top">, mais pour IE/Mac il faut mettre quelque chose dans ton DIV pour que la hauteur ou les marges de ton block soient gérées.

Et, si j'ajoute un espace blanc avec le "o", c'est qu'autrement le o vient bouffer un filet à gauche d'une autre couleur, et cela m'évite de paramétrer un margin-left...

Bon, j'ai essayé

<body id="top">

Effectivement, ça marche , mais là où ça se complique, c'est quand ta page est centrée dans un DIV avec background différent de celui du body.

Tu es obigé de créer ta marge du haut avec le margin-top du DIV de centrage, IE/Mac exécute bien, mais maintenant c'est Mozilla/Mac qui se plante en remplissant ta marge avec le background du body...

Donc, ton code marche, mais (sauf erreur de ma part...) pas si tu utilises ce système de page centrée, qui d'ailleurs fait l'objet d'un tuto très intéressant dans votre site, tuto sur lequel j'aurais quelques questions à poser, rapport à la gestion des hauteurs, vous voilà prévenus.

boteha a écrit :

Donc, ton code marche, mais (sauf erreur de ma part...) pas si tu utilises ce système de page centrée, qui d'ailleurs fait l'objet d'un tuto très intéressant dans votre site, tuto sur lequel j'aurais quelques questions à poser, rapport à la gestion des hauteurs, vous voilà prévenus.

On dirait une menace
Modifié le 20 Dec 2004 - 17:11

Disons que, pour Mozilla/Mac et IE/Mac, il faut un peu enrichir le tuto pour s'en sortir plus ou moins bien, j'espère que ma misérable expérience intéressera quelques perfectionnistes, je risque de ne pas avoir le temps d'ouvrir la conférence avant quelques jours, mais à bientôt.