28220 sujets

CSS et mise en forme, CSS3

[Résolu] Disparition d'un block sous IE6 PC

Bonjour,

Mon div header n'apparait pas sous IE [edit : IE 6.0 PC] et j'ai beau bidouiller, je ne comprends pas pourquoi...

Une idée ?


<!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>Test</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> 
<meta name="Description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	margin: 0px;
	padding: 0px;
	background-color: #FFF;
}

#conteneur {
	position: absolute;
	left: 50%;
	margin-left: -384px;
	width: 768px;
	background-repeat:repeat-y;
	background-position: 0px 10px;
}

#logo {
	margin: 0px;
	padding: 0px;
	height: 100px;
	background-color: #83735A;
}

#centre {
	width: 455px;
	float: left;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0px;
	padding-top: 30px;
	
}
#gauche {
	width: 167px;
	font-size: 0.85em;
	float: left;
	margin: 0px;
	padding-top: 0;
	background-image: url(../WebMediaFR/gauche.gif);
	background-repeat: repeat-y;
	height: 474px;
	background-color: #990000;
}
#droite {
	width: 140px;
	font-size: 0.85em;
	float: left;
	margin-left: 5px;
	height: 386px;
	background-image:url(../WebMediaFR/droite.gif);
	background-position: 0px 30px;
	background-repeat: no-repeat;
	background-color: #CCCCCC;
}
#header {
	width: 503px;
	background-image: url(../WebMediaFR/header.gif);
	height: 42px;
	position: absolute;
	left: 197px;
	top: 81px;
	background-color: #FF0000;
}
-->
</style>
</head>

<body>
<div id="conteneur">
	<div id="logo">
	&nbsp;
	</div>
	<div id="gauche">
	&nbsp;  
    </div>
    <div id="header">
	&nbsp;
	</div>
	<div id="centre">
	&nbsp;
	</div>
	<div id="droite">
	&nbsp;
	</div>	

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

Modifié par piloue (09 Mar 2005 - 10:25)
IE PC ? Sous Mac on le voit ton header mais le bloc de droite le chevauche (pas sous Safari ni Firefox), j'ai réussi à le mettre dessus en positionnant le bloc droite en absolute, voici mon 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>
<title>Test</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta name="Description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
 <!--
 body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 0.9em;
 margin: 0px;
 padding: 0px;
 background-color: #FFF;
 }

 #conteneur {
	position: relative;
	margin-left: auto;
	width: 768px;
	margin-right: auto;
	background-color: #FFFF33;
 }
 #header {
	width: 503px;
	height: 42px;
	position: absolute;
	left: 197px;
	top: 81px;
	background-color: #FF0000;
	z-index: 100;
 }
 #logo {
 margin: 0px;
 padding: 0px;
 height: 100px;
 background-color: #83735A;
 }

 #centre {
 width: 455px;
 float: left;
 padding-right: 0;
 padding-bottom: 5px;
 padding-left: 0px;
 padding-top: 30px;

 }
 #gauche {
	width: 167px;
	font-size: 0.85em;
	background-image: url(../WebMediaFR/gauche.gif);
	background-repeat: repeat-y;
	height: 474px;
	background-color: #990000;
	left: 0px;
	top: 100px;
	margin-right: 5px;
	margin-top: 0px;
 }
 #droite {
	width: 140px;
	font-size: 0.85em;
	margin-left: 5px;
	height: 386px;
	background-image:url(../WebMediaFR/droite.gif);
	background-position: 0px 30px;
	background-repeat: no-repeat;
	background-color: #CCCCCC;
	position: absolute;
	z-index: 10;
	top: 100px;
	right: 0px;
 }

 -->
 </style>
</head>
<body>
<div id="conteneur">
  <div id="logo">   </div>
  <div id="gauche">   </div>
  <div id="centre">   </div>
  <div id="droite">   </div>
  <div id="header">   </div>
</div>
</body>
</html>

Vois si tu peux en sortir quelque chose... Smiley rolleyes
Effectivement, je parlais de IE6.0 PC, je n'ai plus trop d'espoir de bonnes mises en pages sous IE 5, mac ou pc.

Ton positionnement à l'air de bon fonctionner.
Merci beaucoup, tu m'enleves une épine du peid !
Arf, il y a un autre soucis : le texte tapé dans le div centre ne se positionne pas correctement Smiley decu
Bon, en m'inspirant de ce que tu as fait (pas l'habitude de faire du positionnement absolue, je suis généralement adepte des float), j'ai réussi à contourner le problème.

 body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
margin: 0px;
padding: 0px;
background-color: #FFF;
}

#conteneur {
position: relative;
margin-left: auto;
width: 768px;
margin-right: auto;
background-color: #FFFF33;
}
#header {
width: 503px;
height: 42px;
position: absolute;
left: 197px;
top: 81px;
background-color: #FF0000;
z-index: 100;
}
#logo {
margin: 0px;
padding: 0px;
height: 100px;
background-color: #83735A;
}

#centre {
width: 455px;
position: absolute;
z-index: 10;
top: 80px;
left: 167px;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0px;
padding-top: 30px;

}
#gauche {
width: 167px;
font-size: 0.85em;
height: 474px;
background-color: #990000;
position: absolute;
left: 0px;
top: 100px;
margin-right: 5px;
margin-top: 0px;
}
#droite {
width: 140px;
font-size: 0.85em;
margin-left: 5px;
height: 386px;
padding-top: 30px;
background-position: 0px 30px;
background-color: #CCCCCC;
position: absolute;
z-index: 10;
top: 100px;
right: 0px;
}


En plus ça tourne sous FireFox PC et Mac, Safari, IE6.0 PC, IE Mac et presque sous IE5.0 PC (tout est ferré à gauche, mai ça roule)
Sujet clos
Aller à