Position:fixed sur une sidebar

Version imprimable

Bonjour,

Je souhaite avoir une position fixe sur ma sidebar positionnée à gauche de façon à ce qu'elle reste visible lorsque l'utilisateur déroule le contenu à droite.
Le problème c'est que lorsque que je mets la propriété position:fixed, le contenu passe par dessus la sidebar...

Voici mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <aside> <div id="logo"></div> <nav> <ul> <li><a href="#">Electronic</a></li> <li><a href="#">Dubstep</a></li> <li><a href="#">Indie</a></li> <li><a href="#">Drum n Bass</a></li> <li><a href="#">House</a></li> </ul> </nav> </aside> <div id="content"> <article> <header> <h1>Music Title</h1> </header> <section> <p>Du contenu...</p> </section> <footer>  </footer> </article> </div>
Code:

1 2 3 4 5 6 7 8 9 aside{ position:fixed; margin: 0 5% 0 3%; } #content{ position:relative; overflow:hidden; margin:5% 5% 0 25%; }
J'ai essayé de mettre des z-index mais ça ne fonctionne pas, et avec un un margin ça ne va pas non plus car le contenu de droite vient se mettre sur la sidebar de gauche, dès qu'on redimensionne le navigateur...

Voici une image du problème :
http://img7.imageshack.us/img7/9531/sanstitremmi.png

Quelqu'un a une idée ? :roll:

Ça fonctionne avec un z-index :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>menu fixed</title>
	<style type="text/css">
aside {
        position:fixed;
        margin: 0 5% 0 3%;
        z-index: 2;
}
#content {
        background: red;
        position:relative;
        overflow:hidden;
/*      margin:5% 5% 0 25%; */
}
        </style>
</head>
<body>
<aside>
	<div id="logo"></div>
		<nav>
			<ul>
				<li><a href="#">Electronic</a></li>
				<li><a href="#">Dubstep</a></li>
				<li><a href="#">Indie</a></li>
				<li><a href="#">Drum n Bass</a></li>
				<li><a href="#">House</a></li>
			</ul>
		</nav>	
</aside>
 
<div id="content">
		<article>
			<header>
				<h1>Music Title</h1>
			</header>
			<section>
                                <p>Du contenu...</p>
			</section>
			<footer>
				<!-- Sharing options here -->
			</footer>
		</article>
</div>
</body>
</html>

25/01/2013, 11h21
propsleps

Malheureusement non...,
il y'a toujours le problème : le contenu de droite passe sur la sidebar dès que je redimensionne le navigateur comme le montre l'image.

:?
26/01/2013, 16h51
Muchos

Citation:

Envoyé par propsleps

Malheureusement non...

Malheureusement oui ò_ó
(Ça ne fait pas avancer le débat, je vous l'accorde)