par
Cyrano » 03 juin 2007, 12:05
Ton problème avec IE est classique : la dimension sur body n'est pas prise en compte. Donc il faut ajouter un conteneur auquel tu peux donner des dimensions.
Mais ce sera insuffisant et le centrage sous IE avec "margin: auto" ne foncitonnera pas non plus. il faut donc ruser pour centrer :
-1- positionner le conteneur en relatif;
-2- positionner le coté gauche du conteneur à 50%;
-3- ajouter une marge négative à gauche au conteneur de la moitié de sa propre largeur;
ça donne ceci :
Code : Tout sélectionner
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titre</title>
<link rel="stylesheet" href="./style.css" type="text/css" />
<style type="text/css">
/* <![CDATA[ */
#contenu
{
position: relative;
top: 0;
left: 50%;
width:750px;
margin-left: -375px;
margin-top:5px;
margin-bottom:5px;
}
#gauche
{
float:left;
width:220px;
border:1px solid black;
}
#droite
{
border:1px solid black;
float:right;
}
/* ]]> */
</style>
</head>
<body>
<div id="contenu">
<div id="gauche">
gauche
</div>
<div id="droite">
droite
</div>
</div>
</body>
</html>Ton problème avec IE est classique : la dimension sur body n'est pas prise en compte. Donc il faut ajouter un conteneur auquel tu peux donner des dimensions.
Mais ce sera insuffisant et le centrage sous IE avec "margin: auto" ne foncitonnera pas non plus. il faut donc ruser pour centrer :
-1- positionner le conteneur en relatif;
-2- positionner le coté gauche du conteneur à 50%;
-3- ajouter une marge négative à gauche au conteneur de la moitié de sa propre largeur;
ça donne ceci :
[code]<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titre</title>
<link rel="stylesheet" href="./style.css" type="text/css" />
<style type="text/css">
/* <![CDATA[ */
#contenu
{
position: relative;
top: 0;
left: 50%;
width:750px;
margin-left: -375px;
margin-top:5px;
margin-bottom:5px;
}
#gauche
{
float:left;
width:220px;
border:1px solid black;
}
#droite
{
border:1px solid black;
float:right;
}
/* ]]> */
</style>
</head>
<body>
<div id="contenu">
<div id="gauche">
gauche
</div>
<div id="droite">
droite
</div>
</div>
</body>
</html>[/code]
