28172 sujets

CSS et mise en forme, CSS3

Positionnement des blocs

Bonsoir à tous,

Une petite question me taraude l'esprit. Lorsque je "m'amuse" à réduire la fenêtre de mon navigateur (Chrome OU IE), mes blocs se déplacent (bon, en même temps, ils sont flottants) dans ma page (ils vont vers la gauche ou descendent). Je pense que cela est dû à la notion d'héritage puisqu'il s'agit de trois blocs successifs (qui contiennent des images). Mais lorsque je réduis la fenêtre du navigateur sur d'autres sites, les blocs ne bougent pas ou peu. Pourquoi les miens se baladent-ils comme ça ? Comment les stabiliser ? Est-ce un symptôme de mauvaise syntaxe de ma part ? Si vous avez une réponse, je suis preneur.
Merci et bonne soirée.
C'est tout a fait normal, tout dépend de la manière dont les balises sont positionnées. Et dans votre cas, comme vous semblez le suggérer, en position flotante (genre float:left plus une largeur définie pour la div).

Vous pouvez faire en sorte de rendre "rigide" votre site (avec un lien vers celui-ci pour vous aider ce serait mieux !). Mais sachez par ailleurs que bien loin d'être une faiblesse, la fluidité d'un site peut être une vraie force (à condition d'être contrôlée bien sûr : voir ici), notamment pour rendre un site compatible avec n'importe quel médias, comme un iPad ou un iPhone par exemple (grâce en particulier aux conditions media queries). Personnellement c'est cette dernière solution que j'utilise toujours d'emblée désormais.

Pour répondre plus directement à votre question : vous pouvez faire simple en entourant toutes les <div> par une div générale après la balise <body> et fermer avant la fin de celle-ci) puis attribuer en css une largeur pour votre site (la largeur actuelle).

Genre : une div "wrapper" dans le code html...
<body>
<div id=wrapper>
[toutes les balises du site situées entre les balises "body"]
<div><!-- #wrapper -->
</body>

...et pour la feuille de style :
div#wrapper{width:900px;margin:0 auto}

900px à remplacer par la largeur de votre site, et les valeurs pour "margin" vous permettent de centrer la div.
Modifié par Olivier C (20 Jan 2012 - 05:25)
Merci beaucoup pour cette réponse, Olivier.
Effectivement, en suivant tes conseils et en écrivant width:900px (au lieu de 100%), mes blocs héritiers restent bien en place. Mais que faire si je souhaite conserver mon pourcentage (comme c'est le cas sur d'autres sites). Si cela peut t'aider, voici mon code:

#header {
	width: 100%;
	padding:0px;
	margin:0px;
	height: 135px;
	background-color:#EB7456;
	background-image: url(images/strip3.png);
	background-repeat:repeat-x;
	}
	
#logo {
	position: relative;
	float:left;
	width: 425px;
	padding:10px 0 10px 50px;
	}
	
#slogan{
	width: 523px;
	height: 70px;
	float:left;
	margin-left:198px;
	margin-top: 30px;
	}
	
#tv {
	width: 170px;
	height: 138px;
	position: relative;
	float:right;
	margin-right:70px;;
	margin-top: 20px;
	padding-top:0;
	}


et le HTML:
<div id="header">
  <div id="logo"><img src="images/logo-fso.png" /></div>
  <div id="slogan"><img src="images/slogan.png" /></div>
  <div id="tv"><img src="images/tv3.png" /></div>
</div>


Il y a peut-être un élément qui n'est pas le meilleur choix.
@Olivier: Ooops, je m'aperçois que vous me vouvoyez alors que je vous tutoie en réponse. Toutes mes excuses. Smiley ohwell
Y'a pas d'soucis : on peut se tutoyer ! Smiley smile

orsanton a écrit :
Effectivement, en suivant tes conseils et en écrivant width:900px (au lieu de 100%), mes blocs héritiers restent bien en place. Mais que faire si je souhaite conserver mon pourcentage (comme c'est le cas sur d'autres sites).

Dis-donc : tu aurrais pu me laisser un lien... enfin, comme je suis bonne pâte j'ai mampé le code en local...

Et si j'ai bien compris ta question : tu voudrais avoir un blog avec à la fois des éléments fixes mais avec une certaine élasticité, c'est cela ?

Si c'est le cas voici le code css modifié (qu'il faudra réajuster car le gabarit des images n'était pas spécifié dans le code, ce qui est une erreur de bonnes pratiques d'ailleurs) :

#header {
width: 90%;
padding:0px;
margin:0px auto;
height: 135px;
background-color:#EB7456;
background-image: url(images/strip3.png);
background-repeat:repeat-x;
}

#logo {
position: relative;
float:left;
width: 425px;
padding:10px 0 10px 50px;
}

#slogan{position:relative;top:65px;
width: 523px;
height: 70px;
margin:0 auto;
}

#tv {
width: 170px;
height: 138px;
position: relative;
float:right;
margin-right:70px;;
margin-top: 20px;
padding-top:0;
}


Le blog sera à la fois "en place" et "élastique" pour certaines div. À tester...
Modifié par Olivier C (20 Jan 2012 - 11:21)
Hello,

Quelques indications générales:
- Si les principaux blocs ont des largeurs en pourcentages, on veillera à ne pas mélanger mesures en pourcentages et mesures en pixels, sinon ça bloquera sur certaines largeurs faibles et ça donnera des blancs exponentiels sur des largeurs plus importantes.
- Les sites de largeur fluide, pourquoi pas, mais attention aux largeurs importantes et aux longueurs de ligne trop importantes qui peuvent en résulter. L'utilisation de max-width (avec pourquoi pas une valeur en EM) peut limiter le problème.
- On pourra aussi utiliser du min-width pour éviter que le site ne prenne une largeur trop faible en dessous d'un certain seuil.
- Enfin, en CSS3 on peut combiner ces solutions avec des Media Queries, pour appliquer des styles uniquement dans certains cas de figure (viewport plus petit que 600px par exemple). C'est utilisé notamment pour des adaptations sur mobiles et tablettes (voir du côté du «Responsive Design»).
Sujet clos
Aller à