[html/css] lien vers une ancre dans un div

Fermé

rbn - 27 juin 2007 à 15:58
rbn - 28 juin 2007 à 15:40

Bonjour,
Je veux faire une page html avec des liens vers des ancres dans un div, quand je clique sur un de ces liens ça fait remonter toute la page au lieu de juste faire scroller à l'intèrieur du div, y a t'il un moyen d'éviter ça ?

Voici le code :

<html>
<head>
<title>test</title>
</head>
<body scroll=no>
<a href="#C4">Chapter 4</a><br />
<a href="#C17">Chapter 17</a><br />
<a href="#C18">Chapter 18</a><br />

<div id="layerFiche" style="position:absolute; left:15px; top:90px; width:700px; height: 675px; z-index:1; overflow: auto; background-color: #CCCCCC;">
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C17">Chapter 17</a></h2>
<p>This chapter explains ba bla bla</p>
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br />
<h2><a name="C18">Chapter 18</a></h2>
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html>

A voir également:

[html/css] lien vers une ancre dans un div
Créer un lien pour partager des photos - Guide
Lien url - Guide
Verifier un lien - Guide
Virginie organise un rallye avec 30 équipes. elle veut créer un code pour désigner chaque équipe. elle a commencé à la main, mais elle voudrait le faire calculer à l'aide d'une formule. proposez une formule comportant une seule fonction et à recopier vers le bas dans la colonne a du fichier à télécharger. quelle formule sera en a9 ? ✓ - Forum Programmation
Editeur html - Télécharger - HTML

6 réponses

Réponse 1 / 6

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
27 juin 2007 à 17:39

c'est beaucoup plus clair mais beaucoup moins simple !

tu peux essayer avec {position:fixed} mais comme IE ne le supporte pas il faut un hack.
j'ai fais un essai à partir de cet article, en creusant un peu ça doit être exploitable.

Réponse 2 / 6

rbn
28 juin 2007 à 15:40

merci beaucoup le positon:fixed a bien corrigé le problème pour firefox, c'est déjà ça

Réponse 3 / 6

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
27 juin 2007 à 16:46

salut,

essaie avec

overflow: scroll;

Réponse 4 / 6

rbn
27 juin 2007 à 16:54

merci mais ça donne toujours le même comportement, ça fait remonter le haut au lieu de juste faire scroller dans le div sous internet explorer 7 et mozilla firefox 2

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
27 juin 2007 à 17:04

attends je comprends pas ce que tu veux.
je viens de tester ton code. quand je clique la page ne bouge pas et le texte dans le <div> remonte en haut du <div>.
ce n'est pas ce que tu veux ?

Réponse 6 / 6

rbn
27 juin 2007 à 17:24

si c'est bien ça que je voudrais systématiquement
le problème c'est que si la fenêtre n'est pas en plein écran ou si tu es en petite résolution le haut de page remonte aussi (au moins sur ie7 et firefox 2) ce qui fait que le "menu" (Chapter 4,Chapter 17,Chapter 18) n'est plus visible
j'espère que le problème est plus clair comme ça?

Discussions similaires

"Aucune application permettant d'ouvrir cette URL"

lien copié

Rajout de lien sur plusieurs pages

Colis en cours de transport vers votre site de livraison ?

ne pas utiliser la souris mais le clavier