Aller au contenu

Tester une page XHTML avec <DIV> fixes

SuperVespa

Par SuperVespa
dans (X)HTML et CSS

 Partager

Sujets conseillés

SuperVespa

SuperVespa

Posté
Posté (modifié)

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é par SuperVespa
Lien vers le commentaire
Partager sur d’autres sites
SuperVespa

SuperVespa

Posté
  • Auteur
Posté

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:

Lien vers le commentaire
Partager sur d’autres sites
Mammouthland

Mammouthland

Posté
Posté

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...

Lien vers le commentaire
Partager sur d’autres sites
SuperVespa

SuperVespa

Posté
  • Auteur
Posté
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> ?

:(

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...