création d'un div resizable avec sous-élements

**thor76160** · 21/02/2011, 11h53

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 ?

**thor76160** · 21/02/2011, 13h15

j'ai réussi à faire en sorte que le bloc 'under' reste en position basse, quelque soir le height que j'applique sur la div 'meteo'.

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
#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
        {
            position: absolute;
            bottom: 0%;
 
            width: 100%;
            height: 40px;
 
            background-color: orange;
        }

**thor76160** · 21/02/2011, 13h53

je pense qu'on va simplifier xD

disons que le width est changeable.
et le div 'middle' peut avoir un height évolutif.
ni + ni - ^^

ça va être largement plus simple, je bidouillerais mon truc avec ça.

**NoSmoking** · 21/02/2011, 18h53

il faut passer au % quand c'est possible pour occuper toute la place, un début de piste

Code html :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>[...]</title>
<style type="text/css">
html, body {
  margin : 0;
  padding : 0;
  height : 100%;
  width : 100%;
}
#meteo{
  position: relative;
  background-color: purple;
  width: 400px;
  height: 100%;
}
.top {
  width: 100%;
  height: 20%;
  min-height : 40px;
  background-color: red;
}
.middle {
  width: 100%;
  height: 60%;
  background-color: greenyellow;
}
.under {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20%;
  min-height : 40px;
  background-color: orange;
}
</style>
</head>
<body>
<div id="meteo">
  <div class="top">TOP</div>
  <div class="middle">MIDDLE</div>
  <div class="under">UNDER</div>
</div>
</body>
</html>

**thor76160** · 21/02/2011, 22h48

merci pour ton aide, c'est sympa

malheureusement, après une certaine étude de mon projet, je me suis rendu compte qu'une fonctionnalité de resize ne fera que polluer mon code, ça deviendra une usine à gaz !

j'abandonne donc cette partie et je vais mettre ce sujet en résolu. mais avant ça, je demanderais un peu d'aide sur un autre élément (au lieu de refaire un topic ^^).

