Discussion :

[Jeremylgx]

Bonjour à tous,

J'aimerai que mon menu en sidebar présent normalement dans le flux, prennent une position fixe (top: 20px par exemple) en descendant la page de façon à ce qu'il accompagne toujours le contenu. J'ai déjà vu ça sur certains sites mais je n'arrive pas à retrouver ou à décrire cette technique. Vous voyez ce que je veux dire ?

[Invité]

Tu donnes toi-même la réponse :

position fixe (top: 20px par exemple)

[Jeremylgx]

Oui, mais si je mets directement fixe, il sera toujours à top: 20px par exemple et se superposerait à mon header. Alors que je voudrais qu'il prenne cette position qu'une fois que j'aurai descendu ma page à son niveau.

[elfamine]

Bonjour,

Par exemple si on ce genre de structure :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div id="page">
<div id="sidebar">
<ul id="menu">
 <li>Link here #1</li>
 <li>Link here #2</li>
 <li>Link here #3</li>
 <li>Link here #4</li>
 <li>Link here #5</li>
</ul>
</div>
<div id="content">
<-- ton contenu 
<div>
</div>

alors le CSS devrait etre quelque chose dans ce genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#page{
	width: 960px;
	margin: auto;
	position: relative;
}
#content{
	width: 700px;
	margin: 10px;
}
#sidebar {
  width: 220px;
  position: fixed;
  margin: 10px;
  padding-left :700px;
}

[Jeremylgx]

Merci de ta réponse Melcain. J'ai essayé ta solution sans succès. Mon sidebar se met en position fixe mais par rapport au body.

Edit : En fait, il se fixait par rapport au body parce que j'avais défini top et right. Mais le résultat n'est pas exactement ce que j'essaie d'expliquer. Je voudrais que ce menu agisse normalement et remonte avec le contenu en descendant dans la page. Jusqu'à ce qu'il arrive au niveau du header et qu'il reste à cette position.

[NoSmoking]

Bonjour,

Je voudrais que ce menu agisse normalement et remonte avec le contenu en descendant dans la page. Jusqu'à ce qu'il arrive au niveau du header et qu'il reste à cette position.

sans javascript point de salut, alors il te faut mettre les doigts dans le clavier