Alignement de div [Résolu]

[Yann39]

Bonjour,

je voudrais avoir la structure suivante :

- des menus les uns en dessous des autres alignés à gauche
- des menus les uns en dessous des autres alignés à droite
- 2 barres horizontales qui sépares les menus du contenu (hauteur 100%)
- le contenu, qui prend la place qu'il lui reste au milieu

- Les menus et le contenu ne doivent pas avoir de hauteur fixe, mais s'adapteront en fonction du contenu.
- Les menus et les 2 barres horizontales auront une largeur fixe.


Je doit rester avec la structure suivante (dans n'importe quel ordre) :

Code :

1
2
3
4
5
6
7
8
9
<div class="page_body">
    <div class="menu1">contenu menu1</div>
    <div class="menu2">contenu menu2</div>
    <div class="menu3">contenu menu3</div>
    <div class="menu4">contenu menu4</div>
    <div class="bar1">&lt;</div>
    <div class="bar2">&gt;</div>
    <div class="content">contenu de la page</div>
</div>

donc pas d'autres div englobantes (pour englober les menus par exemple) ...

J'ai implémenté un petit exemple sur jsfiddle pour que ce soit plus clair :

http://jsfiddle.net/f6QyX/3/

Je n'arrive pas à aligner le tout correctement, une aide serait très appréciée.

Merci.

Yann.

[Yann39]

En mettant des conteneurs comme ceci pour les menus, ça fonctionne :

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="page_body">
    <div class="menu_container1">
        <div class="menu1">menu1<br/>menu1</div>
        <div class="menu2">menu2</div>
    </div>
    <div class="menu_container2">
        <div class="menu3">menu3</div>
        <div class="menu4">menu4<br/>menu4<br/>menu4</div>
    </div>
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="content">contenu<br/>contenu<br/>contenu<br/>contenu</div>
</div>

Code :

1
2
3
4
5
6
7
8
div { border:1px solid #CC6633; }
div.page_body { height:300px; padding:5px; }
div.menu_container1 { width:80px; float:left; border:none; }
div.menu_container2 { width:80px; float:right; border:none; }
div.bar1 { height:100%; width:5px; float:left; margin:0 2px; }
div.bar2 { height:100%; width:5px; float:right; margin:0 2px; }
div.content { margin-left:91px; margin-right:91px; }
div.menu1, div.menu3 { margin-bottom:5px; }

J'aurais simplement aimer ne pas avoir à mettre ces conteneurs (menu_container1 et menu_container2).
Enfin bon si c'est la seule solution tant pi

[NoSmoking]

Envoyé par Yann39

J'aurais simplement aimer ne pas avoir à mettre ces conteneurs (menu_container1 et menu_container2).
Enfin bon si c'est la seule solution tant pi

je ne pense pas que tu ais bien le choix de faire autrement que d'avoir au moins 3 conteneurs représentant tes 3 colonnes, sans passer par un tableau il va de soit.

Mais peut être que tu peu réaliser tes "menus" différemment, sur base de liste UL LI par exemple.

[Yann39]

Merci pour la réponse cela confirme ce que je pensais.

L'utilisation de listes peut en effet être une solution