28173 sujets

CSS et mise en forme, CSS3

CSS > Colonne adaptable

Bonjour,

je recherche le moyen de faire une colonne de gauche adaptable en hauteur par rapport au contenu, je sais c'est une question récurrente mais cette fois je n'arrive pas du tout à le régler....

Merci de votre aide Smiley cligne 


body{margin:0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;color:#1358a8;}
form{margin:0}
a{text-decoration:none;color:#1358a8;}
a:hover{text-decoration:underline;}

td, select, input {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;color:#1358a8;}
img {border:0;}

/* login */
div#login {padding-top:150px;}
table#login {border:1px solid #034da2; color:#FFFFFF;}
table#login a {color:#1358a8;}

/* CSS Document */
#header{height:77px;}
#header img {float:left; padding-left:15px;padding-top:3px}
#info_user{height:auto;_height:30px; float:right; padding:5px; padding-top:10px;  background-color:#E5E5E5; border:1px solid #CCCCCC;margin:3px;color:#000000;}
#info_user a{text-decoration:none;color:#000000;}
#info_user a:hover{text-decoration:underline;}

#menu{clear:both; height:20px; background-color:#000000;color:#FFFFFF;text-align:right;padding-right:5px;}
#menu a {color:#FFFFFF;text-decoration:none;line-height:18px;}
#menu a:hover {color:#FFCC00;}

#left{height:80%;min-height:420px; float:left;width:190px;background-color:#034da2; padding-top:10px;}
#left ul{margin:0; padding:0; list-style-type:none;}
#left ul li {height:30px; border-bottom:1px solid #999999;padding-left:10px;padding-right:10px;}
#left ul li a {color:#FFFFFF;text-decoration:none; line-height:26px;}
#left ul li a:hover {color:#FFCC00;text-decoration:none; line-height:26px;}

#center{padding:10px; display: inline;}

#sign{text-align:center;line-height:30px; height:30px; color:#9f9c9c}




<!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=iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

	<!-- HEADER -->
	<div id="header"> 
		<a href="#"><img src="img/logo.gif" border="0" /></a>	
		<div id="info_user"><strong>Bonjour Mr Test</strong><br />
			<br />
			<br />
		</div>
</div>
	
		
	<div id="menu">
		<a href="#"><strong>Test</strong></a></div>
	<!-- HEADER -->
	
	<!-- MAIN -->
	<div id="left">
		<ul>
			<li><a href="#"><strong>menu 1</strong></a></li>
			<li><a href="#"><strong>menu 2</strong></a></li>
			<li><a href="#"><strong>menu 3</strong></a></li>
			<li><a href="#"><strong>menu 4</strong></a></li>
			<li><a href="#"><strong>menu 5</strong></a></li>
		</ul>
	</div>
	<div id="center">
		  <p>diush fsudf sdiuof hoisdf iosud foiusdoifusoidufoisdufoisud
		  fiosud foiusdfu sodif</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>ss</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>ss</p>
		  <p>&nbsp; </p>
	</div>
	<!-- MAIN -->
	
	
	<!-- BOTTOM -->
	<div id="menu">
		<a href="#"><strong>Test</strong></a>
	</div>
	
	<div id="sign">test></div>
	<!-- BOTTOM -->

</body>
</html>

Modifié par laurent_h (22 Jun 2006 - 12:20)
1 – Il faut savoir qu'il n'y a pas de solution miracle. Ce que tu veux, c'est un comportement de colonnes de tableau (deux blocs sont liés, et l'allongement de l'un conditionne l'allongement de l'autre). En l'absence d'implémentation satisfaisante de la propriété CSS display: table-cell, il faudra se contenter de bricolages pas forcément magnifiques.

2 – Les tutoriels d'Alsacréations ont un article sur la question. Je te laisse le trouver, il se fait tard…

Bon courage ! Smiley smile
Administrateur
mpop a écrit :
2 – Les tutoriels d'Alsacréations

Et la FAQ a un item spécialement consacré aux "colonnes" en CSS Smiley cligne
Pardon, mais je ne comprends pas le probleme
Tu cherches à avoir un menu à gauche ? c'est ca ?
En quoi la hauteur est un probleme, les boites s'allonges toujours en fonctions de leur contenu si elle n'ont pas de tailles spécifié.
Merci pour toute vos réponse,
je suis déolé pour si je me suis mal exprimé ce que je cherche c'est que la couleur du menu s'adapte en hauteur au calque de droite.

Merci Smiley cligne
Merci les gars Smiley smile

En fait la bidouille c'est de mettre un contenauer avec la couleur
puis tous les autres en blanc et hop ca marche Smiley cligne
Sujet clos
Aller à