28173 sujets

CSS et mise en forme, CSS3

Height minimal ?

Bonjour,

je me demandais si on pouvais, même si j'pense fortement que non, définir une hauteur minimale pour une div ?
pour pouvoir éviter ce genre de soucis :

http://zyente.free.fr/files/bug.jpg


Voilà ma CSS:

#conteneur{
position: absolute;
left: 0%;
width: 800px;
border: 1px solid black;
background-color:#F5E6BE; }

#en-tête{
height: 50px;
background-image:url(images/entete.jpg);
border-bottom: 1px solid black; }

#pied {
height: 30px;
border-top: 1px solid black;
background-color:#ABDAF6; }

#menu_gauche {
font-size: 0.9em;
position: absolute;
left:0px;
top: 60px;
width:142px;
padding:4px; }

#menu_droite {
font-size: 0.9em;
position:absolute;
right:0px;
top: 60px;
width:142px;
padding:4px; }

#centre {
height: 100%;
padding:15px;
margin-left: 152px;
margin-right: 152px;
border-right: 1px dotted;
border-left: 1px dotted; }



Le squelette d'une de mes pages HTML (toutes sur le même modêle)

<body>
<div id="conteneur">
	<!-- PARTIE HAUTE DU SITE-->
	<div id="en-tête">

	</div>
	<!---->
	
	
	<!-- PARTIE GAUCHE DU SITE-->
	<div id="menu_gauche">

	</div>
	<!---->
	
	
	<!-- PARTIE DROITE DU SITE-->
	<div id="menu_droite">

  	</div>
	<!---->
	
	
	<!-- PARTIE CENTRALE DU SITE-->
 	<div id="centre">

  	</div>
	<!---->
	
	
	<!-- PARTIE BASSE DU SITE-->  
	<div id="pied">

        </div>
	<!---->

</div>
</body>



Est-ce quelqu'un voit comment j'pourrais faire pour que le conteneur "s'allonge" en fonction de la div 'centre' MAIS AUSSI de la div 'gauche' et 'droite' ?

merci pour votre aide.
Modifié par JRM (28 Jan 2006 - 23:37)
Administrateur
JRM a écrit :

Est-ce quelqu'un voit comment j'pourrais faire pour que le conteneur "s'allonge" en fonction de la div 'centre' MAIS AUSSI de la div 'gauche' et 'droite' ?

merci pour votre aide.

Si j'ai bien compris, tu voudrais des "colonnes" de même hauteur ?
Tu as dû survoler la FAQ trop rapidement Smiley cligne
Administrateur
JRM a écrit :
Et donc le "partie centrale qui 'pousse' les colones vers le bas." veut bien dire que ce que j'veux faire n'est pas possible Smiley decu tant pis.

merci Smiley cligne

Si si, c'est tout à fait possible. Il y'a au-moins une des pistes données dans la FAQ qui fonctionne : utiliser des cellules de tableau Smiley cligne
Salut,

Tu peux simplement ajouter un min-height: 250px; (ou plus) à #centre, et en commentaire conditionnel pour IE (qui ne prend pas en charge min-height), un height: 250px. Tout en supprimant le height: 100% actuel. Pour écrire le commentaire conditionnel, voir la FAQ

sinon :
Tu utilises un "positionnement absolu" pour tes menus de gauche et de droite : pouruoi ne pas supprimer ce positionnement et utiliser respectivement un float: left; et float: right;. (en supprimant en passant le positionnement absolu au #conteneur, et en ajoutant un margin:...; à body pour avoir le même rendu)

Ainsi, avec un clear: both; ajouté sur #pied, celui ci serait automatiquement "poussé" dans le cas qu'on peut voir sur ton image.

La seule chose, c'est que dans ce cas précis (ou le centre est plus petit que les deux menus du coté), les bordures en pointillé n'iraient pas jusqu'en bas. Mais facile d'y remedier ou en utilisant une image de fond (d'autant plus que c'est en taille fixe)ou... en utilisant le min-height et le commentaire conditionnel (on y revient Smiley lol )

Bonne continuation
Modifié par Alan (28 Jan 2006 - 19:03)
Sujet clos
Aller à