28220 sujets

CSS et mise en forme, CSS3

Décalage sous IE et autre problème, je sais pas comment expliquer

Bonjour !!
Voici mon premier problème : il s'agit d'un décalage d'un bloc qui se décale trop sous IE. En image ca donne ca :
sous IE
alors que ca devrait etre comme ca :
sous FireFox.

Voici mon css :
html, body, * { margin: 0; padding: 0}

body{
	background: #27386b url(../layout/bg_fix.gif) repeat-x;
	margin: 10px 0;
	text-align: center;
}

div#container{
	background: #fff;
	border: 0;
	margin: 0 auto;
	position: relative;
	width: 760px;
}

div#header{
	background: url(../layout/top.gif) no-repeat;
	height: 80px;
}

div#logo{
	background: url(../layout/logo.jpg) no-repeat;
	height: 136px;
}

div#menu{
	background-color: Red;
	float: left;
	height: 200px;
	margin: 20px 20px 20px 0;
	width: 200px;
}

div#randomArt{
	background-color: ActiveCaption;
	float: left;
	margin: 20px 0;
	width: 250px;
	height: 250px;
}

div#forumPosts{
	background-color: Fuchsia;
	float: left;
	width: 250px;
	height: 250px;
	margin: 20px 20px;
}

div#latestNews{
	background: Lime;
	float: right;
	width: 520px;
	height: 300px; /*Juste pour un preview*/
	margin: 0 20px 20px 20px;
}

div#footer{
	background: url(../layout/bottom.gif);
	clear: both;
	height: 20px;
}



Et mon 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>Document sans nom</title>
<link rel="stylesheet" href="css/notoon.css" type="text/css" />
</head>

<body>
<div id="container">
	<div id="header">ID HEADER</div>
	<div id="logo">ID LOGO</div>
	<div id="menu">ID MENU</div>
	<div id="randomArt">AAAC</div>
	<div id="forumPosts">BBBB</div>
	<div id="latestNews">CCCC</div>
	<div id="footer">ID FOOTER</div>
</div>
</body>
</html>



Voici mon deuxieme probleme :

Je ne sais pas comment faire pour positionner un bloc identique en largeur au bloc rouge (MENU), juste en dessous de ce dernier. Car un nouveau bloc, se positionne en hauteur par rapport au bloc bleu.
En image, je souhaiterais que ca donne quelque chose comme ca :
Final

J'espère ne pas avoir avoir trop bafouillé pour que vous compreniez Smiley lol Merci de votre aide !!!
Modifié par notoon (13 Oct 2005 - 17:38)
Bonjour,


j'ai une solution qui t'amène pratiquement à ce que tu veux :

en fait,ne mets pas de float:right.

Place ton div DDD ( celui a fond rose ) juste avant le CCC dans ton code HTML et mets tout tes div en {float:left;}. et voila ! )

juste le bloc sera au meme niveau que le CCC. ca marche nickel sous FF ET IE Smiley cligne !

Pour ce qui est du bug, je me suis pas penché sur la question pour corriger ton code mais je presque sur que ca vient de la gestion des marges de IE.
Bref, avec des float:left ca marche )

J'espère t'avoir aidé
Smiley langue


Aprés courteréflexion, je sais pourquoi sous IE c'est décalé: tout simplement pour le meme problème réccurrent que tu verras dans d'autres posts : IE double la marge des éléments flottants ( le premier de la série seulement je crois ). Et ton CCC est bien le premier flottant droit.
D'ailleurs tu remarqueras que ledécalage est de 20px ( enfin à l'oeil nu ! )
Modifié par Kwic (14 Oct 2005 - 03:07)
Rebonjour !

Tout d'abord merci pour ta réponse.
J'ai essayé ta solution, mais malheureusement comme tu dis, le bloc se situe par rapport au bloc de droite, alors que je voulais qu'il se situe à 20px en dessous du menu de gauche.
Après des heures de prise de tête, j'ai finalement réussi, eureka !!!!! La solution que j'ai trouvée consiste à rajouter une conteneur (en float: left) qui contient les blocs que je veux placer verticalement à gauche, et ne pas mettre de conteneur pour les blocs de droite (qui sont tous en float: right).

Pour le bug, il me semblait en effet avoir déjà lu ce problème, mais je ne trouvais pas le post correspondant; c'est chose faite à présent, la marge doublée sous IE peut être résolue avec un display: inline dans le bloc en float. Voci le post d'origine : http://forum.alsacreations.com/topic.php?fid=4&tid=5514&s=IE+margin

Merci infiniment d'avoir passé du temps sur mon problème . Bye Smiley lol
ok cool,

d'ailleurs, telle qu'estfaite ta page, je pense que si tes blocs droits tu ne les mets pas en flaotdu tout, il devrait quand même s'aligner sur la droite l'un dessous l'autre avec l'espacement du margin-right de ton conteneur gauche.

disons que la width ne doit pas être dynamique ou l'espacement droit va s'élargir avec avec le container principale.
Remarque tu as ce problème en float:right, c'est l'espacement central qui va s'élargir !

Bonne continuation Smiley cligne
Sujet clos
Aller à