28172 sujets

CSS et mise en forme, CSS3

Problème d'alignement de blocs

Hello tout le monde,

Je rencontre toujours le même problème dès que je dois créer un nouveau site, il s'agit de l'alignement des blocs.

Mon problème est que dans ma partie centrale (entre le header et le footer) #content, je veux aligner deux blocs à la verticale. En sachant que les blocs ont des hauteurs non-fixes, comment faire pour que le conteneur #content soit affiché (que la hauteur change).

Mon code est :


div#content {
	background: #fff url(img/bg-content.jpg) no-repeat 0 0;
}

	div#content-left {
		float: left;
		width: 250px;
		margin: 130px 0 0 10px;
		background: yellow;
	}
	
	div#content-right {
		float: left;
		width: 470px;
		margin: 70px 0 0 50px;
		background: yellow;
	}


Et dans ma page j'ai ça :


<div id="content">
	<div id="content-left">left</div>
	<div id="content-right">right</div>
</div>


Merci de m'éclairer et de m'expliquer pourquoi mon div#content ne se voit pas et n'a pas de hauteur ajustée automatiquement... (j'ai essayé le height: auto, rien n'a faire...) Smiley rolleyes

Merci d'avance.
Modifié par supersmoos (07 Oct 2008 - 14:27)
je pense que le problème vient du fait que tes blocs left et right sont en flottant, donc ils n'ont "pas de hauteur". du coup le #content ne les englobe pas en entier...

essaye en ajoutant <div style="clear:both"></div> dans le code html, en dessous de <div id="content-right">right</div>

et mets une bordure rouge ou un truc qui se voit sur le css du #content comme ça tu verras comment il se comporte Smiley smile
Bonjour supersmoos et bienvenue Smiley cligne ,

Bien que la réponse de ginette_78 ne soit pas fausse, elle peut être utilisée autrement.

Sa solution est de rajouter un div vide avec des styles en ligne, quand on peux éviter c'est mieux Smiley cligne .

Tu dis également que tu rencontre souvent le problème.

Donc une autre solution est de se servir d'un div ayant du contenu comme par exemple un footer et appliquer le "clear:both" à ce footer.

Ce qui donnerait :

<div id="content">
	<div id="content-left">left</div>
	<div id="content-right">right</div>
        <div id="footer">Texte du footer</div>
</div>


Et dans ta css

#footer
{
clear:both;
}


C'est pas obligé, c'est au cas par cas, la solution de ginette_78 fonctionne aussi.
Modifié par knarf (08 Oct 2008 - 16:33)
Justement mais ce n'est pas très friendly tout ça...

Si je prend la logique, j'ai un grand bloc "page" dans lequel se trouve empilé "header", "content", "footer" et dans le content mon contenu...

Donc comment faire pour que le div "content" prenne automatiquement la hauteur de son contenant ?

Merci de votre aide. Smiley confused
supersmoos a écrit :

Justement mais ce n'est pas très friendly tout ça...
Si je prend la logique, j'ai un grand bloc "page" dans lequel se trouve empilé "header", "content", "footer" et dans le content mon contenu...

Donc comment faire pour que le div "content" prenne automatiquement la hauteur de son contenant ?

Merci de votre aide. Smiley confused

Peut-être avec la propriété overflow ? Smiley cligne 
div#content {
background: #fff url(img/bg-content.jpg) no-repeat 0 0;
overflow:hidden;
}


N'aurais-tu pas une page en ligne ou un code plus exhaustif ?

Cdt,
Sylvain
Hello,

La propriété overflow ne changera rien à mon problème... Le code de ma page est :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<title>TITLE</title>

</head>

<body>

<div id="page">
	<div id="menu"><ul><li><a href="/site/home">Accueil</a></li><li><a href="/site/presentation">Présentation</a></li><li><a href="/site/travaux">Travaux</a></li><li><a href="/site/contact">Contact</a></li></ul></div>	
	<div id="header">
		<img src="img/header-presentation.jpg" alt="Présentation" />
	</div>
	
	<div id="content">
		<div id="content-left">left</div>
		<div id="content-right">right</div>
	</div>

	<div id="footer">footer</div>
</div>

</body>
</html>


Et mon CSS :

div#page {
	margin: 0 auto;
	margin-top: 50px;
	width: 800px;
}

div#menu {
	text-align: right;
	margin: 0 5px 10px 0;
	color: #fff;
	font-size: 0.9em;
}
	
	div#menu ul, div#menu li {
		display: inline;
		margin: 0 5px;
	}
	div#menu a, div#menu a:hover, div#menu a:visited { color: #fff; text-decoration: none; }
	
div#header {
	height: 130px;
	padding: 10px 10px 0 0;
	text-align: right;
	background: url(img/bg-header.jpg) no-repeat;
}
	
div#content {
	background: #fff url(img/bg-content.jpg) no-repeat 0 0;
}

	div#content-left {
		float: left;
		width: 250px;
		margin: 130px 0 0 10px;
		background: yellow;
	}
	
	div#content-right {
		float: left;
		width: 470px;
		margin: 70px 0 0 50px;
		background: yellow;
	}


Je ne peux, pour des raisons que vous comprendrez sûrement, vous montrer le résultat en ligne.

