28173 sujets

CSS et mise en forme, CSS3

J'ai un probléme pour centrer une div

J'ai un probléme avec ma div nommée "contener", elle ne se centre pas alors que j'ai définit sa taille et les marges en auto. Le probléme ne survient pas sur firefox, mais sur IE oui...


Voici: mon code HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Portfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="portofolio.css" rel="stylesheet" type="text/css" />
<body>
<p class="Style4">PORTFOLIO</p>
<p class="Style1">Auteur : Benjamin DESCAZALS</p>
<p class="Style1"><img src="images/flash.gif" alt="Animations flash" width="29" height="35">Animations flash: R&eacute;alis&eacute;es avec Flash [5 - CS3], Fireworks [5 - 8], Photoshop [7 - CS3], Illustrator [CS3], Bryce 3D [5] et 3Ds Max [6].</p>
<p class="Style1"></br>
</p>
<div id="contener" align="center">
	<div id="noms">
	  <p class="Style9">Golden Sun The Movie:</p>
	  <p class="Style9">[5 Mo] - Juillet 2001</p>
  </div><div id="noms">
	  <p class="Style9">Golden Sun The Movie 2:</p>
	  <p class="Style9">[8,1 Mo] - Ao&ucirc;t 2002</p>
</div><div id="noms">
	  <p class="Style9">Header de la team New Design:</p>
	  <p class="Style9">[ 70 Ko] - F&eacute;vrier 2002</p>
</div><div id="noms">
	  <p class="Style9">Intro du site web Xbox Platinium:</p>
	  <p class="Style9">[1,9 Mo] - Juin 2003</p>
</div>
	<div id="img"><a href="index.php?page=2"><img src="images/2.jpg" alt="Golden Sun The Movie 1" width="200" height="145"></a></div>
  <div id="img"><a href="index.php?page=3"><img src="images/3.jpg" alt="Golden Sun The Movie 2" width="200" height="145"></a></div>
  <div id="img"><a href="index.php?page=4"><img src="images/4.jpg" alt="Header New Design" width="200" height="145"></a></div>
  <div id="img"><a href="index.php?page=5"><img src="images/5.jpg" alt="Xbox Platinium" width="200" height="145"></a></div>
  <div id="noms">
    <p class="Style9">Bouton interactif:</p>
    <p class="Style9">[130 Ko] - Avril 2007</p>
  </div><div id="noms">
    <p class="Style9">Save the world:</p>
    <p class="Style9">[6,6 Mo] - Juin 2007</p>
  </div><div id="noms">
    <p class="Style9">Feather:</p>
    <p class="Style9">[3 Ko] - Mars 2007</p>
  </div><div id="noms">
    <p class="Style9">Video 3D : Cuill&egrave;re sautante:</p>
    <p class="Style9">[330 Ko] - Aout 2003</p>
  </div>
  <div id="img"><a href="index.php?page=6"><img src="images/6.jpg" alt="Bouton" width="200" height="145"></a></div>
  <div id="img"><a href="index.php?page=7"><img src="images/7.jpg" alt="Planete Terre" width="200" height="145"></a></div>
  <div id="img"><a href="index.php?page=8"><img src="images/8.jpg" alt="Feather" width="200" height="145"></a></div>
  <div id="img"><a href="index.php?page=9"><img src="images/9.jpg" alt="Cuilliere Sautante 3D" width="200" height="145"></a></div>
</div>
<div id="content">
    <p><span class="Style1">Animation :</span> </p>
    <p>
      <? $anim=$_GET['page'];

switch ($anim) {

case "2":
include("2.html"); 
break; 

case "3":
include("3.html"); 
break; 

case "3":
include("3.html"); 
break; 

case "4":
include("4.html"); 
break; 

case "5":
include("5.html"); 
break; 

case "6":
include("6.html"); 
break; 

case "7":
include("7.html"); 
break; 

case "8":
include("8.html"); 
break; 


case "9":
include("9.html"); 
break; 


default: 
include("1.html");
} 
?> 
    </p>
    <a href="http://www.adobe.com/go/getflashplayer" target="_blank"><img src="images/get_flash_player.gif" alt="T&eacute;l&eacute;charger le lecteur Flash" width="88" height="31" border="0" ></a>
  </br>
</div>
</body>
</html>


Et mon code CSS:

@charset "utf-8";
/* CSS Document */

body {
background-color:#646464;
margin:0;
padding:0;
}

div{
position:relative;
}

a:link {
	color: #00CCFF;	
	font-weight: bold;
	text-decoration: none;
}
a:visited {
	color: #499CB1;
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	color: #A6DC06;
	font-weight: bold;
	text-decoration: none;
}
a:active {
	color: #CAF14F;
	font-weight: bold;
	text-decoration: none;
}

.Style1 {color: #FFFFFF; font-weight: bold;}
.Style4 {color: #FFFFFF; font-weight: bold; font-size:24px;}
.Style9 {color: #FFFFFF}

p{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
}

#noms{
	width:200px;
	float:left;
	display:inline;
	margin:7px;	
}

img{
border:0;
}

#img{
display:block;
float:left;
width:202px;
height:147px;
margin:5px;
border: 1px solid #ffffff;
}

#contener{
width:858px;
height:453px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

#content{
width:100%;
margin-left:auto;
margin-right:auto;
text-align:center;
}


Je ne vois pas où est mon erreur... Smiley sweatdrop
Donc si quelqu'un a une piste, je suis preneur! Smiley biggrin
Merci d'avance.

PS: Ne pas faire attention au include qui est horrible, j'en suis conscient. ^^'
Modifié par benjistudios (05 Jul 2007 - 14:02)
Bonjour Smiley decu

En utilisant un doctype complet cela devrait fonctionner.

<PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">


Si le doctype n'est pas bon IE bascule en mode quirks et à ce moment là ne comprends pas margin auto
Modifié par knarf (05 Jul 2007 - 15:37)
Sujet clos
Aller à