28172 sujets

CSS et mise en forme, CSS3

Mise en page (complexe)

... enfin pour moi Smiley smile

Bonjour,

Je dois réaliser un site. Malheureusement, je suis coincé depuis plusieurs jours sur la mise en page.
La page doit être composée :
- d'un bandeau et d'un pied de page toujours visibles quelque soit la longueur du contenu affiché (y compris quand le fenêtre du navigateur ne prend pas tout l'écran.
- d'une partie centrale, découpée en 2 (voire 3) colonnes indépendantes. Chaque colonne doit disposer le cas échéant d'un ascenseur.
J'ai décomposé cette problématique en deux
- bandeau et pied de page d'un coté
- colonnes défilantes de l'autre
Malheureusement, je ne parviens pas à consolider l'ensemble.
J'ai réuni HTML et CSS dans le même code pour vous le présenter :
<!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"/>
<style type="text/css">

html , body  {
margin:0;
padding:0;
height:100%;
}
 
#container {
min-height:100%;
height:100%;
width:800px;
margin:0 auto;
}
 
#header {
position:fixed;
top: O;
height:200px; 
width:800px;
background:#CCCCCC;
}
 
#content {
padding-top:200px;     /* correspond à la hauteur du header */
padding-bottom:100px;  /* correspond à la hauteur du footer */
width:800px;
background:#DDDDDD;
height: 100%;
display: inline-block;	
}
 
#footer {
position:fixed;
bottom:0;
background:#CCCCCC;
height:100px;
width:800px;
} 
 
#gauche {
	float: left;
	width:400px;
}
 
#droite {
	float:right;
	width:400px;
}
 
.scrolling {
	height:100%;
	overflow:auto;
	overflow-x:hidden;
	display: block;	
}
</style>
</head>

<body >
	
<div id="container">
   <div id="header"> Bannière </div>
      <div id="content"> 
			   <div class="scrolling" id="gauche"> 
      		 texte long ...
		   	</div>
   			<div class="scrolling" id="droite"> 
       		texte long ...
   			</div>
      </div>
      <div id="footer"> Pied de page </div>
</div>
	
</body>
</html>

Dans cette version, la partie centrale passe sous le pied de page.

D'avance merci pour votre aide
Sujet clos
Aller à