28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problèmes positionnement et design fluide

Bonsoir tout le monde.


J'aimerais avoir votre aide à propos du positionnement de mes éléments, dans le but de faire un design fluide.
Mon code présente un problème de float, les éléments imbriqués dans le bloc "left_body" sont soit margés à la verticale, soit le bloc "right_body" ne s'imbrique pas dans le bloc "container".


Je vous laisse regarder le code, je pense que vous aller comprendre par vous-même Smiley smile 

<head>
	<title>Test</title>
	<link rel="stylesheet" media="screen" type="text/css" href="stylesheet.css" />
</head>

<body>
	<div id="container">
		<div id="left_body">
			<div id="bar">
				<p>Bar</p>
			</div>
			<div id="blog">
				<p>Blog</p>
			</div>
			<div id="footer">
				<p>Footer</p>
			</div>
		</div>
		<div id="right_body">
			<p>right_body</p>
		</div>
	</div>
</body>



Et voici le CSS.


body
{
	width: 100%;
	background-color: blue;
	margin: auto;
}

div#container
{
	width: 1100px;
	height: 100%;
	background-color: black;
	margin: auto;
}

div#left_body 
{
	width: 900px;
	height: 100%;
	float: left;
	background-color: gray;
}

div#bar
{
	width: 100%;
	background-color: yellow;
}

div#right_body
{
	width: 200px;
	height: 100%;
	float: right;
	background-color: brown;
}


Le code n'est pas complet, dès que j'ai vu que ça bugguait au niveau des blocs, j'ai arrêter de construire les autres blocs.


Voici à quoi devrait ressembler le produit finis.

upload/22942-preview.jpg


En espérant que vous pourrez m'aider, je vous souhaite une bonne soirée! Smiley smile
Modifié par Loxeno (04 Mar 2011 - 09:04)
Bonsoir,

Tout d'abord, d'après le code que tu as posté, je pense qu'il ne s'agit pas vraiment là d'un design fluide dans la mesure où tu emploies des unités absolues (px) concernant la largeur des éléments. A moins que "fluide" soit en rapport avec la hauteur que tu as précisée en % ?

Quoi qu'il en soit, pour que le "height: 100%" soit bien pris en compte, il te faut ajouter absolument cette règle dans ton CSS :

html {height: 100%;}


Sans cela, les autres conteneurs, le <body> inclus, ne sauront pas par rapport à quoi se référer pour offrir une hauteur "totale". Plus d'informations à ce sujet : ici.

Pour le reste de ta mise en page, c'était plutôt bien parti d'après ton code je pense :

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: blue;
}

p {
	margin: 0; /* Sinon tes différents blocs dans "left_body" seront écartés verticalement */
	padding: 0;
}

/***** CONTAINER *****/

#container {
	width: 1100px;
	height: 100%;
	margin: 0 auto;
	background-color: purple;
}

/***** LEFT_BODY *****/

#left_body {
	width: 900px;
	height: 100%;
	float: left;
	background-color: green;
}

#bar {
	height: 10%; /* 10% de la hauteur dispo dans ta fenêtre */
	background-color: yellow;
}

#content {
	height: 70%;
	background-color: black;
}

#footer {
	height: 20%;
	background-color: red;
}

/***** RIGHT_BODY *****/

#right_body {
	width: 200px;
	height: 100%;
	float: left; /* S'il reste de la place à côté d'un élément flottant (le "left_body" fait 900px, il reste donc 200px), alors un autre élément flottant (en l'occurrence "right_body") va automatiquement se placer à côté tant que la largeur de ce dernier n'excède pas la largeur restante à côté du premier bloc flottant). */
	background-color: grey;
}
Merci beaucoup! Le code fonctionne parfaitement!


Pour ce qui est du design fluide, je commence à peine à voir ce que ça joue sur le code. Dans chaque tutorial, on précise que toutes les valeurs doivent être exprimées en % (width et height), mais j'ai un peu de mal à me rendre compte de ce que ça donne sur d'autre résolution!

Mais maintenant que la hauteur est réglée en fluide, je vais m'attaquer à la largeur.


Merci beaucoup pour ton aide Smiley cligne
De rien ! Smiley cligne

Et pour la largeur le principe est le même, adieux les px et welcome les % !

Par contre pas besoin de spécifier "width: 100%" au <html> et au <body> cette fois pour que ça soit pris en compte. C'est implicite.

Après tu peux par exemple mettre 80% de largeur à "container" et spécifier ensuite que "left_body" occupera 80% de la largeur disponible dans son conteneur et "right_body" les 20% restants.

L'intérêt réside dans le fait que l'affichage sera le même en terme d'espace occupé, peu importe la taille de l'écran et la résolution de tes visiteurs (tu pourras aussi redimensionner ta fenêtre de navigateur pour t'en rendres compte).

Bonne continuation !
Sujet clos
Aller à