Bonjour,
alors voilà le patron du site que je veux est le suivant :
header avec une taille de 70px;
menu à gauche avec une taille maximum de la page
contenu au centre avec une taille maximum de la page
footer avec une taille de 40px
mon html :
mon css :
le problème actuel est que la taille de mon menu varie en fonction de son contenu alors que je voudrais qu'il prenne la taille maximun disponible de la page, aillant définit la taille de mon header et de mon footer.
Modifié par romano2003 (10 Feb 2008 - 01:50)
alors voilà le patron du site que je veux est le suivant :
header avec une taille de 70px;
menu à gauche avec une taille maximum de la page
contenu au centre avec une taille maximum de la page
footer avec une taille de 40px
mon html :
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="site">
<!--Header-->
<div id="bandeau">
<div class="logo"><img src="logo165X48.gif" border="0" /></div>
<div class="menu">
<a href="#" class="button-profile" >
Romain De Véra</a>
<a href="#" class="button-disconnect" >
Déconnexion</a>
</div>
</div>
<!--Body-->
<div id="corp">
<div id="menulist-container">
<div id="menulist-header"><span class="flux" > Menu</span></div>
<ul id="menulist">
<li class="titre"><span class="button-user">Utilisateur NV1</span></li>
<li class="menuitem"><a href="#">Mon profil</a></li>
<li class="menuitem"><a href="#">Manuel utilisateur</a></li>
<li class="titre"><span class="button">Etat plateforme</span></li>
<li class="menuitem"><a href="#">Actuel</a></li>
<li class="menuitem"><a href="#">Historique</a></li>
<li class="titre"><span class="button-settings">Admininistration</span></li>
<li class="menuitem"><a href="#">Utilisateur</a></li>
<li class="menuitem"><a href="#">Configuration</a></li>
</ul>
</div>
<div id="tabsbar">
<span class="tablink"><a href="#" title="Afficher la liste desétats" >BDD</a></span>
</div>
</div>
<!--footer-->
<div id="footer">
<span class="version" >V0.1</span>
</div>
</div>
</body>
</html>
mon css :
/** propriété commune à la page ****************************/
body, td, th, span, div, p, h3 {
color: #333333;
font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
}
a,
a:active,
a:visited
{
text-decoration: none;
color: #666666;
}
a:hover
{
color: #000000;
}
#site{
padding: 0 20px 0 20px;
}
/*header logo + menu d'authentification*********************/
#bandeau
{
height: 70px;
}
#bandeau div.logo
{
float:left;
}
#bandeau div.menu{
background: url(taskbar290*37.gif) no-repeat;
height:40px;
padding: 10px 14px 0px 0px;
text-align: right;
float:right;
}
/**CORP de la page****************************************/
#menulist-container
{
margin-right:10px;
width: 160px;
border: 1px solid #999;
background-color: #F9F9F9;
overflow: auto;
/* css hack for IE */
height: expression((parseInt(document.documentElement.clientHeight)-125)+'px');
float:left;
}
#menulist-header
{
height: 12px;
padding: 3px 10px 4px 10px;
background-color: #EBEBEB;
background-image: url(listheader_aqua.gif);
border-bottom: 1px solid #999;
}
#menulist
{
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
overflow: hidden;
white-space: nowrap;
}
#menulist li.menuitem
{
height: 20px;
background: url(images/icons/folder-closed.png) no-repeat;
background-position: 10px 1px;
border-bottom: 1px solid #EBEBEB;
/* IE 5.5 margin-left: -16px; */
}
#menulist li.titre
{
border-bottom: 1px solid #EBEBEB;
padding-top:25px;
padding-bottom:5px;
}
#menulist a:active, a:visited
{
text-decoration: none;
padding: 6px 16px 6px 30px;
background-repeat: no-repeat;
vertical-align:center;
}
#tabsbar
{
color: #333333;
height: 22px;
border-bottom: 1px solid #999999;
white-space: nowrap;
/* css hack for IE */
width: expression((parseInt(document.documentElement.clientWidth)-280)+'px');
}
#footer
{
background: url(font_top_gris.gif) top right repeat-x;
height: 40px;
clear:both;
}
le problème actuel est que la taille de mon menu varie en fonction de son contenu alors que je voudrais qu'il prenne la taille maximun disponible de la page, aillant définit la taille de mon header et de mon footer.
Modifié par romano2003 (10 Feb 2008 - 01:50)