Forums Webou.net - Hébergement gratuit et sans publicités avec PHP/MySQL

Programmation => PHP/MySQL - (x)HTML - ... => Discussion démarrée; par: BBSG le 28 Mars 2009, 19:03:38



Titre: [résolu]menu_vertical
Posté par: BBSG le 28 Mars 2009, 19:03:38
bonjour voila cette fois ci j'ai un Pb d'ordre graphique en fait je voudrais que mon menu descende jusqu'au pied de page car la il y a un blanc pas très esthétique http://www.bbsg.webou.net
le html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>  
    <title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="keywords" content="Carbonylation,protein,database" />
    <meta name="description" content="Carbonylation site protein database" />   
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
   </head>
<body>
<div id="container">

<div id="header"><!--le haut de la page commence ici-->
<div class="hgauche"></div>
<div class="hdroit"></div>
<div class="middle">
</div>
</div><div id="navcontainer">
<ul id="navlist">
<li ><a  href="download.php" title="Downloads">Downloads</a></li>
<li ><a  href="faq.php" title="faq">FAQ</a></li>
<li ><a  href="home.php" title="home">Home</a></li>

<li ><a  href="info.php" title="information">Information</a></li>
<li><a href="home.php" title="home">Known CS/CP</a></li>
<li  id='active'><a  id='courant' href="release.php" title="release">Release</a></li>
<li ><a  href="search.php" title="search">Search</a></li>
<li ><a  href="home.php" title="statistiques">Statistiques</a></li>
</ul>
</div>
<div id="contenu">

<p>Fri, Mai 12 2009

   *  CSPD database version v1 released.

   *  v1 is based on NCBI complete genomes, release of january 2009
Protein functional description is provided by the Genbank.

   *  This release uses cspd model 1.0.
</p>
</div>
</div>
<div id="footer">
<div id="contact">
<p class="email"><a href="http://www.sanger.ac.uk/feedback/">webmaster@ifr88.cnrs-mrs.fr</a></p>
<p>Laboratoire de Chimie Bactérienne, CNRS Campus J. Aiguier 31 chemin J. aiguier 13402 Marseille, France</p>
</div>
<div id="legal">

<p class="right">Last Modified Mon Sep  8 11:39:22 2008</p>

<p class="left">Registered charity number 210183</p>
<p class="middle_footer"><a href="release-policy.shtml">Data Release Policy</a> | <a href="use-policy.shtml">Conditions of Use</a> | <a href="copyright.shtml">Copyright</a></p>
</div>
</div>


  </body>
</html>

Code:
* {
padding: 0;
margin: 0;
border:0;
}
body
{
 font: 11px verdana, sans-serif;
 margin: 0;
 padding: 0;
}
#container {
width :100%;
position: relative;
/*height :100%;*/
height: auto !important;
/*min-height: 100%; */
text-align:center;
}
/*Style sur la banniere */
#header {height:92px;
width:100%;
}

.middle {background:url('img/banniere_repeat.gif') left top repeat-x; height:92px;}
.hgauche {width:440px;height:92px;}
.hdroit {width:226px;height:92px;}    
.hgauche{float:left;}
.hdroit{float:right;}  
.hgauche {background:url('img/banniere_gauche.gif') #fff left top no-repeat;}
.hdroit {background:url('img/banniere_droite.gif') #fff right top no-repeat;}

/*Fin de style sur la banniere*/

/*Style sur le menu et rebriques*/

#gauche {
float:left;
width:250px;
height:100%;
}
.menu_haut {background:url('img/top_menu.gif') left top no-repeat; width:250px;height:19px;}
.menu_milieu {background-image:url('img/fond_menu.gif') ; background-repeat:repeat-y;}
.fin_rubrique {background:url('img/top_menu.gif') left top no-repeat; width:250px;height:19px;}


#menu_vertical{
width:100%;
list-style-type : none;
text-align:left;
}

#menu_vertical li{
font-size:1.1em;
}
#menu_vertical img{
width:25px;
height:25px;
margin-left:100px;
}
#menu_vertical a {
color : black;
text-decoration : none;
padding : 1.0em;
font :  1.0em;
display: block;
color: black;
background: #409ee7;
/*border-bottom: 1px solid #fff; */
}
#menu_vertical a:hover {
background-color:#CCCCFF;
}

/*style sur le menu fini*/

/*style sur le contenu*/
#contenu {
background-color:#ffffff;
margin-right : 10px;
margin-top:10px;
margin-left: 15%;
min-height: 10cm;
height: auto;
text-align:center;
font-family: Arial, "Arial Black", Georgia, "Times New Roman", Times, serif;
padding:10px;
}

#footer {
width:100%;
border-style:outset;
border-width:1px;
border-color:grey;
margin-top:1px;
background-color:#c3dbed;
height:auto;
}
#contact{
font-size:0.8em;
margin-left:5px;
}
#legal{
font-size:0.8em;
text-align:center;
margin-top:5px;
margin-bottom:10px;
}
.email{
float:right;
margin-right:5px;
}
.right{
float:right;
color:grey;
margin-right:5px;
 }
