IPB

Bienvenue invité ( Connexion | Inscription )

 
 Reply to this topicStart new topic
> 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
LoupSolitaire
posté 8 Aug 2008, 18:27
Message #2


Macbidouilleur de bronze !
**

Groupe : Membres
Messages : 305
Inscrit : 12 Jan 2003
Lieu : Grande plaine aride, à droite après le cactus (94)
Membre no 5 590
Hello,

tu parles de IE6 puisque ça semble bien se positionner avec IE7 ?

A+,
Loup
Go to the top of the page
 
+Quote Post
SuperVespa
posté 8 Aug 2008, 19:18
Message #3


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 859
Inscrit : 9 Oct 2004
Lieu : En Suisse
Membre no 24 948
CITATION(LoupSolitaire @ 8 Aug 2008, 19:27) [snapback]2760403[/snapback]
tu parles de IE6 puisque ça semble bien se positionner avec IE7 ?

Salut LoupSolitaire,

N'ayant pas installé de mise-à-jour sur mon PC (Windows XP), j'imagine que c'est en version IE 6 que j'ai testé ma page. Idéalement, je cherche une solution valable pour tous les navigateurs ...


--------------------
SuperVespa sur MacOS 10.14.6 et MacOS Server 5.3.1
Go to the top of the page
 
+Quote Post
andre6006
posté 8 Aug 2008, 20:53
Message #4


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
LoupSolitaire
posté 8 Aug 2008, 20:53
Message #5


Macbidouilleur de bronze !
**

Groupe : Membres
Messages : 305
Inscrit : 12 Jan 2003
Lieu : Grande plaine aride, à droite après le cactus (94)
Membre no 5 590

Hello SuperVespa,


Ton fichier d'origine fonctionne bien avec Safari, Firefox et IE7.

Ce fichier, c'est ce que j'ai réussi de mieux avec IE6.

J'ai fait un petit ajout dans body, #scroller et #bas.

Tu verras que le bas de ta page est mangé par le pied de page. Il faut malheureusement prévoir des sauts de page en bas de document.

Je te conseillerais de conserver ton CSS pour tous les navigateurs et à l'aide d'une balise conditionnelle [!if IE6] (ou quelque chose dans le genre) écraser les styles particuliers à IE6.

Enfin, je n'ai pas de mérite particulier, je me suis servi de ce lien. La gestion des conteneurs fixes est apparemment un cauchemar sous IE6 (comme beaucoup de choses maintenant).

Au plaisir,
Loup



Fichier(s) joint(s)
Fichier joint  page_test.html ( 4.97 Ko ) Nombre de téléchargements : 12
 
Go to the top of the page
 
+Quote Post
SuperVespa
posté 11 Aug 2008, 16:07
Message #6


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 859
Inscrit : 9 Oct 2004
Lieu : En Suisse
Membre no 24 948
Salut andre6006 et LoupSolitaire,

Merci pour vos messages et votre aide. Malheureusement, vos deux fichiers ne fonctionnent pas sur mon PC (Windows XP, installation standard et IE 6). C'est vraiment la galère avec Microsoft !!!

Si un «maître des CSS» m'offre une solution ... ou un miracle pour faire plier ce foutu navigateur en version 6, je lui serai éternellement reconnaissant. laugh.gif

Mais je pense qu'on va sagement se diriger vers une autre solution graphique, plus simple à mettre en oeuvre que le bandeau fixe en bas.

wink.gif


--------------------
SuperVespa sur MacOS 10.14.6 et MacOS Server 5.3.1
Go to the top of the page
 
+Quote Post
« 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: Standard · Passer au mode : Linéaire+ · Passer au mode : Arborescent

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

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