Discussion :

[nixonne]

bonjour à tous,

j'ai un problème avec mon CSS et j'ai besoin de vos lumiere.

Voila je souhaiterai découper ma page en 3 div horizontaux, 1 pour le haut, 1 pour le milieu et un pour le bas. De plus dans celui du milieu, il doit y avoir 2 div, 1 pour le menu(en vertical à gauche) et 1 pour le contenu principal du site. Mais je n'arrive pas a placer ceux qui sont dans celui du mileu et celui du bas

Voici le CSS que j'ai fais:

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
.haut{
background-color : #E15523;
padding : 5px;
}
 
.milieu{
background-color : #E15523;
/*width : 1008px;*/
}
 
.menu{
position : relative;
background-color : #E15523;
float : left;
width : 182px;
padding : 5px;
}
 
.conteneur{
position : relative;
left : 192px;
/*float : right;*/
background-color : #0066FF;
width : 805px;
padding : 5px;
color : white;
text-align : left;
}

et voici le code HTML que j'ai:

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
<div class='haut'>
  <img src="xxx.jpg" alt="xxx">
  <img src="yyy.jpg" alt="yyy">
</div>
<div class="milieu">
  <div class='menu'>
    ici le menu
  </div>  
  <div class='conteneur'>
    ici le contenu
  </div>
</div>
<div class="bas">
ici le bas
</div>

Après, il y aura aussi sans doute d'autre div dans le conteneur (si il y a aussi des particulatité pour ces div, je suis preneur)

Merci d'avance pour votre aide

Nixonne

[titoumimi]

utilises float:left pour tes deux divs contenus, ca devrait passer

[nixonne]

en utilisant float left ca ne match pas non plus.

Voici un appercu: ici

[titoumimi]

va jeter un oeil ici :
http://titoumimi.free.fr/code/exemple_div.zip
un exemple de positionnement en utilisant les divs

[nixonne]

merci, je pense que je vais pouvoir faire qqch avec ca.

[nixonne]

bon je relance ce sujet car je n'y arrive toujours pas.

En effet, ni mon div menu, ni mon div contenu ne s'adapte en hauteur si il est plus petit que l'autre malgrè que j'ai mis: height : 100%

Je vous laisse regarder et me dire quoi car là je ne toruv lus du tout de solution.

Merci d'avance

Nixonne

PS: pour ceux qui ont firefox et la barre webdevelopeur, vous pouvez faire CSS--> editer le CSS afin de voir si vos propositions marche