j'aimerais savoir comment mettre une image sur un lien !
j'ai utilisé un tutoriel pour le faire, mais ça n'a pas fonctionné, j'ai l'habitude ^^
voici mon code :

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Meteo</title>
 
	<style>
	#meteo
    {
        position: absolute;
 
        border: 1px solid #03204C;
        border-radius: 5px;
 
        background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6AFBFA), color-stop(0.5, #0088F0), color-stop(0.5, #0078FF), color-stop(1, #03009C));
        -webkit-border-radius: 5px;
        -webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
 
        background: -moz-linear-gradient(0% 100% 90deg, #03009C 0%, #0078FF 50%, #0088F0 50%, #6AFBFA 100%);
        -moz-border-radius: 5px;
        -moz-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
 
        width: 300px;
        height: 200px;
 
        font-family: "lucida grande", sans-serif;
        line-height: 1;
    }
 
    .top
    {
        width: 290px;
        height: 30px;
        padding: 5px 5px 5px 5px;
 
        text-align: right;
    }
 
    .top .date { font-size: 10px; }
    .top .time { font-size: 18px; }
 
    .middle
    {
        width: 290px;
        height: 110px;
        padding: 5px 5px 5px 5px;
    }
 
    .middle .temperature
    {
        float: left;
        width: auto;
        height: 70px;
        padding: 35px 0px 5px 10px;
        font-size: 40px;
    }
 
    .middle .detail
    {
        float: right;
        height: auto;
        padding: 15px 0px 15px 0px;
    }
 
    .middle .detail ul
    {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
 
        font-size: 10px;
    }
 
    .middle .detail .title
    {
        float: left;
        height: 100%;
        padding: 0px 5px 0px 0px;
    }
 
    .middle .detail .data
    {
        float: left;
        height: 100%;
    }
 
    .under
    {
        width: 290px;
        height: 30px;
        padding: 5px 5px 5px 5px;
    }
 
    .under .pager
    {
        float:left;
        height: 30px;
    }
 
    .under .pager button
    {
        width: 70px;
        padding: 2px 0 2px 0;
        background: #c63929;
 
        border: 1px solid #03204C;;
        border-radius: 5px;
        text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
 
        background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6AFBFA), color-stop(0.5, #0088F0), color-stop(0.5, #0078FF), color-stop(1, #03009C));
        -webkit-border-radius: 5px;
        -webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
 
        background: -moz-linear-gradient(0% 100% 90deg, #03009C 0%, #0078FF 50%, #0088F0 50%, #6AFBFA 100%);
        -moz-border-radius: 5px;
        -moz-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
 
        opacity: 0.4;
 
        color: #fff;
        font-family: "helvetica neue", helvetica, arial, sans-serif;
        font-size: 10px;
        font-weight: bold;
        letter-spacing: 1px;
        line-height: 1;
        text-align: center;
    }
 
    .under .pager button:hover
    {
        opacity: 0.8;
    }
 
    .under .part_day
    {
        float:left;
        width: 80px;
        height: 30px;
        padding: 0px 0px 0px 20px;
    }
 
    .under .part_day .day a
    {
        float:left;
        background-image: url(images/sun-icon.png);
        display: block;
        width: 48px;
        height: 48px;
        text-indent: -9999px;
    }
 
    .under .part_day .night a
    {
        float:left;
        background-image: url(/images/moon-icon.png);
        display: block;
        width: 48px;
        height: 48px;
        text-indent: -9999px;
    }
 
	</style>
</head>
<body>
 
	<div id="meteo">
        <div class="top">
            <div class="date">Lundi 21 Février 2011</div>
            <div class="time">18:56</div>
        </div>
 
        <div class="middle">
            <div class="temperature">8°c</div>
 
            <div class="detail">
 
                <div class="title">
                    <ul>
                        <li>Lever du soleil :</li>
                        <li>Coucher du soleil :</li>
                        <li>Vent :</li>
                        <li> - direction :</li>
                        <li> - vitesse :</li>
                        <li>Humidité :</li>
                        <li>Précipitation :</li>
                    </ul>
                </div>
 
                <div class="data">
                    <ul>
                        <li><span class="sunr">7h55</span></li>
                        <li><span class="suns">18h24</span></li>
                        <li>&nbsp;</li>
                        <li><span class="direction">Sud-Est</span></li>
                        <li><span class="vitesse">14 km/h</span></li>
                        <li><span class="hmid">40%</span></li>
                        <li><span class="ppcp">20%</span></li>
                    </ul>
                </div>
            </div>
        </div>
 
        <div class="under">
            <div class="pager">
                <button class="previous_day">precedent</button>
                <button class="next_day">suivant</button>
            </div>
 
            <div class="part_day">
                <a href="#" class="day"></a>
                <a href="#" class="night"></a>
            </div>
        </div>
	</div>
 
</body>
</html>

les classes concernées sont : .day et .night
elles sont tout en bas du code css.

moon :

sun :

merci

**ornitho13** · 22/02/2011, 09h05

Salut,

Il y a un petit souci au niveau de tes instructions CSS:
Quand tu mets:

Code css :

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

.under .part_day .day a

Il va chercher le "a" se trouvant dans la classe "day", hors "day est le lien, il n'a pas de lien à l'intérieur.

Donc tu dois changer tes instructions:

Code css :

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
 
.under .part_day .day
    {
        float:left;
        background-image: url(http://icons.iconarchive.com/icons/harwen/weather/48/Sun-icon.png);
        display: block;
        width: 48px;
        height: 48px;
        text-indent: -9999px;
    }
 
    .under .part_day .night
    {
        float:left;
        background-image: url(http://icons.iconarchive.com/icons/harwen/weather/48/moon-icon.png);
        display: block;
        width: 48px;
        height: 48px;
        text-indent: -9999px;
    }

ou

Code css :

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
 
.under .part_day a.day
    {
        float:left;
        background-image: url(http://icons.iconarchive.com/icons/harwen/weather/48/Sun-icon.png);
        display: block;
        width: 48px;
        height: 48px;
        text-indent: -9999px;
    }
 
    .under .part_day a.night
    {
        float:left;
        background-image: url(http://icons.iconarchive.com/icons/harwen/weather/48/moon-icon.png);
        display: block;
        width: 48px;
        height: 48px;
        text-indent: -9999px;
    }

**thor76160** · 22/02/2011, 09h50

ah ben d'un coup d'un seul, ça marche déja mieux ^^
je dois encore régler le css pour le under, mais je vais me débrouiller. merci pour tout !

création d'un div resizable avec sous-élements

CSS

Discussions similaires

Partager

Partager