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 :
et le code CSS :
J'ai effectué pas mal de recherche, notamment sur Alsacreations, mais je n'arrive pas à résoudre ce problème.
D'ailleurs, ce que je souhaite ressemble au modèle 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.
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 :
<!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>
<title>-TITRE-</title>
<link rel="shortcut icon" href="favicon.ico" />
<link href="style_abso.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" type="text/javascript" language="javascript"></script>
<script src="code_ajax.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<!-- début cadre logo -->
<div id="cadre_logo"><img src="images/logo.gif" alt="" /></div>
<!-- fin cadre logo -->
<!-- début cadre haut -->
<div id="cadre_haut"><img class="img_haut" src="images/barre_bleue.gif" alt="" /></div>
<!-- fin cadre haut -->
<!-- début cadre gauche -->
<div id="cadre_gauche"></div>
<!-- fin cadre gauche -->
<!-- début menu gauche -->
<div id="menu_flash"><script src="menu.js" type="text/javascript" language="javascript"></script></div>
<!-- fin menu gauche -->
<!-- début cadre centre rempli à partir du menu flash et du code ajax-->
<div id="cadre_centre"></div>
<!-- fin cadre centre -->
</body>
</html>et le code CSS :
@charset "utf-8";
/* CSS Document */
html, body {
height:100%;
width:100%;
min-width:600px;
background-color:#000000;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:14px;
padding:0px;
margin:0px;
}
#pageindex {
position:absolute;
left:50%;
top:50%;
width:650px;
height:450px;
margin-top:-225px; /* moitié de la hauteur */
margin-left:-325px; /* moitié de la largeur */
}
.img_index {
border:none;
}
#cadre_gauche {
position:absolute;
background-color:#333333;
left:0px;
top:0px;
width:120px;
height:100%;
z-index:1;
}
#cadre_logo {
position:absolute;
left:0px;
top:0px;
width:335px;
height:120px;
z-index:3;
}
#cadre_haut {
position:absolute;
left:0px;
top:0px;
width:100%;
height:50px;
z-index:2;
}
.img_haut {
height:120px;
width:100%;
}
#menu_flash {
position:absolute;
left:3px;
top:130px;
width:114px;
height:265px;
z-index:3;
}
#cadre_centre {
position:absolute;
background-color:#000000;
margin-left:130px;
margin-top:130px;
margin-right:10px;
margin-bottom:10px;
z-index:4;
overflow:auto;
}
.style_titre {
color:#333333;
font-size:16px;
font-weight:bold;
}J'ai effectué pas mal de recherche, notamment sur Alsacreations, mais je n'arrive pas à résoudre ce problème.
D'ailleurs, ce que je souhaite ressemble au modèle 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.