28220 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de float sous IE

Bonjour à tous,

j'ai utilisé "l'encart des évènement récents" disponible dans le livre "CSS2 Pratique du design Web" chapitre 18 afin d'afficher le titre de mes news à droite de chacune des pages de mon site mais j'ai un problème avec IE : le texte de mon contenu vient se disposer sous mon encart et non à sa gauche.
J'ai essayé différentes choses mais rien ni fait.
Pouvez-vous jeter un petit coup d'oeil à ma feuille de style et à ma page HTML pour me dire ce qu'il ne vas pas.

Voici ma feuille de style : 


/* CSS Document */
body {
background:#000;
font-family:0.8em Verdana, Arial, Helvetica, sans-serif;
padding:0;
margin:0;
}
#conteneur {
position:relative;
width:900px;
margin:0 auto;
}
/* En tête de la page */
#header {
height:150px;
background:url(../images/header.gif);
}
/* Contenu de la page */
#global {
background:url(../images/contour.gif);
widows:100%;
padding:30px 0 30px 0;
margin:0;
}
#global p{
width:70%;
margin:0 0 0 50px;
text-align:justify;
}
/* Encart des actualités*/
#encart{
float:right;
width:250px;
margin:0 5px 5px 5px;
padding-top:30px;
background: url(../images/posthaut.gif) left top no-repeat;
}
#encart h3{
font-size:130%;
margin:0 0 0 40px;	
}
#bloccadre{
background: url(../images/postbas.gif) left bottom no-repeat;
padding:0 0 25px 40px;
}
#bloccadre ul{
background:#FFFF33;
width:160px;
margin: 1em 0 0 0;
padding:0;
}
#bloccadre li{
margin:0;
list-style-image: url(../images/postpuce.gif);
}
#bloccadre li a{
color:black;
text-decoration:none;
}
#bloccadre li a:hover{
text-decoration:underline;
}
/* Bas de page*/
#footer {
height:30px;
margin:0;
padding:0;
background:url(../images/pied.gif);
}


et voici 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" />
	
	<title>St Avé boxing club since 1975</title>
	
	<style type="text/css">

		   @import url(css/boxing.css);
		   
		   @import url(css/menuBoxing.css);

	</style>
	
	<script type="text/javascript" src="scripts/menuBoxing.js"></script>
	
</head>

<body>

	<div id="conteneur">
	
		<div id="header"></div>
		
		<div class="menuhaut"><?Php include("menu.php"); ?></div>
		
		<div id="global">
			
			<div id="encart">
			
				<h3>Récemment :</h3>
				
				<div id="bloccadre">
				
					<ul>
					
						<li>Date :  <a href="#">évènement 1</a></li>
						<li>Date :  <a href="#">évènement 1</a></li>
						<li>Date :  <a href="#">évènement 1</a></li>
						<li>Date :  <a href="#">évènement 1</a></li>
						<li>Date :  <a href="#">évènement 1</a></li>
						<li>Date :  <a href="#">évènement 1</a></li>
						<li>Date :  <a href="#">évènement 1</a></li>
					</ul>
					
				</div>
				
			</div>
			
			<p>
			
			</p>
			
		</div>
		
		<div id="footer"></div>
		
	</div>

</body>

</html>


merci d'avance.

Smiley biggrin Smiley biggrin Smiley biggrin

Thomas
Modifié par erehcab (19 Aug 2006 - 11:01)
Bon ben j'ai trouvé tout seul, en faite il m'a juste suffit de ne pas préciser la taille de la zone de texte qui se place a gauche de l'encart.
Ce qui donne : 


#global {
background:url(../images/contour.gif);
widows:100%;
padding:30px 0 30px 0;
margin:0;
}
#global p{
margin:0 30px 0 50px;
text-align:justify;
}
/* Encart des actualités*/
#encart{
float:right;
width:250px;
margin:0 5px 5px 5px;
padding:30px 0 0 0;
background: url(../images/posthaut.gif) left top no-repeat;
}


voilà.
Sujet clos
Aller à