Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1342 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

   overflow auto et IE6 : débordement de div

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

overflow auto et IE6 : débordement de div

n°1763329
dede2a
Posté le 22-07-2008 à 17:50:01  profilanswer
 

Bonjour,
 
 je fais un site dont l'architecture est la suivante :
 - un cadre en haut avec une hauteur fixe et une largeur de 100%
 - un cadre à gauche (sur lequel est positionné un menu en flash) avec une hauteur de 100% et une largeur fixe
 - un cadre central , avec un scroll "auto",(qui sera alimenté à partir du menu flash et d'un code ajax) de largeur égale à 100% moins la largeur du cadre gauche, et une hauteur égale à 100% moins la hauteur du cadre en haut
 
 La contrainte est que le site doit être compatible quelque soit la résolution et pour firefox, IE6 et IE7.
 Or tout fonctionne sous firefox et IE7 mais il y a un décalage sous IE6.  
 En fait, lorsque la page chargée dans le cadre central fait apparaître un scroll dans firefox et IE7, IE6 ne le gère pas de la même façon, il utilise le scroll du navigateur et donc la page "déborde" du cadre.
 
 Voici le code HTML :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>-TITRE-</title>
  6. <link rel="shortcut icon" href="favicon.ico" />
  7. <link href="style_abso.css" rel="stylesheet" type="text/css" />
  8. <script type="text/javascript" language="javascript">AC_FL_RunContent = 0;</script>
  9. <script src="AC_RunActiveContent.js" type="text/javascript" language="javascript"></script>
  10. <script src="code_ajax.js" type="text/javascript" language="javascript"></script>
  11. </head>
  13. <body>
  15. <!-- début cadre logo -->
  16. <div id="cadre_logo"><img src="images/logo.gif" alt="" /></div>
  17. <!-- fin cadre logo -->
  19. <!-- début cadre haut -->
  20. <div id="cadre_haut"><img class="img_haut" src="images/barre_bleue.gif" alt="" /></div>
  21. <!-- fin cadre haut -->
  23. <!-- début cadre gauche -->
  24. <div id="cadre_gauche"></div>
  25. <!-- fin cadre gauche -->
  27. <!-- début menu gauche -->
  28. <div id="menu_flash"><script src="menu.js" type="text/javascript" language="javascript"></script></div>
  29. <!-- fin menu gauche -->
  31. <!-- début cadre centre rempli à partir du menu flash et du code ajax-->
  32. <div id="cadre_centre"></div>
  33. <!-- fin cadre centre -->
  35. </body>
  37. </html>


 
et le code CSS :
 

Code :
  1. html, body {
  2.         height:100%;
  3.         width:100%;
  4.         min-width:600px;
  5.         background-color:#000000;
  6.         font-family:Arial, Helvetica, sans-serif;
  7.         color:#FFFFFF;
  8.         font-size:14px;
  9.         padding:0px;
  10.         margin:0px;
  11. }
  13. #pageindex {
  14.         position:absolute;
  15.         left:50%;
  16.         top:50%;
  17.         width:650px;
  18.         height:450px;
  19.         margin-top:-225px; /* moitié de la hauteur */
  20.         margin-left:-325px; /* moitié de la largeur */
  21. }
  23. .img_index {
  24.         border:none;
  25. }
  27. #cadre_gauche {
  28.         position:absolute;
  29.         background-color:#333333;
  30.         left:0px;
  31.         top:0px;
  32.         width:120px;
  33.         height:100%;
  34.         z-index:1;
  35. }
  37. #cadre_logo {
  38.         position:absolute;
  39.         left:0px;
  40.         top:0px;
  41.         width:335px;
  42.         height:120px;
  43.         z-index:3;
  44. }
  46. #cadre_haut {
  47.         position:absolute;
  48.         left:0px;
  49.         top:0px;
  50.         width:100%;
  51.         height:50px;
  52.         z-index:2;
  53. }
  55. .img_haut {
  56.         height:120px;
  57.         width:100%;
  58. }
  60. #menu_flash {
  61.         position:absolute;
  62.         left:3px;
  63.         top:130px;
  64.         width:114px;
  65.         height:265px;
  66.         z-index:3;
  67. }
  69. #cadre_centre {
  70.         position:absolute;
  71.         background-color:#000000;
  72.         margin-left:130px;
  73.         margin-top:130px;
  74.         margin-right:10px;
  75.         margin-bottom:10px;
  76.         z-index:4;
  77.         overflow:auto;
  78. }
  80. .style_titre {
  81.         color:#333333;
  82.         font-size:16px;
  83.         font-weight:bold;
  84. }


 
