28173 sujets

CSS et mise en forme, CSS3

Décalage de texte dans des Floats sous IE

Bonjour !

j'ai un petit problème de décalage de texte dans mon Div central encadré de 2 div en Float.
plus simple que des mots, je vous laisse regarder : http://boobha.free.fr/site/

J'espere qu'il y a un soluce a ce problème
Merci d'avance Smiley biggrin

Page Index

<!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" />
	<meta http-equiv="Content-script-type" content="text/javascript" />
   	<meta http-equiv="Content-style-type" content="text/css" />
  	<meta http-equiv="Content-language" content="fr" />
	<title>Name Site</title>
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
	<!--[if IE]>
		<link href="styleIE.css" rel="stylesheet" type="text/css" media="screen" />
	<![endif]-->
</head>
<body>

<div id="conteneur">
	<div id="bandeauHaut"></div> <!-- END #bandeauHaut -->

	<div id="bandeauLogin"></div> <!-- END #bandeauLogin -->
	
	<div id="contenu">	
		<div id="menuGauche">Menu<br />Menu11<br />Menu123<br /></div> <!-- END #menuGauche -->
		
		<div id="menuDroite">Menu<br /></div> <!-- END #menuDroite -->
		
		<div id="centre">
		Centre<br />Centre<br />
		Centre<br />Centre<br />
		Centre<br />Centre<br />
		</div> <!-- END #centre -->
	</div> <!-- END #contenu -->

	<div id="pied"></div> <!-- END #pied -->
</div> <!-- END #conteneur -->

</body>
</html>


Page Css

html, body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	background-color: #333333;
	font-family: Verdana, Sans-Serif;
	color: #fff;
	font-size: 11px;
	text-align: center;
}
a, a:visited {
	color: #f8e012;
}
a:hover {
	color: #fff;
}
p {
	margin-top: 11px;
	margin-bottom: 11px;
}
#conteneur {
	margin:auto;
	width: 1000px;
	border: solid 1px #000;
	background-image: url(bgContenuBas.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
}
#bandeauHaut {
	height: 78px;
	background-color: #000;
	background-image: url(bgBandeauHaut.jpg);
	background-repeat: no-repeat;
	background-position: right;
	border-bottom: solid 1px #000;
}
#bandeauLogin {
	height: 20px;
	background-color: #fff;
	background-image: url(bgBandeauLogin.jpg);
	background-repeat: no-repeat;
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
	margin: 1px 0px 1px 0px;
}
#contenu {
	padding:0px;
	margin: 0px;
	background-image: url(bgContenu.jpg);
	background-repeat: repeat-y;
}
#menuGauche, #menuDroite {
	padding:0px;
	margin: 0px;
	width: 150px;
}
#centre, #menuGauche, #menuDroite {
	text-align: left;
}
#menuGauche {
	float: left;
}
#menuDroite {
	float: right;
}
#centre {
	margin: 0px 151px 0px 151px;
	padding:0px;
}
#centreHaut {
	height:8px;
	background-image: url(bgCentreHaut.jpg);
	background-repeat: no-repeat;
	border-top: solid 1px #000;
}
#centre {
	padding: 0px 7px 0px 7px;
	color: #000;
}
#centreBas {
	height:8px;
	background-image: url(bgCentreBas.jpg);
	background-repeat: no-repeat;
	border-bottom: solid 1px #000;
}
#pied {
	clear:both;
	width:1000px;
	margin:auto;
	padding:0px;
	margin:0px;
	height:15px;
}


#menu a, #menuAdd a {
	text-decoration: none;
	color: #fde7ad;
	margin-left: 5px;
	padding-left: 10px;
	line-height: 16px;
	background-image: url(puce1.gif);
	background-repeat: no-repeat;
	background-position: 0px 52%;
}
#menu a:hover, #menuAdd a:hover {
	color: #fff;
	background-image: url(puce2.gif);
}

Modifié par boobha (04 Jul 2006 - 14:03)
ah ! non enfaite c est pas du tout résolu, car les 3 px sont tjrs la. mais a l'extérieur ...

Existe t'il un moyen de résoudre ce pb ou tjrs pas ?
j'ai cherché mais rien trouver ... snif

Merci de votre aide !
Sujet clos
Aller à