Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Tout d'abord, écrivons le code XHTML (vous devriez y arriver facilement) :
Code : HTML 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 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Gestions de fenêtres en JavaScript</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="fenetre">
<div class="haut">
<div class="haut_gauche"></div>
<div class="haut_droite"></div>
<div class="haut_centre"></div>
</div>
<div class="milieu">
<div class="milieu_gauche"></div>
<div class="milieu_droite"></div>
<div class="milieu_centre"></div>
</div>
<div class="bas">
<div class="bas_gauche"></div>
<div class="bas_droite"></div>
<div class="bas_centre"></div>
</div>
</div>
</body>
</html>
|
Nous avons là créé une première
div de
class fenetre dans laquelle se trouvent trois
div (
haut,
milieu et
bas), dans lesquelles se trouvent également trois
div (on effectue ainsi ce qu'on a prévu dans le chapitre précédent).
À présent, on va agrémenter tout cela avec le CSS.
Le bloc principal
Code : CSS 1
2
3
4
5
6
7
8
9
10
11 | body {
background-color: #0077ff; /*On change la couleur de fond car le blanc, ce n'est pas très joli*/
}
.fenetre {
position: absolute; /*On place notre fenêtre en position absolute car celle-ci pourra être bougée*/
top: 100px;
left: 100px;
width: 300px; /*On donne ici les dimensions de la fenêtre*/
height: 200px;
background-color: red;
}
|
Ainsi, on obtient cela :
Les trois blocs pour le haut, le milieu et le bas
Code : CSS 1
2
3
4
5
6
7
8
9
10
11
12 | .haut {
height: 28px; /*Ici on indique que le haut fera 28px de longueur, vous pouvez changer cela si votre fenêtre a un design différent*/
background-color: green;
}
.milieu {
height: 100%; /*Ici on dit au milieu de prendre toute la longueur possible*/
background-color: orange;
}
.bas {
height: 8px; /*Ici on indique la taille du bas, comme pour le haut*/
background-color: green;
}
|
On obtient cela :
Les blocs qui séparent en trois ces trois blocs
Code : CSS 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 | .haut_gauche {
width: 8px; /*On indique la largeur du coin haut gauche*/
height: 100%; /*On lui indique de prendre toute la longueur possible.*/
background-color: red;
float: left; /*On le positionne à gauche*/
}
.haut_droite { /*On fait de même avec le coin haut droit*/
width: 8px;
height: 100%;
background-color: red;
float: right;
}
.haut_centre {
height:100%;
background-color: green;
margin-left: 8px; /*On fait cela pour que le centre ne se retrouve pas sous les coins*/
margin-right: 8px;
}
.milieu_gauche { /*On répète les mêmes opérations pour les autres div*/
width: 8px;
height: 100%;
background-color: orange;
float: left;
}
.milieu_droite {
width: 8px;
height: 100%;
background-color: orange;
float: right;
}
.milieu_centre {
height: 100%;
background-color: #ffffff;
margin-left: 8px;
margin-right: 8px;
text-align: center;
}
.bas_gauche {
width: 8px;
height: 100%;
background-color: red;
float: left;
}
.bas_droite {
width: 8px;
height: 100%;
background-color: red;
float: right;
}
.bas_centre {
height: 100%;
background-color: green;
margin-left: 8px;
margin-right: 8px;
}
|
Voici ce qu'on obtient :
Voilà un résumé de notre CSS (j'ai retiré les
background-color qui ne servent à rien) :
Code : CSS 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 | body {
background-color: #0077ff; /*On change la couleur de fond car le blanc, ce n'est pas très joli*/
}
.fenetre {
position: absolute; /*On place notre fenêtre en position absolute car celle-ci pourra être bougée*/
top: 100px;
left: 100px;
width: 300px; /*On donne ici les dimensions de la fenêtre*/
height: 200px;
}
.haut {
height: 28px; /*Ici on indique que le haut fera 28px de longueur, vous pouvez changer cela si votre fenêtre a un design différent*/
}
.milieu {
height: 100%; /*Ici on dit au milieu de prendre toute la longueur possible*/
}
.bas {
height: 8px; /*Ici on indique la taille du bas, comme pour le haut*/
}
.haut_gauche {
width: 8px; /*On indique la largeur du coin haut gauche*/
height: 100%; /*On lui indique de prendre toute la longueur possible.*/
background-color: red;
float: left; /*On le positionne à gauche*/
}
.haut_droite { /*On fait de même avec le coin haut droit*/
width: 8px;
height: 100%;
background-color: red;
float: right;
}
.haut_centre {
height:100%;
background-color: green;
margin-left: 8px; /*On fait cela pour que le centre ne se retrouve pas sous les coins*/
margin-right: 8px;
}
.milieu_gauche { /*On répète les mêmes opérations pour les autres div*/
width: 8px;
height: 100%;
background-color: orange;
float: left;
}
.milieu_droite {
width: 8px;
height: 100%;
background-color: orange;
float: right;
}
.milieu_centre {
height: 100%;
background-color: #ffffff;
margin-left: 8px;
margin-right: 8px;
text-align: center;
}
.bas_gauche {
width: 8px;
height: 100%;
background-color: red;
float: left;
}
.bas_droite {
width: 8px;
height: 100%;
background-color: red;
float: right;
}
.bas_centre {
height: 100%;
background-color: green;
margin-left: 8px;
margin-right: 8px;
}
|
Le résultat ne ressemble pas encore à ce que nous avions prévu de faire
:
Nous allons alors, toujours avec le CSS, ajouter des
background-image à nos blocs.
Voilà les images que j'utilise (faites un clic droit sur chaque lien puis :
Enregistrer la cible sous...):
Voilà le nouveau code CSS avec les images en
background (placées dans un dossier nommé
images) :
Code : CSS 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 | body {
background-color: #0077ff; /*On change la couleur de fond car le blanc, ce n'est pas très joli*/
}
.fenetre {
position: absolute; /*On place notre fenêtre en position absolute car celle-ci pourra être bougée*/
top: 100px;
left: 100px;
width: 300px; /*On donne ici les dimensions de la fenêtre*/
height: 200px;
}
.haut {
height: 28px; /*Ici on indique que le haut fera 28px de longueur, vous pouvez changer cela si votre fenêtre a un design différent*/
}
.milieu {
height: 100%; /*Ici on dit au milieu de prendre toute la longueur possible*/
}
.bas {
height: 8px; /*Ici on indique la taille du bas, comme pour le haut*/
}
.haut_gauche {
width: 8px; /*On indique la largeur du coin haut gauche*/
height: 100%; /*On lui indique de prendre toute la longueur possible.*/
background-image: url(images/haut_gauche.png);
float: left; /*On le positionne à gauche*/
}
.haut_droite { /*On fait de même avec le coin haut droit*/
width: 8px;
height: 100%;
background-image: url(images/haut_droite.png);
float: right;
}
.haut_centre {
height:100%;
margin-left: 8px; /*On fait cela pour que le centre ne se retrouve pas sous les coins*/
margin-right: 8px;
background-image: url(images/haut_centre.png);
}
.milieu_gauche { /*On répète les mêmes opérations pour les autres div*/
width: 8px;
height: 100%;
background-image: url(images/milieu_gauche.png);
float: left;
}
.milieu_droite {
width: 8px;
height: 100%;
background-image: url(images/milieu_droite.png);
float: right;
}
.milieu_centre {
height: 100%;
background-color: #ffffff;
margin-left: 8px;
margin-right: 8px;
text-align: center;
}
.bas_gauche {
width: 8px;
height: 100%;
background-image: url(images/bas_gauche.png);
float: left;
}
.bas_droite {
width: 8px;
height: 100%;
background-image: url(images/bas_droite.png);
float: right;
}
.bas_centre {
height: 100%;
background-image: url(images/bas_centre.png);
margin-left: 8px;
margin-right: 8px;
}
|
Nous avons donc fini l'écriture du code XHTML/CSS de notre fenêtre.
Si vous avez pris des images différentes pour le design de la fenêtre, n'oubliez pas de changer les dimensions des blocs concernés dans le CSS
.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
194 Zéros connectés |
8 requêtes |
0.0387s (0.0268s)