J'ai effectué pas mal de recherche mais je n'arrive pas à résoudre ce problème.
 D'ailleurs, ce que je souhaite ressemble à un modèle fourni sur alsacreations http://css.alsacreations.com/modeles/modele12.htm , mais avec une hauteur qui varie en fonction de la résolution.
 
 J'ai également essayé de générer dynamiquement en fonction de la taille de la fenêtre active, un CSS différent pour IE6. Cela fonctionne, mais uniquement si l'utilisateur ne redimensionne pas la fenêtre. Auquel cas, le cadre central ne s'adapte pas.
 
 Y a t-il une solution?
 
 Merci.

mood
Publicité
Posté le 22-07-2008 à 17:50:01  profilanswer
 

n°1763480
gebruik
Posté le 22-07-2008 à 23:22:17  profilanswer
 

Si tu mets une hauteur à 100% à body (au passage pourquoi une largeur à 100% ?), IE6 ne va pas comprendre et va continuer à augmenter la hauteur de body tant que tu restes sur la page (ça se voit à la barre de scroll qui diminue).
Pourquoi tout positionner en absolu ?

n°1763713
dede2a
Posté le 23-07-2008 à 14:28:38  profilanswer
 

Bonjour gebruik,
 
en fait si j'enlève height:100%; dans le body, le cadre à gauche (celui du menu) disparaît sous IE6 ! J'avais trouvé cette solution sur le net...
J'ai tout positionné en absolu parce que sinon les cadres étaient positionnés n'importe comment  :??:  
Je débute en CSS, alors je m'y prend peut-être mal...
Comment penses-tu que je devrais positionner mes cadres?
 
Merci.

Message cité 1 fois
n°1763951
mIRROR
Chevreuillobolchévik
Posté le 24-07-2008 à 04:45:07  profilanswer
 

dede2a a écrit :

Bonjour gebruik,
 
en fait si j'enlève height:100%; dans le body, le cadre à gauche (celui du menu) disparaît sous IE6 ! J'avais trouvé cette solution sur le net...


 
pour eviter le probleme que gebruik souligne remplace
height:100%;
par  
zoom:1;
 
sinon le positionnement en absolute c est vraiment degueu essaie plutot des float


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
n°1764419
dede2a
Posté le 24-07-2008 à 17:17:57  profilanswer
 

Merci mIRROR pour ton aide, mais ça ne fonctionne pas chez moi.
 
Mais ce n'est pas grave, "j'ai" trouvé une autre solution (merci C_S_S  ;) ). Si ça interresse quelqu'un qu'il me fasse signe.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

   overflow auto et IE6 : débordement de div

 

Sujets relatifs
problème float et lien hypertexte IE6[Résolu] SWF inactif sous IE6
récupérer un ID auto-incrémenté après son insert[VBA/Excel]Filtre Auto et copie des lignes résultantes
Hibernate : Auto Increment sur une propriété[reglé] decalage ie6 en css
[MySQL] Alimentation auto d'une base de donnéesUpdate sur un champs AUTO-INCREMENT
[Zend Eclipse] : pas d'auto complétiondebordement sur un DIV
Plus de sujets relatifs à : overflow auto et IE6 : débordement de div

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.068 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR