High-Tech Santé Médecine Droit-Finances

IMPÔTS 2010

Agissez maintenant !

Rechercher : dans
Par :

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

Dernière réponse le 28 jun 2007 à 15:40:33 rbn, le 27 jun 2007 à 15:58:17 
 Signaler ce message aux modérateurs

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>


Configuration: Windows XP
Internet Explorer 7.0

Meilleures réponses pour « [html/css] lien vers une ancre dans un div » dans :
Enlever le soulignement sous les liens en HTML/CSS VoirPar défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...
Enlever la bordure sur une image dans un lien en HTML/CSS VoirVous avez fait une image cliquable en mettant une balise IMG au sein d'un lien et le navigateur vous affiche un cadre ou plus exactement une bordure autour de l'image. Il existe deux façons de supprimer cette bordure...
Faire un lien vers sa configuration PC VoirIl est pratique de pouvoir donner un lien de sa configuration PC pour montrer sa configuration à ses amis ou pour mieux se faire aider quand on cherche un pilote après une réinstallation de Windows. Allez sur le site de Ma-Config.com :...
Faire un lien vers CommentCaMarche VoirVous êtes le bienvenu pour faire un lien vers CommentCaMarche.net ! Vous avez l'autorisation de faire pointer un lien vers la page d'accueil de CommentCaMarche.net ou bien directement vers un des articles. Si vous voulez agrémenter le lien d'une...
Posez votre question Répondre

1

Dalida, le 27 jun 2007 à 16:46:48

Salut,

essaie avec 

overflow: scroll;
[ Mathieu ] 
Il y a surement des pandas pour ne dépendre de rien

   
Répondre à Dalida

2

rbn, le 27 jun 2007 à 16:54:03

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

   
Répondre à rbn

3

Dalida, le 27 jun 2007 à 17:04:09

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 ?
[ Mathieu ] 

Il y a surement des pandas pour ne dépendre de rien

   
Répondre à Dalida

4

rbn, le 27 jun 2007 à 17:24:03

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?

   
Répondre à rbn

5

Dalida, le 27 jun 2007 à 17:39:35
  • +3

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.
[ Mathieu ] 

Il y a surement des pandas pour ne dépendre de rien

   
Répondre à Dalida

6

 rbn, le 28 jun 2007 à 15:40:33

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

   
Répondre à rbn
Posez votre question Répondre
Ils ont besoin de votre aide