Tester une page XHTML avec <DIV> fixes

SuperVespa · 7 Août 2008

Salut à tous,

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" &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=&quot;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 !!!

Modifié 7 Août 2008 par SuperVespa

baulet · 7 Août 2008

bonjour,

déjà mets ta page en ligne....ca serait pas mal pour la tester... :whistling:

Mammouthland · 8 Août 2008

Tu peux tester tous les navigateurs possibles et imaginables sur BrowserShots

SuperVespa · 12 Août 2008

Merci pour vos suggestions ...

Le problème semble lié à IE en version 6, qui est incapable d'afficher des <div> en position fixe (contrairement à Safari, FireFox et iE en version 7). Peut-être connaissez-vous une solution fiable pour rendre mon projet compatible ?

:unsure:

Mammouthland · 13 Août 2008

Bonjour,

Il y a quelque chose que je dois mal comprendre. Pour qu'un cadre reste à la même place, il faut mettre un position:fixed, et je n'en vois pas dans le code CSS ... (mais j'ai peut-être mal vu)

Cela dit, IE6 n'implémente pas cette option, à part pour la position des images (background-attachment:fixed)

Donc, en pur CSS, pas de solution a priori...

SuperVespa · 13 Août 2008

Pour qu'un cadre reste à la même place, il faut mettre un position:fixed, et je n'en vois pas dans le code CSS

Salut Mammouthland,

Effectivement, il n'y en a pas. Car c'est uniquement le contenu de «scroler» qui doit défiler (overflow: auto). Les autres <div> «adresse», «menus» et «projets» sont en position «absolute», donc, normalement, ils ne bougent plus une fois leur position chargée.

Cela dit, IE6 n'implémente pas cette option, à part pour la position des images (background-attachment:fixed)

C'est justement parce qu'IE 6 n'interprète pas cette option que j'ai cherché une solution sans le code «fixed». Mais cette «%&*°%» de version ne prend même pas en compte la valeur «absolute», comme tous les autres navigateurs, tant sur Mac que sur Windows ...

Donc, en pur CSS, pas de solution a priori...

C'est malheureusement ce qu'il me semble aussi. Peut-être une solution avec une <table> ?

Mammouthland · 14 Août 2008

Si j'ai bien tout compris à ce qui est expliqué ici , il suffit de mettre un width pour que IE6 retrouve ses esprits. Or c'est déjà ce qu'il y a dans le code si je vois bien...

Donc, là... je sèche...

Connexion

Tester une page XHTML avec <DIV> fixes

Sujets conseillés

SuperVespa

baulet

Mammouthland

SuperVespa

Mammouthland

SuperVespa

Mammouthland

Veuillez vous connecter pour commenter

Parcourir

Activité