Positionnement minimal CSS

Version imprimable

11/05/2012, 14h22
Jeremylgx

Positionnement minimal CSS

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 ?
11/05/2012, 15h19
Invité

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

Citation:

Envoyé par Jeremylgx

position fixe (top: 20px par exemple)
11/05/2012, 15h37
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.

Bonjour,

Par exemple si on ce genre de structure :

Code:

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:

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;
}

14/05/2012, 11h24
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.
15/05/2012, 19h09
NoSmoking

Bonjour,

Citation:

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 ;)