28172 sujets

CSS et mise en forme, CSS3

Position:fixed sur une sidebar

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 :

<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 class="main-container">
	<article>
	<header>
		<h1>Music Title</h1>
	</header>
	<section>
	<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F75502458"></iframe>
	</section>
	</article>
</div> 




aside{
        position:fixed;
	float:left;
	margin: 1% 5% 0 3%;
}

.main-container{
	position:relative;
	overflow:hidden;
	margin: 2% 5%;
}


Quelqu'un a une idée?? Smiley smile
Modifié par Pyxel (24 Jan 2013 - 08:45)
</ nav> n'est pas bien fermée ici, mais c'est uniquement parce que j'ai merdé dans le copiage du code sur le forum.
Modifié par Pyxel (23 Jan 2013 - 21:51)
Il faut que tu ajoutes un z-index sur ton aside et ton float n'est pas utile.


aside{
        position:fixed;
        top:0;
        left:0;
        z-index:20;
	margin: 1% 5% 0 3%;
}

Modifié par fabcreaweb (24 Jan 2013 - 00:15)
Merci pour ta réponse, cependant ça ne fonctionne toujours pas... Smiley decu

Cette fois-ci la sidebar passe par dessus le contenu. Or je voudrais que la sidebar reste a gauche et qu'elle soit en position fixe, et le contenu à droite. Smiley ohwell
Bonjour,

Premièrement : pas besoin de float sur un élément positionné.

Ensuite, il faut savoir que la position fixe - ou absolue, ainsi que les flottants - retire ton élément du flux : les autres éléments se placent donc "comme s'il n'était pas là".

Pour palier au problème de chevauchement, il faut donc simuler un espace libre dans le flux pour cet élément : dans ton cas, un margin-left ou padding-left sur ton main-container ayant pour valeur la largeur de ta sidebar. Exemple sur CodePen.

Bon courage !!
Merci, ça marche ! Smiley cligne

En fait je pensais qu'il y'avait un autre moyen pour parvenir à positionner ces 2 éléments qu'avec un padding ou avec un margin, mais visiblement non !
Salut,

il y a bien une solution. Donne des z-index à tous tes éléments positionnés. Ainsi ton aside en position fixed aura un z-index supérieur à celui de ton container qui sera positionné en relative.

Avec cette technique il suffit de donner des z-index aux balises de même niveau.

Ju
Bon en fait ça ne va pas du tout comme solution avec le margin, car quand on redimensionne la fenêtre du navigateur, le contenu de droite repasse encore sur la sidebar...

JulienFouquet, j'ai bien essayé ta solution mais ça ne change rien... dès que je mets ma sidebar en position:fixed, rien ne va plus !
J'ai bidouillé dessus toute la soirée, et je ne suis toujours pas parvenu à résoudre mon problème :
le contenu de droite passe par dessus la sidebar dès qu'on redimensionne le navigateur, comme le montre l'image...

Voici mon nouveau code :

<div class="wrap-aside">
	<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>
		
<div class="wrap-content">
	<div id="content">
		<article>
			<header>
				<h1>Music Title</h1>
			</header>
			<section>
				<p>Du contenu...</p>	
			</section>
			<footer>
				<!-- Sharing options here -->
			</footer>
		</article>
	</div> 
</div>



.wrap-aside{
	position:fixed;
	z-index: 90;
}

aside{
	margin: 20% 0 5% 15%;
}


.wrap-content{
	position:relative;
	width:auto;
	overflow:hidden;
	z-index:80;
}

#content{
	margin: 5% 5% 5% 25%;
}


Une idée ? Smiley ohwell
Modifié par Pyxel (25 Jan 2013 - 11:28)
Salut,

ta sidebar a une largeur fixe et ton contenu a, lui, une marge proportionnelle. A un moment donné les 20% de marge sont plus petit que les XXpx de ton aside. D'où ton problème.

Voir ici pour visualiser.

Ju
A moins d'un rwd poussé où tu auras identifié comme il faut TOUS tes points de rupture, ce genre de position c'est vraiment galère. Je conseillerais plutôt un peu de js pour faire slider une box de navigation ou un truc dans le genre.
Sujet clos
Aller à