bonjour
Pour ce que tu veut faire , le mieux est un tableau de 3 lignes j'imagine ...
Sinon , voici un gabarit probablement difficile a maintenir et que je n'ai pas mis en ligne :
(ce gabarit se degrade dans IE6 et en mode quirk .height:100% , inline-block et positionement fixed pour le principe de base ..)
<!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>
<title>gabarit : entete et pied fixe , contenu au centre et extensible </title>
<style type='text/css'>
/* gcyrillus */
html , body , #global
{height:100%;margin:0;padding:0;font-family:arial;background:#B3BF77;}
h1 , p , h2 , h3 {margin:0;}
#global {
position:relative;
width:800px;/*ou autre :a repercuter sur les autres elements pied header et contenu */
margin:0 auto;
background:#999999;
color:white;
letter-spacing:-1em;/* pour garder cote a cote #fix_whatever et #contenu */
}
#global #fix_whatever, #global #header , #global #pied , #global #contenu {/* reset des conteneurs */letter-spacing:0;}
#header , #pied {
position:fixed!important;
position:absolute;
left:0;
top:0;
width:100%;
color:black;
}
#header div.fix , #pied div.fix {
width:790px;
margin:0 auto;height:90px;background:#C4D283;
padding:5px;
}
#pied {
top:auto;
bottom:0;
}
#fix_whatever , #contenu {
height:100%;
display:-moz-inline-stack;/* ff2 et inf */
display:inline-block;
width:0px;
vertical-align:middle;
}
#contenu {width:800px;height:auto;background:#999999;}
#contenu .fix {display:block;/* ff2 et inf */margin: 105px 1em;}
</style>
<!--[if lte ie 7 ]>
<style >
#fix_whatever , #contenu {display:inline;zoom:1;}
</style>
<![endif]-->
</head><body>
<div id="global">
<div id="header" >
<div class="fix"><!-- element utilitaire : centrage a l'ecran malgré un parent extrait du flux , etc ... -->
<h1>titre</h1>
<p>lorem ipsum</p>
</div>
</div>
<div id="fix_whatever"><!-- element utilitaire : etalon centreur ou clear les flottants par exemple .. --></div>
<div id="contenu">
<div class="fix"><!-- element utilitaire : clear , fond supplementaire , tampon de dfauts d'implémentations , etc ... -->
<h2>Header Level 2</h2>
<p><strong>Pellentesque habitant morbi tristique</strong>
senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget,
tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
<em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo.
Quisque sit amet est et sapien ullamcorper pharetra.
</p>
<h3>Header Level 3</h3>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus magna. Cras in mi at felis aliquet congue.
</p>
</blockquote>
</div>
</div>
<div id="pied">
<div class="fix"><!-- element utilitaire : centrage a l'ecran malgré un parent extrait du flux , etc ... -->
<p> pied de page </p>
</div>
</div>
</div>
</body>
</html>
Ce gabarit utilise a plusieurs reprise un element tampon (class="fix")
Methode classique similaire a l'usage d'un spacer.gif , ou d'un div en class="clear" par exemple .
L'usage de pseudo élément ne permettent pas encore de s'en passer sauf si on s'affranchit arbitrairement des contraintes de codage pour les IE ou autres navigateur devenus obsolète il y a peu ...
GC
