28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de centrage IE/Firefox

Bonjour,
je recontre un problème que je n'arrive pas à résoudre sous Internet Explorer...

Voici le code ma page html :

<!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" />
<link rel="stylesheet" type="text/css" href="style/default.css" />
<title>Portfolio Api</title>
</head>

<body>

<div id="conteneur">

	<div id="header">
		<div id="menuHeader">
			<table>
				<tr>
					<td><a href="#"><img src="img/accueil.gif" width="44" height="10" name="accueil" border="0" alt="Accueil" onmouseover="document.accueil.src='img/accueil_over.gif'" onmouseout="document.accueil.src='img/accueil.gif'" /></a></td>
					<td><img src="img/separateurMenu.gif" width="5" height="20" border="0" alt="" /></td>
					<td><a href="#"><img src="img/realisations.gif" name="realisations" width="77" height="10" border="0" alt="Réalisations" onmouseover="document.realisations.src='img/realisations_over.gif'" onmouseout="document.realisations.src='img/realisations.gif'" /></a></td>
					<td><img src="img/separateurMenu.gif" width="5" height="20" border="0" alt="" /></td>
					<td><a href="#"><img src="img/cv.gif" name="cv" width="20" height="10" border="0" alt="CV" onmouseover="document.cv.src='img/cv_over.gif'" onmouseout="document.cv.src='img/cv.gif'" /></a></td>
					<td><img src="img/separateurMenu.gif" width="5" height="20" border="0" alt="" /></td>
					<td><a href="#"><img src="img/contact.gif" name="contact" width="51" height="10" border="0" alt="Contact" onmouseover="document.contact.src='img/contact_over.gif'" onmouseout="document.contact.src='img/contact.gif'"/></a></td>
				</tr>
			</table>   </div>
	</div>
	
	<div id="fond1">
		<div id="texteFond1">Bienvenue sur mon portfolio personnel</div>
	</div>
	<div id="presentation">
		<img src="img/qui.gif" width="564" height="36" border="0" alt="qui suis-je ?" />
		<img src="img/questions.gif" width="116" height="102" border="0" alt="" style="float:right" />

		<div id="textePresentation">

[.....................
		</div>
	</div>
</div>

</body>
</html>



Voici mon css :


/* CSS Document */

body {
margin:0;
padding:0;
text-align:center;
font-size:10px;
background-color:#FFF;
font-family: Verdana, Monaco, Arial;
}

#conteneur {
width:800px;
height:568px;
margin-left:auto;
margin-right:auto;
background:url(../img/bg.gif) bottom left no-repeat;
border:1px solid #000;
}

#header { 
width:800px;
height:107px;
margin:0; 
padding:0;
background:url(../img/header.gif) no-repeat;
}

#menuHeader {
width:250px;
float:right;
padding:5px;
text-align:right;
}


#fond1 { 
width:800px;
height:127px;
margin:0;
padding:0;
background:url(../img/fond1.gif) no-repeat;
}


#texteFond1 { 
width:300px;
height:127px;
margin:0; 
padding:15px;
text-align:left;
}

#textePresentation {
padding:10px;
}


#presentation {
margin:15px;
width:564px;
height:auto;
border:1px solid #797979;
text-align:left;
background-color:#FFF;
}



Sous Firefox pas de problème le contenu du div fond1 et presentation s'affiche bien à gauche dans le div conteneur
mais pas sous Internet Explorer où il s'affiche en centré...


Voici une cature du problème :


Sous Firefox :

http://img524.imageshack.us/img524/3186/sanstitre1gp2.th.gif


Sous IE :

http://img337.imageshack.us/img337/669/sanstitre2rl8.th.gif


Merci de m'aider à aligner les contenus à gauche svp... Smiley decu
Modifié par Api1000 (22 May 2007 - 14:50)
Salut,
comme ça, à vue de pif, je dirais que ton conteneur hérite du texte-align: center du body, précisément utilisé pour centrer aussi les éléments div and co sous ie(6). Du coup, un text-align: left; dans le conteneur devrait résoudre l'affaire.

have swing
J'ai trouvé la solution ce matin. Il s'agissait bien du text-align:center à remplacer par text-align:left
Merci ! Smiley cligne
Sujet clos
Aller à