18041 sujets

Questions générales et questions de débutants

[résolu] Div et scroll du document

Bonjour à tous, on a du certainement poser 100* cette question mais je la pose à nouveau :
J'ai sur un site une colonne à gauche et une colonne au centre. Dans la colonne de gauche, en dessous d'une image (générée dynamiquement par php), j'ai une div avec des liens vers des ancres de la colonne du milieu.

J'aimerai que la div avec les liens reste en haut de cette colonne, mais qu'elle se déplace selon le scroll effectuée avec lascenceur du navigateur.

J'ai beau fouiller la css, essayer tous les positionnement, rien y fait Smiley langue .

Je vous remercie pour vos réponses

Demi Cerveay
Modifié par Demi Cerveau (25 Sep 2007 - 19:05)
Salut,

Ce qui serait bien, c'est que tu fournisses une page en ligne ou au moins l'intégralité de ton code html et css, et éventuellement des captures d'écrans complémentaires pour qu'on puisse juger du problème et t'y répondre. Smiley cligne
je n'avais pas pensé au code mais le voici :


<table id="colonegauche">
<tr><td><IMG SRC="photos/autres/7p.jpg" BORDER="0" width="200" height="68"></td></tr>
<tr>
<td width="100%" style="border: 0px solid red" height="100%">
<div style="position: relative; width:100%; height: 100%;  border: 1px solid green;"> 
<div style="position:fixed; top:0; left:0; border: 1px solid blue;">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%"><a href="#1">EXPOSITION DU 30 MARS AU 7 NOVEMBRE 2007 </a></td>
</tr>

<tr>
<td width="100%"><a href="#2">introduction</a></td>
</tr>

<tr>
<td width="100%"><a href="#3">Présentation de l'exposition</a></td>
</tr>

<tr>
<td width="100%"><a href="#4">Corne de licorne</a></td>
</tr>
<tr>
<td width="100%"><a href="#5">un résumé</a></td>
</tr>
<tr>
<td width="100%"><a href="#6">rencontres</a></td>
</tr>
<tr>
<td width="100%"><a href="#7">dans une peau</a></td>
</tr>
<tr>
<td width="100%"><a href="#8">un évenement</a></td>
</tr>
<tr>
<td width="100%"><a href="#9">ancre à chacun</a></td>
</tr>
<tr>
<td width="100%"><a href="#10">zone upload</a></td>
</tr>
<tr>
<td width="100%"><a href="#11">un module à voir</a></td>
</tr>
</table>
</div>
</div></td>
</tr>
</table>


la div bordée de bleue devrait bouger selon le scroll, ou du moins ne pas tenir compte de celui-ci

sous ie ça ne fonctionne pas et sous ff, elle s'affiche bien mais prend toute la largeur de l'ecran alors que je veux qu'elle reste dans la colonne "colonnegauche"

Si quelqu'un a une suggetion, je suis preneur

D'avance merci pour vos réponses
de plus, normalement, la div en relative devrait encapsuler la div que j'appelerais "flottante" (je ne connais pas bien la terminologie) mais sous ff ça ne se passe pas ainsi

Peut-etre en passant par js, mais comment calculer la hauteur du scroll du document en js?

Demi Cerveau, débutant de pere en pair
j'ai trouvé comment surveiller le scroll en javascript :



window.onscroll = function()
{
	if (suivre_le_scroll && (isIE || isIE5mac))
	{
		if (isIE5mac) document.getElementById("conteneurmenu").style.visibility="hidden";
		var scrollTop = (document.documentElement&&document.documentElement.scrollTop
							?document.documentElement.scrollTop
							:document.body.scrollTop);
		document.getElementById("conteneurmenu").style.top = scrollTop + "px";
		if (isIE5mac) document.getElementById("conteneurmenu").style.visibility="visible";
	}
}

j'ai placé ce code dans le <head> du document.
j'ai donc placé la div (contourné de bleu) en absolute pour qu'elle soit encapsulé par celle entourée de vert. je l'ai appelé "conteneurmenu", et tout fonctionne.

Bonne soirée.
Demi Cerveau qui ne sais pas mettre '[résolu]' dans le topic
Sujet clos
Aller à