28172 sujets

CSS et mise en forme, CSS3

Bonjour,

j'ai ma div droite qui s'affiche correctement à droite sur IE mais pas sur mozilla



   <div id="colonnedroite"><br /><br />
	   
	   
	
	<div id="newsletter">
	
	
     <p> 4 Bonnes raisons de choisir Eligo !</p>
	  
	  
	   <img src="images/trait.jpg" alt="trait" /><br />  
	  
	
	 <img src="images/maisonsmenudroite.jpg" alt="logo 4 bonnes raisons de choisir eligo" title="4 raisons pour choisir" />

	
	  
	<img src="images/trait.jpg" alt="trait" /><br />
	
	</div><!-- fin newsletter-->
	
	<p class="photo"><a href="implantation.php"><img src="images/cartefrance.jpg" title="image carte de france"alt="implantation"><br />implantation</a></p>

	<p class="photo"><a href="recrute.php"><img src="images/smart.jpg" title="image voiture smart"alt="recrutement"><br />Notre groupe</a></p>

	<p class="photo"><a href="nosoffres.php"><img src="images/maison.jpg" title="image maison"alt="nosoffres"><br />Nos offres</a></p>

	
	
	<br /><br />


a écrit :
mon code css


#colonnedroite{
  width:180x;
  font-family: Arial, verdana, sans serif;
  font-size:12px;
  color:#666666;
   text-align:center;
 /*float:left;*/
 padding-top:30px;
   background-color:#ffffff;
}

#newsletter{
width:140px;
height:200px;
text-align:center;
font-family: Arial, verdana, sans serif;
 font-size:12px;
 color:#797979;

  }
  

#newsletter a,
#newsletter a:link,
#newsletter a:active,
#newsletter a:visited{

	color:#106488;
	text-decoration:none;
	width:60px;
	height:15px;
}
#newsletter a:hover{
  color:#797979;
	
}

Modifié par jeromei (18 Jun 2008 - 13:04)
Bonjour,

Difficile de dire quoi que ce soit sans voir la page elle-même. Je suppose qu'à gauche de div#colonnedroite il y a une div#colonnegauche ou quelque chose du genre? Si ce bloc de gauche est flottant, et que div#colonnedroite n'est ni flottant, ni doté d'une marge à gauche pour compenser ce bloc flottant, ni doté d'un contexte de formatage (via un overflow: hidden par exemple), tout cela est parfaitement normal.

Ou plutôt: le comportement de Firefox est normal. On obtiendra le même dans Safari, Opera ou Konqueror. Par contre, le comportement d'Internet Explorer est bugué (il repose sur un mécanisme appelé le HasLayout -- la FAQ en parle --, en gros le width: 180px fait que div#colonnedroite a le layout, et se positionne donc en s'adaptant au flottant qui le précède).

Un petit conseil: donne des bordures bien visibles aux deux blocs (de gauche et de droite), pour voir comment ils se positionnent réellement. Ça devrait te permettre de comprendre un peu mieux le fonctionnement du positionnement flottant.

PS: sujet déplacé car il s'agit d'une question de mise en forme (CSS) et pas de description du contenu (code HTML).
Modifié par Florent V. (18 Jun 2008 - 10:19)
le bloc gauche était flottant en left et j'ai compensé la div droite en float left + overflow hidden.

ça fonctionne.

merci