28172 sujets

CSS et mise en forme, CSS3

Pb avec menu qui descend jusqu'au footer

bonjour , j'ai un petit soucis avec ma mise en page, je m'explique: je souhaiterais que mes deux colonnes gauche etdroite (voir photo ci dessous) descendent jusqu'en bas, au niveau du pied de page de maniere automatique. Mais je n'arrive pas à voir mon erreur est ce que qq un pourrait me donner un coup de main. Ci joint mes codes html et css:


Merci d'avance pour votre aide , je suis sur que c'est pa grd chose mais je ne trouve pas Smiley langue 

<body>

<?php include("menuhaut.php")?>

<div id="wrapper"> <!-- Creation du cadre contenant les informations -->
<div id="header"></div> <!--  Affichage du bandeau  -->

<div id="content-wrapper"> <!-- Affichage de la partie centrale  -->

	
         <!--  Affichage du corps du site  -->
	
<?php include("menuprincipal.php")?>
<?php include("colonnegauche.php")?>	

	<div id="main">

	
	
</div>

    </div>



<?php
include_once 'footer.php';
?>

</div>
</body>
</html>



<div id="menuprincipal">
		<ul>
			<li><a href="index.php">Accueil</a></li>
			<li><a href="">Licence L3</a>
					<ul>
						<li><a href="presentationl3.php">Pr&eacute;sentation</a></li>
						<li><a href="enseignementsl3.php">Enseignements</a></li>
						<li><a href="accesl3.php">Acc&eacute;s L3</a></li>
					</ul>
			</li>
		
			<li><a href="">Master 1</a>
					<ul>
						<li><a href="presentationm1.php">Pr&eacute;sentation M1</a></li>
						<li><a href="enseignement.php">Enseignements</a></li>
						<li><a href="accesm1.php">Acc&eacute;s M1</a></li>
					</ul>
			</li>
			
			<li><a href="">Master 2 "Grand Ouest"</a>
					<ul>
						<li><a href="presentationm2.php">Pr&eacute;sentation M2</a></li>
						<li><a href="enseignementm2.php">Enseignements</a></li>
						<li><a href="accesm2.php">Acc&eacute;s M2</a></li>		
					</ul>
			</li>
			
			<li><a href="debouche.php">Les m&eacute;tiers et d&eacute;bouches</a></li>
			<li><a href="devenir.php">Le devenir des &eacute;tudiants</a></li>
			<li><a href="contact.php">Contact</a></li>
			<li><a href="ancien.php">Anciens &eacute;tudiants</a></li>
			<li><a href="./intranet/">Espace &eacute;tudiant </a></li>
		</ul>
		<br/>
		<img src="css/logophymots.gif"/>
		Laboratoire PHYMOTS<br/>
		<em>Physiologie moléculaire du transport des sucres</em><br/>
		<p> 40, avenue du recteur Pineau<br/>
			86022 Poitiers cedex<br/>
			Tél. : 05 49 45 41 83 <br/>
		</div>



* { margin: 0; padding: 0; outline: 0; }

body {
	background-color:#dcdbdb;
	margin:0;
	padding:0;
	text-align:center;
	color:#333333;
	font-family:Trebuchet MS, Arial, Tahoma, sans-serif;
    font-size:9pt;
	behavior: url("csshover.htc");
}



#wrapper {
	width:1000px;
	height: 100%;
    background: white repeat-y center top;
    margin:0 auto;
    text-align:left;
}




#content-wrapper {
	width: 1000px;
	height: 100%;
	margin-top: 25px;
	padding: 0;
}


#header {
	position: relative;
    height:151px;
	background: #caced1 url(header.jpg?z=39878) no-repeat center top;
	padding: 0;	
	color: #fff;
	margin-left:auto;
    margin-right:auto;
	width:1000px;
}

#menuprincipal
{
	float:left;
	width:200px;
	margin:0px;
	padding:0px;
	margin-bottom: 0px;
	background-color: #7db627;
	color: white;
	text-align: center;

}

#menuprincipal ul {
  width:200px;
  list-style:none;
  padding:0px;
  margin:0px;
  background-color: #7db627; 
   
}

#menuprincipal ul li {
  width:auto;
  margin-left:5px;
  text-indent:5px;
  height:23px;
  border-bottom:1px dotted #ffffff;
}



#menuprincipal li a {
  display:block;
  height:23px;
  text-decoration:none;
  color:white;
  background-color:#7db627;
}

#menuprincipal ul li ul {
  display:none;
}

#menuprincipal ul li:hover ul {
  display:block;
  position:relative;
  top:-24px;
  left:115px;
  padding:0;
}

#menuprincipal ul li ul, #menuprincipal ul li:hover ul li ul, #menuprincipal ul li:hover ul li:hover ul li ul{
  display:none;
}

#menuprincipal ul li:hover ul, #menuprincipal ul li:hover ul li:hover ul, #menuprincipal ul li:hover ul li:hover ul li:hover ul{
  display:block;
  position:relative;
  top:-24px;
  left:193px;
  padding:0;
}

#menuprincipal li a:hover {
  color:black;
  background-color:#b8e94f;
  margin:0;
  padding:0;
}

#blocdroite
{
float: right;
z-index: 20;
border-left: 1px double #d8d5d5;
height: 100%;
width: 220px;
}

#main {
	position: relative;
	margin-top: 0;
	margin-left: 270px;
	height:100%;
    overflow:auto;
	padding: 20px 0 0 0;
	}


#main p, #main h1, #main h2, #main h3, #main ol, #main ul, #main form {
	margin:10px 10px 10px 0px ;
}

#main p, #sidebar p {
	text-align:justify;
}


h1 {
	font-family:Trebuchet MS;
	font-size:25px;	
	color:#6BB501;
	letter-spacing:3px;
	text-align: center;
}


h2 {
	font-family:Trebuchet MS;
	font-size:16pt;	
	color:#6BB501;
	letter-spacing:2px;
}

h3 {
	font-family:Trebuchet MS;
	font-size:14pt;	
	color:#6BB501;
}

h4 {
	font-family:Trebuchet MS;
	font-size:12pt;	
	color:#6BB501;
}



a, a:visited {
	color:#6BB501;
	text-decoration:none;
}

a:hover {
	color:#6BB501;
	text-decoration:underline;
}

#footer {
	color: #FFFFFF;
	background: #dcdbdb url(footer.jpg?z=39878) no-repeat center top;
	clear: both;
	width:1000px;
	height: 90px;
	text-align: center;	
	font-size: 8pt;	
}

#footer p { 
	padding: 10px 0;
	margin: 0;
}

#footer a {
	color: #FFFFFF;
	text-decoration: none; 
	width: 920px;
}
upload/29417-site.jpg upload/29417-site.jpg
Modifié par butterfly86 (17 Jul 2010 - 15:28)
merci pour ta reponse, mais meme quand j'utilise une image de fond je ne parviens pas a prolonger ma barre jusqu'au footer ....
Salut,

Soit je n'ai pas bien compris ce que tu veux obtenir, soit je pense que la meilleure solution est bien la création de colonnes factices. Et tes colonnes ainsi dessinées en background ne peuvent pas ne pas aller jusqu'en bas de ta page...
Sujet clos
Aller à