Mise en page avec 3 blocs

Version imprimable

10/05/2006, 10h45
kartben

Mise en page avec 3 blocs

Bonjour,

Cela fait des semaines (sisi ! [biggol]) que je m'arrache la tête pour essayer d'obtenir une mise en page telle que ci-dessous.

http://img95.imageshack.us/img95/577...page2vk.th.png

J'espère que mes explications sont assez claires. Je tiens à préciser qu'en ultime recours, j'ai essayé de mettre les 3 DIVs dans une table ( [confused] ) mais cela me pose ensuite des problèmes lorsque je veux, par Javascript, changer la taille de mon applet pour la faire passer en plein écran puis revenir dans sa cellule de tableau (passage d'absolute en relative qui réinitialise mon applet, et c'est pas bien du tout dans mon cas).

Si quelqu'un a des pistes, mêmes très succintes, je suis très très preneur !

Merci d'avance [smile]
Benjamin.
10/05/2006, 10h50
titoumimi

et hop, à ce stade là, ce n'est plus une piste mais une autoroute ... ;)

http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/
10/05/2006, 10h53
kartben

Un truc que je n'ai pas précisé (sinon je vois bien que je passe pour un gros noob (ce que je ne nie pas être toutefois!!)) : il faut absolument que (hauteur de 1 + hauteur de 3) fasse 100% (minimum, tant pis si 1+3 sont plus haut que la page, il doit y avoir l'ascenseur vertical) de la hauteur de la page (suis-je assez clair ?)

Merci.... :oops:
10/05/2006, 10h56
blueice

Pour avoir 100% en hauteur tu peux l'avoir de 100 façons différentes :lol:

80% / 20%
60% / 40%
90% / 10%

...
...

Citation:

Envoyé par blueice

Pour avoir 100% en hauteur tu peux l'avoir de 100 façons différentes :lol:

80% / 20%
60% / 40%
90% / 10%

...
...

Oui bien sûr (tsss!) mais je voudrais que Hauteur de 1 soit "minimale"..... Dès lors, je ne peux pas savoir quelle hauteur "complémentaire de 100%" donner à hauteur de 3, n'est-ce pas ?...

Ce que je veux faire (mais sans utiliser de table) c'est exactement ce que me permettrait ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <html> <body> <table style="height:100%;width:100%;" border="3"> <tr> <td width="250px" height="100%" valign="top"> ICI LE CONTENU DE 1 </td> <td width="*" height="100%" valign="top"> ICI LE CONTENU DE 2 </td> </tr> <tr> <td colspan="2" height="0%" valign="bottom"> ICI LE CONTENU DE 3 </td> </tr> </table> </body> </html>
Voir ici en live : http://mcabe.free.fr/css/exemple.html

Voilà, merci encore.... (mais je vous assure, je pense vraiment que mon problème n'est pas si simple qu'il n'y paraît !!)

10/05/2006, 11h18
blueice

Pourtant ca n'a pas l'air bien compliqué.
Tes divs à 100% de hauteur et ensuite un footer par dessus en "absolute".

Non ?
10/05/2006, 11h23
kartben

Heu ? Mais alors mon footer écrasera systématiquement le contenu de 1 et de 2 ... (bon en plus une applet est toujours en premier plan (peu importe le z-index que l'on met), donc elle bouffera le footer !)

C'est con à dire mais je veux exactement le fonctionnement (3 calé tout en bas, 2 qui prend toute la place possible, etc..............) exposé ci-avant avec une <TABLE> mais ... sans <TABLE> !!

essai un peu ca

Code:

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
* {
    margin: 0;
    padding: 0;
}
#left {
    width: 250px;
    border: 1px solid #00FF00;
    float: left;
}
#applet {
    border: 1px solid #FF0000;
    margin-left: 252px;
}
#footer {
    clear: both;
    border: 1px solid #0000FF;
}
#content {
    border: 1px solid #00FFFF;
    overflow: hidden;
}
.equalColumns {
    padding-bottom: 32767px;
    margin-bottom: -32767px;
}

Code:

1
2
3
4
5
6
<div id="content">
<div id="left" class="equalColumns">partie gauche
</div>
<div id="applet" class="equalColumns">partie applet</div>
</div>
<div id="footer">footer</div>

normalement le partie gauche et la partie applet doivent toujour faire la meme taille.

edit : dsl ca resoud le pb de colunne egales mais pas la taille a 100%

10/05/2006, 11h33
Loceka

Tu peux pas "tout simplement" garder ta solution qui fonctionne bien pour un affichage normal et, quand tu veux passer en plein écran, tu changes de CSS ?

Dans ce nouveau CSS, il y'aura un "display : none" sur les colonnes de gauche et du bas, et tu redéfiniras les attributs de celle contenant ton applet.

Il est même possible que tu puisses faire ça directement en javascript en attribuant juste "display : none" aux autres colonnes s'il n'y a rien d'autre à changer dans les CSS.
10/05/2006, 11h41
masu
pour resoudre le probleme de la hauteur 100% on est je pense obliger de donner une hauteur au footer du style 10% mais ce qui ne semble pas etre tout a fait ce que tu veu.
pour voir, rajoute ca a mon code precedent
Code:

1 2 3 4 5 6 7 8 9 html, body { height: 100%; } #content { height: 89%; } #footer { height: 10%; }
je suis pas sur qu'on puisse faire mieu sans table

edit: la partie gauche et l'applet peuvent avoir leur contenu tronqué si la fenetre est trop petite.
c'est vrai que c'est moins simple que ca y parait.
t'es sure que tu veu pas de table :/
10/05/2006, 11h49
kartben

Citation:

Envoyé par Loceka

Tu peux pas "tout simplement" garder ta solution qui fonctionne bien pour un affichage normal et, quand tu veux passer en plein écran, tu changes de CSS ?

Dans ce nouveau CSS, il y'aura un "display : none" sur les colonnes de gauche et du bas, et tu redéfiniras les attributs de celle contenant ton applet.

Il est même possible que tu puisses faire ça directement en javascript en attribuant juste "display : none" aux autres colonnes s'il n'y a rien d'autre à changer dans les CSS.

Je vais essayer, ça me paraît très bien vu !!! :D Merci !

petit exemple pour obtenir ta mise en page, quelle que soit la résolution :

Code:

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
div#general {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:#99FF33;
    }
div#menu {
    float:left;
    width:20%;
    height:80%;
    background-color:#00CCFF;
    }
div#contenu {
    float:left;
    width:80%;
    height:80%;
    background-color:#FF9933;
    }
div#pied {
    clear:both;
    width:100%;
    height:20%;
    background-color:#6666FF;
    }

Code:

1
2
3
4
5
    <div id="general">
        <div id="menu"></div>
        <div id="contenu"></div>
        <div id="pied"></div>
    </div>