18073 sujets

Questions générales et questions de débutants

PB gabarit mise en page IE

Et bonjour les gens!

Ici petite yukie qui découvre le monde fabuleux des CSS depuis quelques mois...et qui rencontre apparemment un pb récurrent à tous;

alors voilà:
J'ai utilisé l'exemple de mise en page n°14 de mise en page sur CSS;
sur firefox ça marche nickel, pas de problème.
Par contre sur IE...rien à faire! il ne prend pas en compte le fait que la div de gauche est fixe...

Pourriez vous éclairer ma pauvre lanterne? Smiley confused

Voici mon code, histoire de voir un peu mieux la chose...

<!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=iso-8859-1" />
<title>prout</title>
<style media="all" type="text/css">@import "modele.css"; </style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function noclick()
{
if (event.button==2)
{
alert('Copyright © LIPCOM2006');
}
}
document.onmousedown=noclick
//-->

</SCRIPT>
</head>

<body>

<div id="principal">

<div id="gauche">
<div id="img_menu">
	  	<ul id="img_bouge">
			<li id="blob1"><a href="chap2.htm" title="Les récepteurs vestibulaires"></a></li>
  			<li id="blob2"><a href="chap3.htm" title="L' épithélium sensoriel"></a></li>
  			<li id="blob3"><a href="chap4.htm" title="Le ganglion vestibulaire"></a></li>
  			<li id="blob4"><a href="#"></a></li>
  			</ul>
</div>


			<ul id="menu">			
			<a href="c1a.htm" target="premier"><strong>Introduction</strong></a></dt>			
			<a href="c2a.htm" target="premier"><strong>L'oreille interne</strong></a></dt>			
			<a href="c3a.htm" target="premier"><strong>Détails</strong></a></dt>
		
			
  </ul>
</div>


<div id="contenu">

	<div id="ecrit">
			<h2>Les stimulations</h2>
			<p>
			<iframe name="premier" src="c1a.htm" width="550"  height="200" 
			marginheight="2" align="right" scrolling="auto" frameborder="0"></iframe>
			</p>	
			</div>
			
	<div id="bgd">
			<iframe name="images" src="galerie.htm" width="550"  height="300" marginheight="2" align="right" scrolling="auto" frameborder="0"></iframe>
		</div>
		
</div>

</div>
</body>
</html>


Et le CSS qui va avec:


html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: auto;
}

	body {
	position:absolute;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	margin: 0;
	padding: 0;
	overflow:none;
}

#principal{

	position:relative;
	width:100%;
	height:100%;



}
#contenu {
	height: 100%;
	top:100px;
	margin-left: 331px;
	overflow: auto;
	background-image:url(images/fond1essai.jpg);
	background-repeat:no-repeat; 

}

#ecrit
{
	
	position:relative;
	top: 100px;
	left:65px;	
	width:550px;
	padding:0;
	
}

#ecrit h2
{
	
	left:60px;
	padding: 50px ;
	width:500px;
	top:0;
	height:8px;
	text-indent:200px;
	line-height:5px ;
	font-size: 1.4em ;
	color: #cc3300 ;
	border-bottom: 1px solid #cc3300 ;
}

#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 #cc3300;
	
}

#bgd
{
	
	position:relative;
	padding: 10px ;
	width:550px;
	top:200px;
	bottom:0px;
	left:65px;	
	height:300px;
	color: #cc3300 ;
	border: 1px solid #cc3300 ;
	
}


#bgd img{

	
	width:500;
	left:150px;
	top:60px;
	border:1px solid #cc3300;

}


#gauche {
	
	position:absolute!important;
	overflow: auto;
	height: 100%; 
	top:0;
	left:0;
	background-image:url(images/marge.jpg);
	background-repeat:no-repeat;!important;
	width: 331px;

}



div#img_menu

{
	bottom:450px;
	width:332px;
	height:285px;
	margin:0px;
	padding:0px;
	border:2px solid #cc3300;

}




#img_bouge {
 	width: 330px;
 	height: 285px;
 	background: url(images/img_fond1bsi.gif);
 	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: 45px; top: 15px; width: 120px; height:170px;}
#blob2 {left: 95px; top: 118px; width: 79px; height: 75px;}
#blob3 {left: 110px; top: 68px; width: 220px; height: 70px;}
 

  


#blob1 a {height: 170px;}
#blob2 a {height: 75px;}
#blob3 a {height: 97px;}


#blob1 a:hover {background: url(images/img_menu2.gif) no-repeat;}
#blob2 a:hover {background: url(images/img_menu3.gif) no-repeat;}
#blob3 a:hover {background: url(images/img_menu4.gif)no-repeat;}


ul#menu{

	position:absolute;
	font:1.4em;
	left:100px;
	float:none;
	list-style-type:none;
	top:380px!important;
	bottom:250px;
	width:100px;
	height:50px;
	padding:none;
	
	}
	
	
	
#menu a
{
	height: 50px;
	width:100px!important;
	width:200px;
	left:100px!important;
	left:60px;
	text-decoration:none;
	color: #000000;
	text-indent: 30px!important;
	text-indent: 100px;
	text-align:right;
	background-image:url(images/puce0.gif);
	background-position:left-top;
	background-repeat: no-repeat;
}



#menu a:hover{
	background-image:url(images/puce1.gif);
	color:#cc3300;
	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 à tous!
Smiley ravi
Sujet clos
Aller à