Discussion :

[ForgetTheNorm]

Bonjour à tous

Je cherche à obtenir, via du HTML/CSS, le schéma suivant :


Quelques précisions :
- Le cadre global représente la corps de la page
- Les marges entre les DIV doivent être nulles
- Le footer (DIV B.*) doit toujours être en bas de la page, même si le texte du DIV Main n'est pas très long
- Les DIV Main doivent s'adapter en hauteur pour toujours "toucher" le footer.
- Les DIV .R et .L doivent être tous deux de la même largeur, et s'adapter en fonction de la taille du corps.

J'insiste sur la présence des DIV .R et .L, dans lesquels je veux mettre du contenu.

Tous les templates que je trouve sur internet donnent des menus à largeur fixe. J'ai bien peur de devoir utiliser du JS pour réaliser ce schéma, qu'en pensez vous ?

Pierre

[miss_socrates]

C'est possible en CSS par 3x un conteneur div contenant 3 colonnes et une div englobant le tout
Pour la hauteur: préciser en CSS: height = 100%
Pour que le footer "colle" aux colonnes: clear: both;

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<div "conteneur" width= "100%">
 
/*1er niveau */
<div id="conteneur_colonnes">
 
<div id="colonne1" style="width:20%">
        <p>...</p>
      </div> /*end div colonne1*/
 
<div id="colonne2" style="width:60%">
        <p>...</p>
      </div> /*end div colonne2*/
 
<div id="colonne3" style="width:20%">
        <p>...</p>
      </div> /*end div colonne3*/
</div> /*end div conteneur_colonnes>
 
/*2e  niveau*/
 
<div id="conteneur_colonnes">
 
<div id="colonne1" style="width:20%">
        <p>...</p>
      </div> /*end div colonne1*/
 
<div id="colonne2" style="width:60%">
        <p>...</p>
      </div> /*end div colonne2*/
 
<div id="colonne3" style="width:20%">
        <p>...</p>
      </div> /*end div colonne3*/
</div> /*end div conteneur_colonnes>
 
/*3e niveau */
<div id="conteneur_colonnes">
 
<div id="colonne1" style="width:20%">
        <p>...</p>
      </div> /*end div colonne1*/
 
<div id="colonne2" style="width:60%">
        <p>...</p>
      </div> /*end div colonne2*/
 
<div id="colonne3" style="width:20%">
        <p>...</p>
      </div> /*end div colonne3*/
 
</div> /*end div conteneur_colonnes>
 
</div> /*div conteneur*/