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
| <!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>Cadres arrondis</title>
<style type="text/css">
#corps {width: 500px;height: 500px;margin:5px;}
#corps_hg, #corps_hd, #corps_bg, #corps_bd {width:17px;height: 19px;}
#corps_haut, #corps_bas {width:466px;height: 19px;}
#corps_gauche,#corps_droite {
width: 17px;
height: 462px;
}
#corps_info {
width: 466px;
height: 462px;
background-color: gray;
/*background-repeat:repeat; lorsqu'on utilise une image*/
}
#corps div { float: left; } /* S'applique à tous les divs de .cadre_arrondi */
#corps_hg, #corps_gauche, #corps_bg { clear: left; } /* Pour passer outre le float des blocs précédents */
#corps_hg { background-color: gray; }
#corps_hd { background-color: gray; }
#corps_bg { background-color: gray; }
#corps_bd { background-color: gray; }
#corps_haut { background-color: gray; }
#corps_bas { background-color: gray; }
#corps_gauche { background-color: gray; }
#corps_droite { background-color: gray;}
</style>
</head>
<body>
<div id="corps">
<div id="corps_hg">hg</div>
<div id="corps_haut">h</div>
<div id="corps_hd">hd</div>
<div id="corps_gauche">g</div>
<div id="corps_info">Ici, c'est le contenu du cadre !</div>
<div id="corps_droite">d</div>
<div id="corps_bg">bg</div>
<div id="corps_bas">b</div>
<div id="corps_bd">bd</div>
</div>
</body>
</html> |
Design extensible : quel solution ?
Répondre avec citation
Partager