problème margin -left avec IE

**yerom** · 19/09/2009, 22h27

Bonjour à tous,

Je me suis inscrit récemment sur ce forum qui m'a l'air rempli d'infos.

Je ne suis pas un spécialiste du CSS (plutôt actionscript) mais je m'y mets un peu.
J'ai un souci sous IE avec une page de site que je conçois.
J'ai 2 div verticaux. Celui de gauche contient un swf qui s'étire sur la hauteur et celui de droite le contenu.
Je place le SWF à l'aide de SWF object et cale celui de droit à l'aide margin-left.
Sauf que margin-left ne fonctionne pas sous IE.

Voici le code de ma page HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="stylesNEW2.css">
<title>Positionnement CSS</title>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swffit.js"></script>
<script type="text/javascript">
			swfobject.embedSWF("swf/menu_acom.swf", "menu_haut", "200", "100%", "8.0.0");
 
</script>
</head>
<body>
	<div id="conteneur">
 
	 <div id="menu_haut">Menu haut</div> 	
 
	<div id="contenu"><img src="img/hautDroite.gif" alt="Acom architectes - Fr&eacute;d&eacute;ric Charpentier &amp; Vincent Vaudemer" name="logo ACOM" width="728" height="126"></div>
	</div>
</body>
</html>

et voici mon CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
html, body {
	text-align:center;
	margin:0;
	padding:0;
	height:100%
 
}
div#conteneur{
	margin-left: auto; 
	margin-right: auto; 
	width: 930px; 
	text-align: left; 
	height:100%
}
 
div#menu_haut {
 
 
}
 
 
div#contenu {
 
	width:728px;
	width:400px;
 
	background-color:#FFCC00;
}

Le fait d'utiliser swfobject pour placer le swf de gauche le place au dessus du div de droite.
Comment faire pour caler mon div de contenu sur la droite du div de menu sans passer par margin-left ?

Merci par avance pour vos pistes car j'avoue être perdu après avoir testé maintes solutions...

Yerom

**Damouille** · 20/09/2009, 09h10

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#menu-haut {float:left}/*Colonne de gauche*/
#contenu {float:right}/*colonne de droite*/

Ajoute un clear:both a l'element qui suit si tu veux "retourner a la ligne" ex:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="left">Contenu colonne de gauche</div>
<div class="right">Contenu colonne de droite</div>
<div class="clear" >Contenu en dessous des 2 colonnes</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.left {float:left}
.right {float: right}
.clear {clear: both}

**yerom** · 20/09/2009, 10h12

Merci pour ta réponse,

J'ai testé le clear-both, mais ça n'a pas l'air de faire l'effet voulu. ou alors, je m'y suis mal pris.

J'ai mis une page test en ligne ça donnera une meilleure idée :
http://caton.pythagore.free.fr/new/indexNEW2.html

Est-ce comme ça qu'il faut le placer ?

Merci par avance
Y.

**Damouille** · 21/09/2009, 07h15

d'accord c'est different de ce que je pensais.

Ton object, ne doit pas etre en position absolute. Il doit etre dans un div en float left. Ex:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div id="conteneur">
	<div class="leftcol">
		<object height="100%" width="200" type="application/x-shockwave-flash" data="swf/menu_acom.swf" id="menu_haut"/>
	</div>
	<div id="contenu">
		<img height="126" width="728" name="logo ACOM" alt="Acom architectes - Frédéric Charpentier &amp; Vincent Vaudemer" src="img/hautDroite.gif"/>
		Le contenu se poursuit ici
	</div>
	<div class="footer clear">Ton footer</div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.leftcol {
	float:left;
	width: 200px;
}
.clear {
	clear: both;
}

problème margin -left avec IE

CSS

Vue hybride

Discussions similaires

Partager

Partager