IPB

Bienvenue invité ( Connexion | Inscription )

> Page XHTML/CSS avec une DIV fixe, problème d'affichage avec Internet Explorer
Options
SuperVespa
posté 8 Aug 2008, 13:38
Message #1


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 859
Inscrit : 9 Oct 2004
Lieu : En Suisse
Membre no 24 948
Salut à tous !

Je sèche avec la mise en page d'un modèle XHTML basée sur des CSS, intégrés à la page pour ce test. Le résultat obtenu avec Safari et FireFox répond à mes attentes (tant sur Mac que sur Windows XP), mais malheureusement (évidemment) pas avec Internet Explorer.

Ce dernier n'affiche pas correctement la DIV du bas (fixée en position absolue). De même, alors que les 2 cadres «Menus» et «Projets» doivent rester en place, ils se déplacent lors du défilement de la page (partie blanche).

Saisie d'écran du résultat avec Safari :



Code source de la page «test» :



Peut-être avez-vous une solution à me proposer ? Par avance, merci à ceux qui pourront m'aider ...

smile.gif
Fichier(s) joint(s)
Fichier joint  Saisie_Safari.gif ( 49.15 Ko ) Nombre de téléchargements : 65
Fichier joint  page_test.html ( 4.92 Ko ) Nombre de téléchargements : 46
 


--------------------
SuperVespa sur MacOS 10.14.6 et MacOS Server 5.3.1
Go to the top of the page
 
+Quote Post
 
 Start new topic
Réponse(s)
andre6006
posté 8 Aug 2008, 20:53
Message #2


Macbidouilleur de bronze !
**

Groupe : Membres
Messages : 337
Inscrit : 26 Aug 2005
Membre no 44 536
Tu ne peut pas avoir de complètement fixe avec IE6 (ou alors c'est très laid). Par contre tu peux avoir quelque chose de fixe avec firefox, safari, IE7,... et mouvant avec IE6.
Cette page en ait l'exemple (testé sur les différents navigateurs) :
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>Page XHTML avec une DIV fixe</title>
<style type="text/css">
<!--
body {
    margin: 0px;
    padding: 0px;
    background-color: #CCCCCC;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
p {
    padding: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 1em;
    margin-left: 0px;
}
#scroller {
    background-color: #CCCCCC;
    text-align:center;
    overflow: auto;
    width: 100%;
    top: 0px;
    padding: 0px;
    position: absolute;
    left: 0px;
    overflow: auto;
    z-index: 1;
}
#main {
    text-align:left;
    width: 520px;
    margin-top: 20px;
    margin-right: auto;
    padding-top:40px;
    padding-bottom:10px;
    margin-left: auto;
    background-color: #FFFFFF;
}
#text {
    text-align:left;
    width: 400px;
    margin-left:60px;
    margin-right:60px;
}


#menus{
    width:880px;
    position: absolute;
    left:50%;
    margin-left:-440px;
    z-index: 2;
}
#menus[id]{
    position: fixed;

}


#gauche {
    background-color: #FFCC66;
    height: 200px;
    width: 200px;
    float:left;
    
    
}
#droite {
    background-color: #FFCC66;
    height: 200px;
    width: 200px;
    float:right;
    
}
.case{
    text-align: center;
    font-weight: bold;
    color: #FFFFFF;
    margin-top: 60px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;





}


#bas {
    background-color: #FFCC66;
    overflow: hidden;
    width: 100%;
    height: 40px;
    bottom:0px;
    left:0px;
    position:fixed;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    padding-top: 20px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    z-index: 3;
}
-->
</style>
</head>

<body>
<div id="menus">
<div id="gauche"><div class="case">Projets</div></div>
<div id="droite"><div class="case">Menus</div></div>
</div>


<div id="scroller">

  <div id="main">
  <div id="text">
    <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>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>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.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>FIN DU TEXTE</p>
  </div>
  </div>
  <div id="bas">Adresse et logo</div>
</div>

</body>
</html>
Go to the top of the page
 
+Quote Post

Les messages de ce sujet
- SuperVespa   Page XHTML/CSS avec une DIV fixe   8 Aug 2008, 13:38
- - LoupSolitaire   Hello, tu parles de IE6 puisque ça semble bien s...   8 Aug 2008, 18:27
|- - SuperVespa   CITATION(LoupSolitaire @ 8 Aug 2008, 19:2...   8 Aug 2008, 19:18
- - andre6006   Tu ne peut pas avoir de complètement fixe avec IE...   8 Aug 2008, 20:53
- - LoupSolitaire   Hello SuperVespa, Ton fichier d'origine fonc...   8 Aug 2008, 20:53
- - SuperVespa   Salut andre6006 et LoupSolitaire, Merci pour vos ...   11 Aug 2008, 16:07

« Sujets plus anciens · Les Langages Du Web · Sujets plus récents »
 

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 

Modes d'affichage: Passer au mode : Standard · Passer au mode : Linéaire+ · Arborescent

Suivre ce sujet · Envoyer ce sujet · Imprimer ce sujet · S'abonner à ce forum

Nous sommes le : 10th August 2025 - 13:44
Powered By IP.Board 2.3.6 © 2025  IPS, Inc.