Voilà, mon problème reste le même, je ne comprend pas pourquoi mon div#content ne prend pas de hauteur automatiquement... MERCI de votre aide Smiley confused
Modifié par supersmoos (10 Oct 2008 - 13:30)
Bonjour supersmoos,

A partir du moment ou des blocs sont flottants, il sortent du flux donc il est normal que le div #content ne s'allonge pas si les blocs positionnés en float s'allonge, ils dépasseront obligatoirement du div parent (#content) en l'état.

Maintenant je ne vois pas ce qui te gene dans les différentes solutions efficaces déjà données.

Dans les deux premières, qu'est-ce que tu ne trouve pas friendly ?

C'est pourtant une des bases des gabarits comportant des flottants.

Sinon, une petite remarque, le div #footer n'est pas à la bonne place si l'on parle bien du div #content il devrait être à l'intérieur Smiley cligne
Modifié par knarf (10 Oct 2008 - 14:39)
supersmoos a écrit :

La propriété overflow ne changera rien à mon problème...

Ah bon, pourquoi ? Smiley rolleyes
Tu as fait des tests ? Tu maitrises parfaitement le langage html et les propriétés des styles en cascade n'ont plus de secret pour toi ?
En ce qui me concerne, j'en apprends tous les jours Smiley cligne

Revenons à nos montons...
En ce qui concerne le positionnement des flottants, comme tu le sais certainement (...) :
a écrit :

Un élément positionné en float sort du flux courant, il n'est pas compté dans le calcul de la hauteur du conteneur, si celle-ci n'est pas spécifiée...

Or si je regarde ton code, l'intégralité de ton contenu est positionné en float (ce qui au passage peu s'avérer parfois "casse-gueule" et entrainer quelques soucis, mais soit...) donc suivant les effets induits par la position float, et fort de la petite expérience acquise au fil de ces dernières années, je me suis laissé dire que ce conteneur ne devrait théoriquement pas prendre de hauteur pour reprendre ton expression.
Ne "contenant rien", n'ayant pas de hauteur définie, je ne vois pas par quelle opération des esprits sains ce conteneur prendrait un quelconque espace vertical d'autorité (ou automatiquement) mais je peux me tromper bien évidemment...

Il te faut donc circonscrire ces boites flottantes (empêcher le dépassement des flottants dit-on communément...) en donnant un contexte de formatage à ce conteneur par exemple, en ajoutant la propriété [clear: both] à un conteneur existant (éventuellement ton pied de page) ou à créer (cela rajoute du code parfois superflus mais bon...un hr peut faire l'affaire par exemple) juste après ces flottants, et quelques autres encore...

Concernant la propriété overflow, qui ne semble pas retenir tes faveurs, faisons un petit test pratique :
Ajoute une bordure à ce conteneur mettons :
border:2px solid red;

Regarde le résultat dans ton navigateur
Ajoute ensuite cette propriété dont je te parlais plus tôt:
overflow:hidden;

Surprenant n'est-il pas ? Smiley smile
A noter que cela pose problème au version antérieure à IE7, mais on peut obtenir le même effet en conférant la propriété hasLayout (notion à chercher) à ton conteneur, de cette manière par exemple :
{zoom: 1;}


Enfin, tu peux parfaitement dimensionner ce conteneur en défissant toi même cette hauteur (supérieure évidemment à celle de tes flottants) ou minimale (min-height) pour ne pas être embêter si d'aventure ton contenu venait à s'étirer (attention encore une fois, comme bon nombre des propriétés CSS2, IE n'implémante pas min-height, mais il existe des solutions...)

Je crois que nous avons fait le tour,

Bonne continuation, recherches, tests, révisions, ...

Cdt,
Sylvain

*Grillé je fus(me) Smiley lol
Modifié par 6l20 (10 Oct 2008 - 16:11)
Yeah, MERCI pour cette réponse.

Je vais essayer tout cela dès que j'ai du temps (là, c'est le week-end) et revient vers vous rapidement.

Merci beaucoup de vos réponses Smiley cligne

EDIT : Comme ca me démange trop, j'ai essayé, la propriété overflow:hidden fonctionne parfaitement. Par contre, pas encore essayé sur tous les navigateurs mais je trouverai des solutions ou viendrai vous demander aide et conseil.

MERCI beaucoup et à bientôt Smiley cligne
Modifié par supersmoos (10 Oct 2008 - 16:08)
knarf a écrit :
Maintenant je ne vois pas ce qui te gene dans les différentes solutions efficaces déjà données.

Dans les deux premières, qu'est-ce que tu ne trouve pas friendly ?


Pour répondre rapidement, ce qui me gène est que le footer ne fait pas partie du contenu (au même titre que le header).

Donc, pour des raisons pratiques et selon moi logiques, je ne veux pas le mettre dans ma partie div#content (ou wrapper si tu préfères).

Mon wrapper div#content est la partie centrale de ma page divisée en trois parties horizontales. Donc mes bloc div#content-left et div#content-right doivent se raccrocher à div#content et pas au reste (une position:relative arangerait les choses ?).

Voilà... bon week-end à tous Smiley lol
Sujet clos
Aller à