18041 sujets

Questions générales et questions de débutants

Footer en bas de page et sidebar à droite qui prend toute la hauteur

Bonjour, je suis en train de faire un site et j'essaye de mettre un footer qui restera en bas de page avec un contenu qui sera à gauche et une sidebar à droite qui prendra toute la hauteur mais je bloque pour la sidebar, je n'arrive pas à lui faire prendre toute la hauteur le seul moyen est de ne pas bloquer le footer en bas de page chose que j'ai besoin de laisser.

Voici mon code qui est un code d'essai: 

<!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" lang="fr"> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> 
		<title>Hauteur 100%, largeur 80% centré, header, footer, 3 colonnes</title>		
		<style type="text/css"> 
			 
 
			html, body {
				padding : 0;
				margin : 0;
				min-width: 1024px;
				height : 100%; /* Ces trois paramètres sont nécessaires pour un affichage correct */
			}
 
			body {
				text-align : center;   /* Centrage sous Internet Explorer */
			}
 
			#conteneur {
				position : relative;    /* Obligatoire pour positionner le footer par rapport au conteneur */
				margin : auto;          /* Centrage sous Firefox */
				width : 100%;           /* On définit la largeur du site */
				text-align : left;      /* Reset de la position du texte à cause de IE */
				min-height : 100%;   /* Hauteur minimale de 100% */
				background-color : #DDD;
			}
 
			#haut {
				width : 100%;
				height : 100px;
				background-color : #AAA;
			}
 
			#centre {
				min-height : 100%;         /* Hauteur minimale de 100% */
				overflow : auto;            /* Firefox, pour tenir compte du contenu des div flottants (float, qui sont normalement mis à part) */
				padding-bottom : 50px; /* Hauteur du footer, pour éviter que ce dernier se place par dessus votre contenu (on le pousse) */
			}
 
	
 
			#contenu {
				float : left; /* On aligne les trois colonnes */
				margin-left: 50px;
				width: 65%;
				border: 1px solid red;
			}
 
			#colonnedroite {
				float : right; /* On aligne les trois colonnes */
				width : 20%; /* Largeur de la colonne */
				background-color : #BBB;
				border: 1px solid blue;
				margin-right: 50px;
			}
 
			#bas {
				position: absolute; /* On le place par rapport au conteneur */
				bottom: 0; left: 0; /* Tout en bas à gauche */
				clear : both;         /* On casse l'alignement float des colonnes */
				width : 100%;      /* Largeur 100% */
				height : 50px;      /* Hauteur du footer */
				background-color : #CCC;
			}
 
		
		</style> 
		<!--[if lte IE 6]>
			<style type="text/css">
				#conteneur {
					height: 100%; /* Hauteur 100% pour Internet Explorer */
				}	
 
				#centre {
					margin-bottom : 50px; /* Hauteur du footer, pour éviter que ce dernier se place par dessus votre contenu (on le pousse) */
					padding-bottom : 0;
				}					
			</style>
		<![endif]-->		
	</head> 
	<body> 
		<div id="conteneur"> 
			<div id="haut">Header</div> 
			<div id="centre"> 
				
				<div id="contenu"> 
					<h1>Contenu</h1> 
					<h2>Test 1</h2> 
					<p>test test test test test test test test test test test test test</p> 
					<p>test test test test test test test test test test test test test</p> 
					<p>test test test test test test test test test test test test test</p> 
					<h2>Test 2</h2> 
					<p>test test test test test test test test test test test test test</p> 
					<p>test test test test test test test test test test test test test</p> 
					<p>test test test test test test test test test test test test test</p> 
				</div> 
				<div id="colonnedroite"> 
					<ul> 
						<li>Menu 1</li> 
						<li>Menu 2</li> 
						<li>Menu 3</li> 
						<li>Menu 4</li> 
						<li>Menu 5</li> 
						<li>Menu 6</li> 
					</ul> 
				</div>	
			</div> 
			<div id="bas">Footer</div> 
		</div> 
	</body> 
</html>
Sujet clos
Aller à