28173 sujets

CSS et mise en forme, CSS3

Bonjours à tous,
Voilà mon probléme : je souhaite faire 2 grandes lignes, avec dedans 2 colonnes pour la structure du site. J'utilise les différents positionnement pour ça, mais avec IE, un de mes div est décalé sur la droite, sans raison (le div sondage) Smiley fache

Voici les sources :



<div id="contenuLigne1">
		
	<div id="news">
		
		<h3>Les news</h3>
			
	</div> <!-- Ferme "news" -->
		
	<div id="edito">
		
		<h3>Edito</h3>
					
	</div> <!-- Ferme "edito" -->
		
</div> <!-- Ferme "contenuLigne1" -->
	
<div id="contenuLigne2">
	
	<div id="sondage">
			
		<h3>Le sondage</h3>
			
	</div> <!-- Ferme "sondage" -->
		
	<div id="articles">
		
		<h3>Les derniers articles</h3>
		
	</div> <!-- Ferme "articles" -->
		
</div> <!-- Ferme "contenuLigne2" -->



#edito {
	width: 500px;
	margin: 0;
	padding: 0;
	position: relative;
}
#news {
	width: 247px;
	margin: 0 0 0 501px;
	padding: 0;
	position: absolute;
}
#sondage {
	width: 200px;
	margin: 0;
	padding: 0;
	position: absolute;
}
#articles {
	width: 547px;
	margin: 0 0 0 201px;
	padding: 0;
	position: relative;
}


http://vincentlenoir.d.free.fr/radio/

Merci d'avance
Modifié par Vince71 (23 Apr 2006 - 13:53)
Salut,

Problème courant quant on veut gère les boite au pixel, FF et IE ne gèrent pas les marges de la même façon (voir http://www.openweb.eu.org/articles/dimensions_boites_css/ ).
Dans ton cas j’utiliserai plutôt le CSS ci-dessous


#sondage {
	width: 200px;
	margin: 0;
	padding: 0;
	float: left;
}
#articles {
	padding: 0;
	margin: 0px 0px 0px 202px;
}




Détail : je ne suis pas convaincu que le séparation des CSS par catégorie de style (couleur, position, …) soit une bonne solution ! ça provoque un maque de visibilité global ( ex : dans le CSS que tu nous mes en ligne ont ne voit pas les border de 1 px )

A+
Modifié par gege71 (23 Apr 2006 - 15:24)
Merci bien ça marche nickel Smiley biggrin
Par contre, il faut rajouter display: inline; dans #sondage pour que ça passe sous IE.
Pour les feuilles de styles séparées, je les utilisent pour le développement du site, pour mieux m'y retrouver, aprés je sais pas.
Merci encore
a+
Vince71 a écrit :

Par contre, il faut rajouter display: inline; dans #sondage pour que ça passe sous IE.


Je ne vois pas l'utilité ?
je viens de le testé sans, et ça passe très bien sous FF 1.5 et IE 6

A+
Modifié par gege71 (23 Apr 2006 - 21:14)