Bonjour,

étant entrain de créer un widget en jQuery, je m'attaque tout d'abord à la création du css.
j'aimerais créer un bloc resizable.

html :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="meteo">
        <div class="top">
 
        </div>
 
        <div class="middle">
 
        </div>
 
        <div class="under">
 
        </div>
    </div>
css :
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
#meteo
        {
            position: absolute;
            background-color: purple;
 
            width: 300px;
            height: 200px;
        }
 
        .top
        {
            width: 100%;
            height: 40px;
 
            background-color: red;
        }
 
        .middle
        {
            width: 100%;
            height: 120px;
 
            background-color: greenyellow;
        }
 
        .under
        {
            width: 100%;
            height: 40px;
 
            background-color: orange;
        }
j'aimerais que mes blocs 'top', 'middle' et 'under' soient d'un height fixes ! Les 3 étant placés les uns aux dessus des autres.
En cas d'agrandissement :
- le width évolue.
- le height reste fixe.
- pour que le bloc s'agrandisse, des espace entre chacun des 3 div devront apparaître et évoluer.

Le bloc 'top' doit être collé en haut, le bloc 'under' doit être collé en bas, le bloc 'middle' doit rester parfaitement au milieu.

j'ai essayé d'utiliser les commandes css top et bottom, mais je n'y comprends rien, et il n'y a eu aucun effet O_o.
j'aimerais profiter de cette occasion pour mieux comprendre le css.
pourriez-vous m'aider svp ?