28172 sujets

CSS et mise en forme, CSS3

Position "fixed" et responsiv design

Bonjour,

Utilisant la feuille Knacss, je voudrais réussir à mettre ma barre latérale de gauche en position "fixed". Mais ça cafouille quand je réduis la taille de l'écran, j'ignore comment se gère ce type de position selon les différents types de media.
Comme la position "fixed" sort l'élément du flux, je me demande s'il ne faut pas la supprimer quand la taille de l'écran est inférieur à 768 px.

Edit : les CSS media queries ne gèrent pas le comportement des éléments HTML, donc c'est niet pour position:fixed Smiley ohwell

Edit 2 : ah peut-être qu'une solution se trouverait bien dans le reset de la position en "static"
Modifié par Interned (08 Oct 2012 - 22:39)
Bonjour,

c'est effectivement une idée.

Tu peux peut-être te pencher sur les layouts off-canvas, qui nécessitent de gérer un peu d'interaction mais sont des solutions agréables à utiliser !

µUne version plus simple existe aussi, bien documentée.

Good luck !
Bonjour Ten,

Merci pour tes liens, je vais les consulter.

J'ai toutefois réussi à gérer ce type de position avec Chrome (enfin webkit, j'imagine que c'est idem sous Safari), ça marche nickel avec la solution de remettre "static" dans les différentes résolutions inférieures à 768px.

En revanche, gros souci du côté de Firefox, j'en suis très étonné Smiley ohwell . Je suis surtout surpris que dans une résolution d'écran de bureau mon contenu principal passe sous la barre latérale de gauche. Smiley hum

Du côté d'IE (IE 8 que j'ai testé), je n'en parle même pas Smiley rolleyes ... Test non réalisé sur Opéra.

Mes trois blocs latéraux ont des dimensions fluides mais remplacer ces dernières par des tailles en px ne change pas grand chose apparemment.

Exemple de code :
<!DOCTYPE html>
<html class="no-js" lang="fr">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="knacss.css" media="all">
	<!--<STYLE type="text/css">
  @media (min-width: 641px) {
	header{max-width: 20em;}
}
  </STYLE>-->
  </STYLE>
</head>

<body class="mw960p center ">

<div id="main" class="row">

<header class="col w20" style="background-color: red; position: fixed;height:100%;">
	<p>aside</p>
				<p>aside</p>
				<p>aside</p>
</header>

<div id="content" role="main" class="col w60" style="background-color: green;">
		<article class="art1 w50" style="background-color: #ccc;">
						<p>Lorem Elsass ipsum rechime amet non Choucroutewurscht ?</p>
						<p>Yeuh non che suis au rechimehym avec Chulien. Tiens, un Picon sur le comptoir.</p>
						<p>Allez tchao bissame !</p>
						</article>
		<section class="main row gut" style="background-color: brown;">
			<article class="art1 w50 col left" style="background-color: #ccc;">
						<p>Lorem Elsass ipsum rechime amet non Choucroutewurscht ?</p>
						<p>Yeuh non che suis au rechimehym avec Chulien. Tiens, un Picon sur le comptoir.</p>
						<p>Allez tchao bissame !</p>
						</article>
			<article class="art2 w50 col left" style="background-color: #ccc;">
						<p>Lorem Elsass ipsum rechime amet non Choucroutewurscht ?</p>
						<p>Yeuh non che suis au rechimehym avec Chulien. Tiens, un Picon sur le comptoir.</p>
						<p>Allez tchao bissame !</p>
						</article>
			<article class="art3 w50 col left" style="background-color: #ccc;">
						<p>Lorem Elsass ipsum rechime amet non Choucroutewurscht ?</p>
						<p>Yeuh non che suis au rechimehym avec Chulien. Tiens, un Picon sur le comptoir.</p>
						<p>Allez tchao bissame !</p>
						</article>
		</section>	

</div>

<aside id="sidebar" class="col w20" style="background-color: cyan;">
<p>aside</p>
				<p>aside</p>
				<p>aside</p>
</aside>

</div>

<footer class="line mod" style="background-color: pink;">
	<p>footer</p>
</footer>
	
</body>
</html>

Modifié par Interned (09 Oct 2012 - 13:32)
Sujet clos
Aller à