28220 sujets

CSS et mise en forme, CSS3

[Résolu sauf sous IE] Lien interne avec une marge superieure

Bonjour

J'ai un petit problème de lien interne. Je pensais que c'était un problème ultra simple et qui devait se poser souvent, mais je n'ai pas trouvé de solution, ni dans les doc, ni sur les forums. Donc je poste :

J'ai une page avec une zone de titre, un menu a droite et un corps de texte au centre, ultra classique. 


#titrePage{ 
   z-index: 8;
   position: fixed;
   top: 0px; left:200px; right: 0em; height:120px;
   text-align: center;
}

#menu{
   z-index: 10;
   position: fixed;
   top: 0px; left: 0px;  width:200px; bottom: 0em;
}

#corpsDuTexte{
   z-index: 5;
   position: absolute;
   Top: 120px;
   left: 200px;
}


Le corps du texte est découpé en section, chacune identifiée de manière unique. J'ai ensuite mis dans le menu des liens d'acces direct aux sections. 


Menu
    <ul>
        <li><a href="index.php#sectionA">Bla bla</a></li>
    </ul>
...

<h2 id="sectionA"> Section 1 : bla bla </h2>


Le problème est que quand dans le menu je clique sur une section, le titre h2 en question se retrouve tout en haut de page (et non pas en haut de #corpsDuTexte). Il est donc caché par la barre de titre. J'ai le problème sous IE et sous Mozilla. Est-ce normal ?
Modifié par YogaMan (02 May 2005 - 00:41)
Bonjour,
Je crois que c'est le fonctionnement normal de tous les navigateurs...
Je ne vois pas de solutions hélas.
IlSandor.
à YogaMan >>

Ba même si je ne suis, finalement, pas très fana de fixidification pseudo_framique, voici une possibilité qui devrait t' ennamourer :


<div style="background:#ddd; height:200px; width:97%; position:fixed; top:0;">
En tête - 
<a href="#p1">gop1</a> | 
<a href="#p2">gop2</a> | 
<a href="#p3">gop3</a> | 
<a href="#p4">gop4</a> | 
<a href="#p5">gop5</a>
</div>

<p style="padding-top:210px; margin-bottom:-210px; height:1000px;" id="p1">Paragraphe 1</p>

<p style="padding-top:210px; margin-bottom:-210px; height:1000px;" id="p2">Paragraphe 2</p>

<p style="padding-top:210px; margin-bottom:-210px; height:1000px;" id="p3">Paragraphe 3</p>

<p style="padding-top:210px; margin-bottom:-210px; height:1000px;" id="p4">Paragraphe 4</p>

<p style="padding-top:210px; margin-bottom:-210px; height:1000px;" id="p5">Paragraphe 5</p>


Trouvé un peu au hasard après plusieurs questions du même type. A adapter.

++
Modifié par clb56 (01 May 2005 - 21:41)
Merci de vos reponses.

clb56, j'ai essayé ton truc, mais ca ne marche pas avec mon code. Ca laisse des espaces monstrueux.

Sinon, si j'ai posté la question, c'est parce que je pensais qu'il existait une belle solution déjà prévue et toute propre. Comme visiblement ca n'est pas le cas, j'ai une solution (moyennement propre) :

/* dans le fichier CSS : */
#videosPourquoi{ 
   position:relative;
   top:-150px;
}


<!-- Dans le HTML -->
   <H2 >Des vidéos de danse, pourquoi faire ?<span  ID="videosPourquoi"> </span></h2>


Le principe est simple, le span est situé relativement 150px au dessus du titre et c'est vers lui que ce dirigera le href.

Par conte, devinez quoi ? Ca ne marche pas sous IE...
Modifié par YogaMan (02 May 2005 - 00:39)
Moi je ne la trouve pas sale ta solution Smiley cligne
Par contre fait attention à IE c'est une grande partie des utilisateurs du web quand même.

Amicalement,
IlSandor.
Modifié par ilsandor (02 May 2005 - 01:16)
Sujet clos
Aller à