Maintenant, le texte dans le '<DIV id="content"> ..</DIV>' n'empiete plus sur le <DIV id="footer">. Code : Tout sélectionner
<!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>
<style type="text/css">
body{
margin:0;
padding:0;
}
#conteneur{
width:800px;
margin:0 auto 0 auto;
}
#header{
background-color:#E1EAF1;
height:80px;
}
#banniere{
background-color:red;
height:30px;
}
#centre{
position:relative;
}
#centre #menu{
background-color:green;
position:absolute;
top:0;
left:0;
width:150px;
height:expression(document.documentElement.clientHeight - 140);
overflow:auto;
}
#centre #page{
background-color:yellow;
position:absolute;
top:0;
left:150px;
height:expression(document.documentElement.clientHeight - 140);
width:650px;
overflow:auto;
}
#footer{
background-color:orange;
position:absolute;
bottom:0;
width:800px;
height:30px;
}
</style>
<!--[if !IE]> <-->
<style type="text/css">
#centre{
position:absolute;
top:110px;
bottom:0;
}
#centre #menu{
position:absolute;
top:0;
bottom:30px;
}
#centre #page{
position:absolute;
top:0;
bottom:30px;
}
</style>
<!--> <![endif]-->
</style>
</head>
<body><div id="conteneur">
<div id="header">header</div>
<div id="banniere">Bannière</div>
<div id="centre">
<div id="menu">menu</div>
<div id="page">
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
lll
</div>
</div>
<div id="footer">pied de page</div>
</div></body>
</html>Code : Tout sélectionner
<html>
<head><title> SANS les TABLES</title>
<style>
BODY {
margin:5px;color:#000000;
background-color:#fff;}
#header {
position:relative;top:0%; left:10%;
height: 5%;
width: 80%;
background-color:#ff0000;
text-align:center; padding:5 px;}
#centre_gauche {
position:relative;top:0%;left:10%;
float:left;
width:15%;
height:90%;
background-color:blue; padding:5 px;}
#centre_droite {
position:relative; top:0%;left:10%;
width:65%;
height:90%;
float:left;
background-color:yellow;padding:5 px;}
#footer {
position:relative; top:0%;left:10%; bottom:5%;
float:left;
width: 80%;
background-color:#008000;
text-align:center;}
</style>
</head>
<body>
<div id="header">--- HEADER ---</div>
<div id="centre_gauche">centre_gauche(MENU)
<p>**************F_I_N</p>
<p>****</p>
<p>****</p>
<p>****</p>
FIN de ligne.</div>
<div id="centre_droite">centre_droite
<p>texte </p>
<p>***</p>
<p>oooooooouuuuuuuuuuuuuuuuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa__________et ca passe !! </p>
<p>***</p>
<p>***</p>
<p>***</p>
<p>***</p>
<p>***</p>
<p>***</p>
<p>***</p>
<p>***</p>
<p>***</p>
<p>***</p>
<p>***</p>
Et voila, derniere ligne et apparition de l'ascenseur pour TOUTE la page :-)<br>
... sur l'ecran 14' de mon portable</div>
<div id="footer">--- FOOTER ---</div>
</body>
</html>
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité