Bonjour les gens!
J'ai un problème qui semble être récurrent pour tous...
Je travaille actuellement sur un site dont la mise en page se base sur l'exemple n°14 du site (dans les tutoriels).
Cette mise en page se base sur deux div principales: Une div de gauche sert de marge et reste fixe; la deuxième prend la partie principale de la page et porte tout le contenu.
Alors que sur Firefox la div gauche qui me sert de marge est fixe comme prévu, IE ne le prends pas en compte; quelqun pourrait m'expliquer pourquoi?
Et autre problème concernant mon image/menu: mon menu fait en images- survol fonctionne nickel sur FF mais là encore, IE semble faire le difficile...
Quelqun pourrait-il éclairer ma pauvre lanterne?
A savoir pour ceux qui rencontrent le même problème: bien attribuer à la div "parent" la position relative...car si Safari interprête correctement, IE lui a besoin d'une aide à la lecture...
Dans mon cas c'est la div id="contenu" à qui j'avais oublié cet attribut magique...
A savoir aussi: l'attribut "fixed" n'est pas reconnu sur IE... alors attention!
Voici mon code, histoire de voir plus clair...
Et mes CSS:
Merci d'avance!
Modifié par yukie (07 Jun 2006 - 16:34)
J'ai un problème qui semble être récurrent pour tous...
Je travaille actuellement sur un site dont la mise en page se base sur l'exemple n°14 du site (dans les tutoriels).
Cette mise en page se base sur deux div principales: Une div de gauche sert de marge et reste fixe; la deuxième prend la partie principale de la page et porte tout le contenu.
Alors que sur Firefox la div gauche qui me sert de marge est fixe comme prévu, IE ne le prends pas en compte; quelqun pourrait m'expliquer pourquoi?
Et autre problème concernant mon image/menu: mon menu fait en images- survol fonctionne nickel sur FF mais là encore, IE semble faire le difficile...
Quelqun pourrait-il éclairer ma pauvre lanterne?
A savoir pour ceux qui rencontrent le même problème: bien attribuer à la div "parent" la position relative...car si Safari interprête correctement, IE lui a besoin d'une aide à la lecture...
Dans mon cas c'est la div id="contenu" à qui j'avais oublié cet attribut magique...
A savoir aussi: l'attribut "fixed" n'est pas reconnu sur IE... alors attention!
Voici mon code, histoire de voir plus clair...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Essai de présentation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<style media="all" type="text/css">@import "chap4.css"; </style>
<script language="javascript">
function affiche(nb){
for(var i=1;i<11;i++)
{
document.getElementById(i).style.visibility = "hidden";
}
document.getElementById(nb).style.visibility = "visible";
}
</script>
</head>
<body>
<div id="gauche">
<div id="img_menu">
<ul id="img_bouge">
<li id="blob1"><a href="chap1.htm" title="Les stimulations"></a></li>
<li id="blob2"><a href="chap3.htm" title="L'épithélium sensoriel"></a></li>
<li id="blob3"><a href="chap2.htm" title="Les récepteurs vestibulaires"></a></li>
<li id="blob4"><a href="#"></a></li>
</ul>
</div>
<ul id="menu">
<li><a href="c1d.htm" target="premier"><strong>Sous-partie1</strong></a></li>
<li><a href="essaip2.htm"><strong>Sous-partie2</strong></a></li>
<li><a href="essaip3.htm"><strong>Sous-partie3</strong></a></li>
</ul>
</div>
<div id="contenu">
<div id="ecrit">
<h2>Le ganglion vestibulaire</h2>
<p>
<iframe name="premier" src="c1d.htm" width="550" height="200" marginheight="0" align="right" scrolling="auto" frameborder="0"></iframe></p>
</div>
<div id="bgd">
<iframe name="images" src="galerie.htm" width="550" height="300" marginheight="0" align="right" scrolling="auto" frameborder="0"></iframe>
</div>
</div>
</body>
</html>
Et mes CSS:
/* CSS issu des tutoriels css.alsacreations.com */
html, body {
height: 100%;
width: 100%;
overflow: auto;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
overflow:none;
}
#contenu {
height: 100%;
margin-left: 331px;
overflow: auto;
background-image:url(images/fond4essai.jpg);
background-repeat:no-repeat;
}
#ecrit
{
position:relative;
top: 150px;
left:43px;
width:550px;
padding:0;
}
#ecrit h2
{
left:70px;
padding: 10px ;
width:500px;
top:0;
height:8px;
text-indent:200px;
line-height:5px ;
font-size: 1.4em ;
color: #993399 ;
border-bottom: 1px solid #993399 ;
}
#ecrit p
{
top: 80px;
height:200px;
left:50px;
width:550px;
padding: 10px ;
text-align: justify;
text-indent: 2em;
line-height: 1.7em;
border: 1px solid #993399;
}
#bgd
{
position:relative;
padding: 10px ;
width:550px;
top:200px;
bottom:0px;
left:43px;
height:300px;
color: #993399 ;
border: 1px solid #993399;
}
#bgd img{
width:500;
left:150px;
top:60px;
border:1px solid #993399;
}
#gauche {
position: absolute;
top:0;
left:0;
background-image:url(images/marge4.jpg);
background-repeat:no-repeat;
width: 331px;
height: 100%;
}
div#img_menu
{
position:absolute;
bottom:290px;
width:332px;
height:285px;
margin:0px;
padding:0px;
border:2px solid #993399;
}
#img_bouge {
width: 330px;
height: 285px;
background: url(images/img_menu4.jpg);
margin:0;
padding: 0;
position: relative;
}
#img_bouge li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}
#img_bouge a {display: block;}
#blob1 {left: 29px; top: 17px; width: 240px; height:230px;}
#blob2 {left: 95px; top: 118px; width: 79px; height: 75px;}
#blob3 {left: 45px; top: 15px; width: 120px; height: 170px;}
#blob1 a {height: 230px;}
#blob2 a {height: 75px;}
#blob3 a {height: 170px;}
#blob1 a:hover {background: url(images/img_menu1.gif) no-repeat;}
#blob2 a:hover {background: url(images/img_menu3.gif) no-repeat;}
#blob3 a:hover {background: url(images/img_menu2.gif)no-repeat;}
ul#menu{
position:absolute;
font:1.4em;
left:100px!important;
left:90px;
float:none;
list-style-type:none;
bottom:100px!important;
bottom:50px;
width:100px;
height:50px;
}
#menu a
{
display: block;
height: 50px;
width:50px!important;
width:150px;
text-decoration:none;
color: #000000;
text-indent: 50px!important;
text-indent: 10px;
text-align:right;
background-image:url(images/puce0.gif);
background-position:left top;
background-repeat: no-repeat;
}
#menu a:hover{
background-image:url(images/puce4.gif);
color:#993399;
background-position:left top;
background-repeat: no-repeat;
text-decoration: underline;
}
.mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
a.test {
text-decoration: none;
color: #222;
}
Merci d'avance!
Modifié par yukie (07 Jun 2006 - 16:34)
