28221 sujets

CSS et mise en forme, CSS3

Menu de gauche et marge de la partie centrale

Bonjour

J'ai un site composé d'un header en haut, d'un menu verticale sur la gauche et d'un contenu qui prend le reste du site.

De facon simplifié, ma mise en forme est la suivante :

a écrit :

<div class="conteneur">
<div class="header"></div>
<div class="menugauche"></div>
<div class="contenu"></div>
</div>


et ma CSS est la suivante :

a écrit :
.conteneur {
background-color: #293142;
width: 770px;
border: 1px solid #FFFFFF;
text-align: left;
margin-right: auto;
margin-left: auto;
padding-bottom: 10px;
}
.header {
height: 80px;
width: 100%;
background-image: url(baniere/1.jpg);
}
.menugauche {
height: 300px;
width: 200px;
position: absolute;
}
.contenu {
width: 560px;
height:100%;
margin-left:210px;
position:static;
}


Jusqu'ici tout semble normal, le problème c'est que sous IE, mon calque menugauche ne se place pas à l'endroit qu'il devrait (c'est a dire en dessus de mon header, a gauche de mon calque contenu) mais au contraire celui ci se place sur mon calque contenu.
Comme si mon calque menugauche était a l'interieur du calque contenu.

Le lien qui illustre cela : ICI

Il y a peut etre une erreur dans la semantique ou dans les CSS, mais je n'arrive pas à le trouver (depuis + de 15jours) Surtout que mon code a l'air simple. Je suis complétement dépassé

J'espère que vous pourriez m'aider Smiley cligne
J'enlèverais position: static; dans <div class="contenu"> (c'est static par défaut),
je mettrais position: relative; à <div class="conteneur">,
et top: 80px; à <div class="menugauche">.

Tu nous dis ce que ça donne...
Modifié le 25 Jan 2005 - 18:13
Le code indiqué par Stephan est pourtant le bon, à quelques détails de pixels près:


.conteneur {
	background-color: #293142;
	width: 770px;
	border: 1px solid #FFFFFF;
	text-align: left;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 10px;
	position: relative;
}
.header {
	height: 80px;
	width: 100%;
	background-image: url(10000000.jpg);
}

.contenu {
	width: 560px;
	height:100%;
	margin-left:210px;
}
.menugauche { 
	height: 300px;
	width: 200px;
	position: absolute;
	top: 110px;
	left: 0;
}


... me donne une mise en page correcte dans IE.
Je sais que le code est bon, mais pourquoi dans l'exemple que j'ai mis en ligne, cela ne marche pas ???
Je pete un plomb, j'ai tout simplifié mon exemple au maximum

http://www.surf-bzh.com/jb/index_xhtml3.htm

voici ma mise en page :

<div class="conteneur">
   <div class="header"></div>
   <div class="menugauche"></div>
   <div class="contenu"></div>
</div>


et ma CSS :

a écrit :
body {
background-color: #000000;
margin: 2px;
}
.conteneur {
background-color: #293142;
width: 770px;
border: 1px solid #FFFFFF;
text-align: left;
margin-right: auto;
margin-left: auto;
padding-bottom: 10px;
position:relative;
}
.header {
height: 80px;
width: 100%;
background-color: #666666;
top: 80px
}

.contenu {
width: 560px;
height:500px;
margin-left:210px;
background-color: #0033CC;
}
.menugauche {
height: 300px;
width: 200px;
background-color: #FF0000;
position:absolute;

}


je suis vraimment au bord de la crise de nerf la !!

Je capte vraimment rien !!!
Feuille corrigé :

body {
background-color: #000000;
margin: 2px;
}
.conteneur {
background-color: #293142;
width: 770px;
border: 1px solid #FFFFFF;
text-align: left;
margin-right: auto;
margin-left: auto;
padding-bottom: 10px;
position:relative;
}
.header {
height: 80px;
width: 100%;
background-color: #666666;	
[b][#red]top: 80px[/#][/b]
}
.contenu {
width: 560px;
height:500px;
margin-left:210px;
background-color: #0033CC;
}
.menugauche {
height: 300px;
width: 200px;
background-color: #FF0000;
position:absolute;
[b][#blue]top: 110px;
left: 0;[/#][/b]
}

Modifié le 26 Jan 2005 - 20:40
Sujet clos
Aller à