28173 sujets

CSS et mise en forme, CSS3

Bonsoir Smiley smile


Voici mon code mais il ne marche que dans mozilla et non dans IE .
En fait dans internet explorer mon menu vient se mettre dans ma div contenu.

J'ai un peu regardé en mettant des absolute mais ça va toujors pas.

Avez vous une idée pour rendre ça compatible IE?

Voici mon code css


div.container
{
	background-color: #000000;
	width: 700px;
	height: 550;
}

div.menu
{
	position: absolute;
	background-color: #00CC00;
	width: 190px;
	height: 150px;
	margin-top: 0px;
	margin-left: 0;
}

div.contenu
{
	background-color: #FFFF33;
	width: 450px;
	height: 400px;
	margin-left: 210px;
}


Et voici mon html


<body>

<div class="container">

	<div class="menu">
	
	voici mon menu
	
	</div>
	
	<div class="contenu">
	
	voici mon contenu
	
	</div>

</div>

</body>


Merci à vous
Bonsoir,
Pour commencer il te manque une unité sur height: 550.
Ensuite le fait que tu déclare un position:absolute au niveau du menu le
retire du flux normal donc pour le reste du contenu, c'est comme
s'il n'existait pas. le div contenu vient donc se placer logiquement
au niveau du menu. Tu dois donc l'enlever.
j'ai ajouté la valeur sur mon height ..
J'ai retiré le postition : absolute

Mais si je fais ça ma div de contenu se place en bas a droite de ma div menu... argh
Bonjour,

Essaye:
div.container

{
	background-color: #000000;
	width: 700px;
	height: 550;
	position: relative /* pour servir de bloc de référence à la position absolute*/
}



div.menu  /* bloc sorti du flux*/

{
	position: absolute;
	background-color: #00CC00;
	width: 190px;
	height: 150px;
    top: 0;	 /* voir propriétés de la position absolute*/
    left: 0;  /* voir propriétés de la position absolute*/
}



div.contenu	/* bloc dans le flux en margin-left: 210px mais indifférent au blox menu sorti du flux*/

{
	background-color: #FFFF33;
	width: 450px;
	height: 400px;
	margin-left: 210px;
}