Faire appel à des ancres sous un div en position:fixed

sans qu'une partie du contenu ne reste cachée derrière

24 novembre 2010 à 12:52:23

Bonjour, j'ai un petit souci sur lequel vous pourrez peut-être m'aider.

J'ai un div en position:absolute; sous un autre en position:fixed;.
Lorsque j'utilise un menu pour aller vers une ancre, l'affichage commence tout en haut de la page, sous le bloc en fixed.

Existe t-il un moyen pour demander à ce que l'affichage commence sous le div en position fixed proprement, de sorte que le début du texte ne soit pas caché ?
Parce qu’après y avoir pas mal réfléchi je ne vois pas du tout comment faire.

(Les blocs qui contiennent les ancres ont des hauteurs variables donc je ne peux pas 'tricher' en appelant volontairement des ancres plus haut dans la page)

Merci d'avance, Ceriko.

CSS3/HTML5 -> TP : diaporama original en CSS

pépinovich

3 novembre 2011 à 20:40:27

j'ai exactement le même problème que toi.

Et je n'ai pas de solution (à part recréer le même post :euh:

)

la seule solution j'en ai bien peur et de faire une mise en page avec un tableau, d'autant plus que IE ne comprend pas "position: fixe"
cf: ici

je vais continuer à chercher
bon courage

rigs

3 novembre 2011 à 21:14:36

Citation : pepinovich

d'autant plus que IE ne comprend pas "position: fixe"

Il n'y a que la version 6 qui ne reconnait pas ce positionnement... o_O

pépinovich

3 novembre 2011 à 21:34:12

désolé pour mes exagérations de zéro.

mais je commence à me demander pourquoi on a inventé IE. plus j'avance dans ma découverte de la programmation internet, plus IE pose de problème.

sinon il y a le même probleme ici

GeoffreyZéro

3 novembre 2011 à 23:00:02

IE9 est bien, et on peut avancer sans trop de soucis avec IE7.

Pour le problème des ancres, il n'y a pas d'autre choix que de cibler un id au dessus, quitte à rajouter des éléments.

Bien-sûr, il y a aussi une alternative en Javascript : détecter la position de l'élément dans la page et faire défiler la fenêtre jusqu'à cette hauteur, en ôtant les pixels nécessaires. On peut même animer le défilement (parfois un peu lourd/lent suivant le contenu de la page).

rigs

3 novembre 2011 à 23:25:43

Citation : pepinovich

désolé pour mes exagérations de zéro.
mais je commence à me demander pourquoi on a inventé IE. plus j'avance dans ma découverte de la programmation internet, plus IE pose de problème.

IE n'affiche pas la même chose que les autres ?
Tu veux progresser ?
Alors n'écoute pas ceux qui accuse IE dès qu'ils ont un problème (solution de facilité), remets-toi en cause (enfin ton code ^^), tu trouveras tes erreurs et tu progresseras.

Ok ie6 est a mettre au oubliette.
IE7 ? quelque soucis contournables.
IE8 franchement, pas tellement plus mauvais que les navigateurs sortis à la même époque.
IE9, idem.

P.S: me suis pas encore penché sur ton souci mais le post dont tu donne le lien date de 2006 !

Edit : j'ai regardé un peu le schmilblik. En reprenant le code html du post que tu avais déterré je te propose cette solution.
Reste a voir si j'ai bien compris ce que tu recherchais :-°

le code html auquel il faudra ajouter du contenu aux paragraphes si tu veux voir l'effet

<body>
<div id="header">
 p>headerfixe headerfixe headerfixe headerfixe headerfixe headerfixe headerfixe headerfixe headerfixe headerfixe headerfixe headerfixe
     .....
     
     headerfixe headerfixe headerfixe headerfixe headerfixe headerfixe headerfixe headerfixe headerfixe headerfixe headerfixe .</p>
</div>

<div id="global">
    <h3>BONJOUR !!!</h3>
    <p>blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
     .....
     
     blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla .</p>
    
    <p><a href="#A1">Ancre1</a> / <a href="#A2">Ancre2</a> / <a href="#A3">Ancre3</a> </p>
    
    
    <h4 id="A1">Ancre1</h4>
    <p>blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla.....
    
     blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla .</p>
    
    <h4 id="A2">Ancre2</h4>
    <p>blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
    .....
     blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla .</p>
     
    <h4 id="A3">ancre3</h4>
    <p>blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
    .....
     blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla .</p>
</div>
</body>

le css correspondant

html, body {
	overflow:hidden;
	 margin:0; 
	 padding:0}
#header{
	position:fixed;
	overflow:auto
	height:200px;
	top:0;
	left:0;	
	right:0;
	}
#global{
	position:fixed;
	overflow:auto;
	background-color:#39C;
	top:200px;
	left:0;
	right:0;
	bottom:0;
	}

pépinovich

4 novembre 2011 à 0:45:01

Citation : Geoffrey-Zéro

Pour le problème des ancres, il n'y a pas d'autre choix que de cibler un id au dessus, quitte à rajouter des éléments.

merci geoffrey je crois que je vais faire ça en attendant de plonger dans l'océan java

la solution de candygirl dans l'autre post que j'ai mis en lien me parais assez obscure.

merci rigs ! il est un peu tard pour decripter ton code, je vais essayer ça demain.

Citation : rigs

Ok ie6 est a mettre au oubliette.
IE7 ? quelque soucis contournables.
IE8 franchement, pas tellement plus mauvais que les navigateurs sortis à la même époque.
IE9, idem.

ok je fait mon mea-culpa

; ce qui m'ennuie le plus, c'est que la plupart des tuto n'explique pas toutes les solutions. on apprend qqch puis il faut aller chercher ailleurs une solution pour IE.

si vous êtes curieux je vous remet les images que j'ai envoyé dans le post de 2006 (avec en prime la bonne 2em image

)

j'ai donc rajouté le code :

.ancre {
padding-top:100px;
position:relative; top:-100px;
margin-bottom:-100px;
}

l'ancre arrive parfaitement en bas du header (titre+menu=100px)
et l'ancre passe par dessus le header quand on bouge la page:

MERCI!

pépinovich

10 novembre 2011 à 12:09:06

merci rigs, je n'ai pas l'effet escompté avec ta solution.
je vais faire du bidouillage avec des <br />

bonne journée !