5568 sujets

Sémantique web et HTML

Problème width en % quand la div est en position:fixed

Bonjour,

j'ai créé un design avec un avec un header, un container qui comprend un bloc menu en float left et un bloc content en float right.
J'ai voulu régler la taille des blocs en pourcentage (comme dans le tutoriel de création de site one page de cratiq.fr) avec 33% pour le #left et 66% pour le #right. J'ai donné une largeur à l'élément parent (container), tout va bien.

Par contre quand je passe le #left en postion:fixed pour que le menu soit toujours visible malgré le scroll, cette div #left n'est plus de 33% du container mais du body (donc plus grande)... et je ne comprends pas pourquoi !!

Merci pour votre aide. Voici mes codes.

pour le html:

<body>

	
<header><img alt="logo solution numerik" src="images/logo_sn_reflet.png"></header>

<div id="container">	

	<div id="left">
		<ul id="menu">
			<li><a href="#div1">Div1</a></li>
			<li><a href="#div2">Div2</a></li>
			<li><a href="#div3">Div3</a></li>
		</ul>
		<p>dfgdfgdfg dfgdfgfgdf fgdfhdfh fdfhdfhdgh dfdfhdhdhdfh hdh dh</p>
	</div>

	<div id="right">
	
		<div id="div1">
			<!--<p><a href="#" class="boutton"></a></p>-->
			<p><img src="images/accueil.jpg" width="600"></p>
			<p><img src="images/accueil.jpg" width="600"></p>
			<p><img src="images/accueil.jpg" width="600"></p>
			<p><img src="images/accueil.jpg" width="600"></p>
			<p><img src="images/accueil.jpg" width="600"></p>

		</div>
		
		<div id="div2">
			<p><img src="images/moderne1.jpg"></p>
			<p><img src="images/moderne1.jpg"></p>
			<p><img src="images/moderne1.jpg"></p>
		</div>
		
		<div id="div3">
			<p><img src="images/moderne4.jpg"></p>
			<p><img src="images/moderne4.jpg"></p>
			<p><img src="images/moderne4.jpg"></p>
		</div>

	</div>


</div>
</body>


et pour le css


html, body, #left  {height: 100%;}
body{background:url('../images/bkg_metal.jpg') no-repeat fixed center;}
#container{margin:20px auto;width:960px;border:thin black dotted;height:100%}
header{width:960px;height:160px;margin:0 auto;}

/****** LEFT ******/
#left{width:33%;float:left;border:thin red dotted;position:fixed}
ul#menu{font-family:Arial, Helvetica, sans-serif;font-size:2em;text-align:right}

/****** RIGHT ******/
#right{float:right;width:66%;border:thin blue dotted}
La position fixe - tout comme la position absolue - nécessite un parent en position relative en guise de repère : les valeurs calculées le seront en fonction de ce parent. Une largeur de 33% dans ton cas représentera 33% du plus proche parent en position relative, et étant donné que tu n'as pas mis ton conteneur en position relative, ton élément fixe remonte jusqu'au body.

Appliques simplement une position relative à ton conteneur et tout devrait rentrer dans l'ordre.

PS : ce sujet a été traité plusieurs fois sur le forum, et il existe même un tutoriel dans la section "Apprendre", n'hésite pas à chercher par toi-même avant de passer sur le forum Smiley cligne
merci d'avoir pris le temps de répondre. J'ai beaucoup cherché sur le web mais en vain
En rajoutant position:relative cela ne change rien

Voici le rendu avec les limites de blocs upload/40533-Capture2.JPG
J'essaierai quelques trucs demain, je pense toujours que le souci provient des positions parentes mais j'en saurais plus demain !

Bonne soirée !
Rien de mieux qu'une bonne nuit de sommeil pour se rappeler que non, la position fixe ne se comporte pas comme la position absolue : elle se réfère obligatoirement au body.

Ça n'est malheureusement pas un bug mais bien le comportement attendu : tu n'auras aucun moyen d'ajuster la largeur de ta colonne en fonction d'un container plus petit que le body.. Sauf en js.

La plupart du temps on sort totalement un élément fixe de la zone de contenu - pour cette raison. Tu pourrais éventuellement te lancer dans un calcul si ton conteneur avait une largeur en % : par exemple si ton conteneur fait 50% de body, ton #left ferait 1/3 de 50% - soit 1/6 du body.

La position fixe ne se prête pas facilement au jeu du RWD ! Bon courage Smiley cligne
Effectivement, j'ai parcouru rapidement hier soir une série de tuto vidéo pour mettre une couche de js. Je pense que c'est la meilleure solution, en tous cas je vais la tenter.

Avec tous mes remerciements encore une fois
Sujet clos
Aller à