.left{
margin-left:5px;
float:left;
color:grey;
}
#blobs {
 width: 723px;
 height: 346px;
 background: url(gmi/Menu_CSPD.jpg);
 margin: 10px auto; padding: 0;
 position: relative;
}
#blobs li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}

#blobs a {display: block;}

#blob1 {left: 301px; top: 0px; width: 115px; }
#blob2 {left: 438px; top: 44px; width: 116px; }
#blob3 {left: 204px; top: 41px; width: 69px; }
#blob4 {left: 2px; top: 145px; width: 220px; }
#blob5 {left: 491px; top: 146px; width:210px; }
#blob6 {left: 89px; top: 252px; width: 183px; }
#blob7 {left: 445px; top: 249px; width: 168px; }
#blob8 {left: 296px; top: 308px; width: 145px; }

#blob1 a {height: 33px;}
#blob2 a {height: 43px;}
#blob3 a {height: 49px;}
#blob4 a {height: 40px;}
#blob5 a {height: 58px;}
#blob6 a {height: 42px;}
#blob7 a {height: 43px;}
#blob8 a {height: 39px;}

#blob1 a:hover {background: url(gmi/Menu_CSPD.jpg) -301px -347px no-repeat;}
#blob2 a:hover {background: url(gmi/Menu_CSPD.jpg) -438px -380px no-repeat;}
#blob3 a:hover {background: url(gmi/Menu_CSPD.jpg) -204px -386px no-repeat;}
#blob4 a:hover {background: url(gmi/Menu_CSPD.jpg) -2px -491px no-repeat;}
#blob5 a:hover {background: url(gmi/Menu_CSPD.jpg) -491px -492px no-repeat;}
#blob6 a:hover {background: url(gmi/Menu_CSPD.jpg) -89px -590px no-repeat;}
#blob7 a:hover {background: url(gmi/Menu_CSPD.jpg) -445px -591px no-repeat;}
#blob8 a:hover {background: url(gmi/Menu_CSPD.jpg) -296px -646px no-repeat;}

h3 {
font-size:1.5em;
color:#c43232;
margin-top:5px;
}
h4 {
font-size:1.1em;
color:#c43232;
margin-bottom:10px;
margin-top:20px;
}
.title_page  {
text-align:center;
}

table{
margin-right:auto;
margin-left:auto;
}
caption {
margin: auto; /* Centre le titre du tableau */
   font-family: Arial, Times, "Times New Roman", serif;
   font-weight: bold;
   font-size: 1.3em;
   color: #3B4E77;
   margin-top:20px;
   margin-bottom: 20px; /* Pour éviter que le titre ne soit trop collé au tableau en-dessous */
 }
 th
{
   font-size: 1.2em;
   font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
   padding:1.5em;
}
td
{

width:auto;
padding: 5px;
text-align:center;
font-size:1.2em;
}





/*style sur le menu 3d*/
#navcontainer {
float:left;
width:250px;
min-height:100%;
background:#409ee7;
}
#navlist
{
color: white;
background: #409ee7;
border-bottom: 0.2em solid 409ee7;
border-right: 0.2em solid 409ee7;
padding: 0 1px;
margin-left: 0;
margin-top:40px;
width: 245px;
font: normal 1.2em Verdana, sans-serif;
}

#navlist li
{
list-style: none;
margin-top: 0;
font-size: 1em;
}

#navlist a
{
display: block;
text-decoration: none;
margin-bottom: 1.5em;
color: white;
background: #39c;
border-width: 1px;
border-style: solid;
border-color: #5bd #035 #068 #6cf;
border-left: 1em solid #fc0;
padding: 0.25em 0.5em 0.4em 0.75em;
}

#navlist a#courant { border-color: #5bd #035 #068 #f30; }

#navlist a


{
width: 99%;
/* necessaire seulement pour Internet Explorer */
}

#navlist a
{
voice-family: "\"}\"";
voice-family: inherit;
width: 9.6em;
/* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
}

#navcontainer>#navlist a
{
width: auto;
/* only necessary if you use the hacks above for the Internet Explorer */
}

#navlist a:hover, #navlist a#courant:hover
{
background: #28b;
border-color: #069 #6cf #5bd #fc0;
padding: 0.4em 0.35em 0.25em 0.9em;
}

#navlist a:active, #navlist a#courant:active
{
background: #17a;
border-color: #069 #6cf #5bd white;
padding: 0.4em 0.35em 0.25em 0.9em;
}
j'ai essayé min-height;100%
height:100%
clear:left
et ca donne rien d'ou vient le Pb ?
avez-vous une solution ?
Merci


Titre: [resolu]menu_vertical
Posté par: BBSG le 28 Mars 2009, 20:27:45
Bon ben j'ai résolu le Pb
Pour les gens qui rencontre Ce Pb il suffit de donner la même couleur au container qu'au menu et l'illusion est la on croirait que le menu va jusqu'au pied de page.
pour coller le footer il suffit de mettre un clear:left