Je travaille sur un modèle de page XHTML (avec styles CSS intégrés, pour le test) avec des conteneurs <div> qui doivent rester en place, même lorsqu'on actionne le défilement du contenu principal.
Ma solution semble fonctionner correctement. Je l'ai testé sous Mac OS avec Safari et Firefox. Au bureau, je peux également faire des tests sous Windows XP avec IE et FireFox. Par contre, je ne dispose pas de version plus ancienne du système Windows, ni de Vista.
Qui peut vérifier si l'affichage est correct, également sous ces versions ??? Bien entendu, tous vos conseils avisés sont également bienvenus ...
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ma page XHTML test</title>
<style type="text/css">
<!--
body {
background-color: #FFCCFF;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 0px;
}
p {
margin-top: 0px;
margin-bottom: 12px;
}
#scroler {
width: 100%;
background-color: #CCCCCC;
overflow: auto;
height: auto;
position: absolute;
margin: 0px;
padding: 0px;
top: 0px;
bottom: 60px;
}
#main {
width: 400px;
background-color: #FFFFFF;
left: 50%;
position: absolute;
margin-left: -300px;
margin-top: 20px;
padding-top: 20px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 100px;
text-align: justify;
}
#adresse {
background-color: #FF9966;
height: 60px;
width: 100%;
text-align: center;
font-weight: bold;
color: #FFFFFF;
padding: 0px;
overflow: hidden;
margin: 0px;
bottom: 0px;
position: absolute;
}
#projets {
background-color: #FF9966;
height: 250px;
width: 200px;
position: absolute;
left: 50%;
top: 50px;
margin-left: -500px;
padding: 0px;
text-align: center;
font-weight: bold;
color: #FFFFFF;
}
#menus {
background-color: #FF9966;
height: 250px;
width: 200px;
position: absolute;
left: 50%;
top: 49px;
margin-left: 300px;
padding: 0px;
text-align: center;
font-weight: bold;
color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div id="scroler">
<div id="main">
<P>DEBUT DU TEXTE</P>
<p>Erant olim in quadam civitate rex et regina, quibus fuerunt tres pulcherrimae filIae. Earum vero majores natu, quamquam insigni specie erant, tamen humanis verbis satis laudari poterant.</p>
<p>At minoris pulchritudo tam mira erat ut humano sermone ne exprimi quidem posset. Jam cives advenaeque multi puellam, ut deam, summa religione colebant ferebantque alteram Venerem in mediis hominibus versari.</p>
<p>Fama denique per gentes latius manante, a proximis insulis atque etiam a terrae omnibus provinciis plurimi homines ad puellam conspi- ciendam longis itineribus convenerunt.</p>
<p>Erant olim in quadam civitate rex et regina, quibus fuerunt tres pulcherrimae filIae. Earum vero majores natu, quamquam insigni specie erant, tamen humanis verbis satis laudari poterant.</p>
<p>At minoris pulchritudo tam mira erat ut humano sermone ne exprimi quidem posset. Jam cives advenaeque multi puellam, ut deam, summa religione colebant ferebantque alteram Venerem in mediis hominibus versari.</p>
<p>Fama denique per gentes latius manante, a proximis insulis atque etiam a terrae omnibus provinciis plurimi homines ad puellam conspi- ciendam longis itineribus convenerunt.</p>
<p>Ipsius autem Veneris templis relictis, pervenit res ad aures verae deae quae, ubi se neglegi honoresque suos ad puellam mortalem conferri cognovit, maxima ira incensa clamavit: Non diutius gaudebit ista.Erant olim in quadam civitate rex et regina, quibus fuerunt tres pulcherrimae filIae. Earum vero majores natu, quamquam insigni specie erant, tamen humanis verbis satis laudari poterant.</p>
<p>At minoris pulchritudo tam mira erat ut humano sermone ne exprimi quidem posset. Jam cives advenaeque multi puellam, ut deam, summa religione colebant ferebantque alteram Venerem in mediis hominibus versari.</p>
<p>Fama denique per gentes latius manante, a proximis insulis atque etiam a terrae omnibus provinciis plurimi homines ad puellam conspi- ciendam longis itineribus convenerunt.</p>
<p>Ipsius autem Veneris templis relictis, pervenit res ad aures verae deae quae, ubi se neglegi honoresque suos ad puellam mortalem conferri cognovit, maxima ira incensa clamavit: Non diutius gaudebit ista.</p>
<P>FIN DU TEXTE</P>
</div>
</div>
<div id="projets"><br />
<p>Conteneur pour les projets</p></div>
<div id="menus"><br />
<p>Conteneur pour les menus</p></div>
<div id="adresse"><br />Adresse et logo</div>
</body>
</html>
Un grand merci par avance !!!
