[CSS] Deux zones qui s'adaptent au contenu - Menu et contenu qui s'adaptent

m_t · Novembre 21, 2005, 6:46

Voilà j’ai une mise en page de cette forme

Je voudrais que tous les contenus surtout le menu et la partie contenu s’adaptent à leur contenu tout en possédant une hauteur minimale… Pour le contenu c’est bon cela fonctionne, part contre pour le menu je n’y arrive pas…

Sutout que si le menu dépasse sa hauteur minimale (qui est le même que celle du contenu) , la partie contenu devra elle aussi s’agrandir…

Je ne vois pas trop comment réaliser cela

Voilà le code css :


#conteneur {
z-index:0;
position: absolute;
width: 700px; /* Si modif, penser à changer la largeur dans menu et contenu */
height: 0px; /* Ne varie pas : s'adapte à la taille de la hauteur de haut + millieu + bas */
left: 50%;
margin-left: -390px; 
}

#haut {
background-image: url(bateau_haut.jpg);
background-color: gray;
height: 141px;
width: auto;
overflow: auto;
}

#bas {
	background-image: url(bateau_bas.jpg);
	width:700px;
	height: 52px;
	overflow: auto;
}

#menu {
	position: absolute;
	left:0px;
	width:187px;
	/*height: auto;*/
	padding:3px;
	overflow: auto;
   z-index: 9;
}
/*******/
html >body #menu{
	min-height:400px;
	height: auto;
}

#milieu{
	background-color: white;
	background: url(bateau_menu.jpg) 0 0 repeat-y;
}
#contenu {
	z-index:1;
	background-color: white;
	height: 400px;
	width:513px;  
	/*padding:8px;*/
	margin-left:187px;
	
}

html >body #contenu{
	height: auto;
	min-height:400px;
	
}

#ml {
	position:relative;
	height: 19px;
	width: auto;  
	float: right;
	top:-19px;
	margin-right:3px;
}

et le code html


<div id="conteneur">
         
     <div id="haut">Bloc du Haut

     </div>
	
     <div id="milieu">
	
          <div id="menu">

          </div>
	
          <div id="contenu">

           </div> 
      </div> 
      <div id="bas">Bloc du Bas
      </div>	
</div>

Merci d’avance pour vos conseils

bskickfliper · Novembre 25, 2005, 1:03

Voilà ce que j’ai fait :

<!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>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="bla.css"
</head>
<div id="conteneur">
       
    <div id="haut">Bloc du Haut

    </div>

    <div id="milieu">
      <div id="menu">
  	<ul>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
    <li><a href="#">TestLink</a></li>
  	</ul>
         </div>

         <div id="contenu">
   <p>Lorem ipsum dolor sit amet, uam nibh quam, imperdiet quis, ultrices eget, tincidunt ac, velit. Pellentesque euismod pharetra est. Curabitur bibendum metus sit amet diam. Maecenas at justo. Phasellus fermentum mi vitae tortor. Maecenas tincidunt, lectus sed tristique lobortis, mi urna rutrum risus, eget sagittis nulla risus at neque. Praesent ac nunc. Cras ullamcorper nulla sed est. Ut faucibus erat a urna. Suspendisse leo mauris, sollicitudin vitae, facilisis imperdiet, pretium eunibh quam, imperdiet quis, ultrices eget, tincidunt ac, velit. Pellentesque euismod pharetra est. Curabitur bibendum metus sit amet diam. Maecenas at justo. Phasellus fermentum mi vitae tortor. Maecenas tincidunt, lectus sed tristique lobortis, mi urna rutrum risus, eget sagittis nulla risus at neque. Praesent ac nunc. Cras ullamcorper nulla sed est. Ut fanibh quam, imperdiet quis, ultrices eget, tincidunt ac, velit. Pellentesque euismod pharetra est. Curabitur bibendum metus sit amet diam. Maecenas at justo. Phasellus fermentum mi vitae tortor. Maecenas tincidunt, lectus sed tristique lobortis, mi urna rutrum risus, eget sagittis nulla risus at neque. Praesent ac nunc. Cras ullamcorper nulla sed est. Ut faucibus erat a urna. Suspendisse leo mauris, sollicitudin vitae, facilisis imperdiet, pretium euucibus erat a urna. Suspendisse leo mauris, sollicnibh quam, imperdiet quis, ultrices eget, tincidunt ac, velit. Pellentesque euismod pharetra est. Curabitur bibendum metus sit amet diam. Maecenas at justo. Phasellus fermentum mi vitae tortor. Maecenas tincidunt, lectus sed tristique lobortis, mi urna rutrum risus, eget sagittis nulla risus at neque. Praesent ac nunc. Cras ullamcorper nulla sed est. Ut faucibus erat a urna. Suspendisse leo mauris, sollicitudin vitae, facilisis imperdiet, pretium euitudin vitae, facilisis imperdiet, pretium eu, magna. Suspendisse interdum varius lacus. Donec ultricies dui nec pede.
</p>

          </div>
     </div>
     <div id="bas">Bloc du Bas
     </div>
</div>
<body>
</body>
</html>

CSS:

html{
	margin: 0;
padding: 0;
}
body{
	margin: 0;
padding: 0;
}
#conteneur {
margin: auto;
width: 700px; /* Si modif, penser à changer la largeur dans menu et contenu */
padding: 0;
border: 1px maroon solid;
}

#haut {
background-image: url(bateau_haut.jpg);
background-color: gray;
height: 141px;
width: auto;
overflow: auto;
}

#bas {
background-image: url(bateau_bas.jpg);
width:700px;
height: 52px;
border: 1px red solid;
margin-bottom: 0;
clear: both;
}

#menu {
float: left;
width:178px;
/*height: auto;*/
padding:3px;
border: 1px lime solid;
margin-bottom: auto;
}
/*******/
html >body #menu{
min-height:400px;
height: auto;
}

#milieu{
background-color: white;
background: url(bateau_menu.jpg) 0 0 repeat-y;
}
#contenu {
z-index:1;
background-color: white;
height: auto;
width:500px;  
color: maroon;
/*padding:8px;*/
margin-left:187px;
margin-top: 0;
margin-bottom: 0;
border: 1px aqua solid;

}

html >body #contenu{
height: auto;
min-height:400px;

}

#ml {
position:relative;
height: 19px;
width: auto;  
float: right;
top:-19px;
margin-right:3px;
}

p{
	display: inline;
}

m_t · Novembre 25, 2005, 9:27

Ca a l’air d’être parfait

Merci pour ton aide :jap:

bskickfliper · Novembre 25, 2005, 11:41

N’hésite pas à redemander si il y a une m****