Mise en page avec 3 blocs [Fait]

**kartben** · 10/05/2006, 11h45

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.

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.

**titoumimi** · 10/05/2006, 11h50

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

http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

**kartben** · 10/05/2006, 11h53

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....

**blueice** · 10/05/2006, 11h56

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

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

...
...

**kartben** · 10/05/2006, 12h07

Envoyé par blueice

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

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 :

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
 
<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 !!)

**blueice** · 10/05/2006, 12h18

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

Non ?

**kartben** · 10/05/2006, 12h23

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> !!

**masu** · 10/05/2006, 12h27

essai un peu ca

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
* {
    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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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%

**Loceka** · 10/05/2006, 12h33

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.

**masu** · 10/05/2006, 12h41

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :/

**kartben** · 10/05/2006, 12h49

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 !!!

Merci !

**titoumimi** · 10/05/2006, 14h17

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

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
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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Mise en page avec 3 blocs [Fait]

HTML

Discussions similaires

Partager

Partager