Bonjour,
Je débute en CSS et j'essaie de faire un site sans passer par les tableaux html classique mais je n'arrive pas à faire ce que je veux!
Voici la mise en page que j'aimerai faire:
En fait les trois vignettes (dans la partie du haut) se positionnent n'importe comment lorsque la fenêtre du navigateur se réduit. Moi ce que j'aimerai c'est que ces vignettes soient alignées et séparées par un espace et surtout qu'elles restent en place lorsque l'utilisateur réduit la fenêtre.
Voici le code de mon fichier css:
et voici comment je l'utilise dans mon fichier html:
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 body { margin: 0px; padding: 0px; } //Entete du fichier div#header { text-align: center; background-color: #CCCCCC; height: 60px; margin: 0px; padding: 1px; margin-bottom:10px; } //colonne a gauche div#navcol { padding: 10px; width: 130px; float: left; background-color:#FFFFFF; } //Zone qui contient les vignettes en haut div#moduleHaut { padding: 10px ;/*espace interne a l'élément. Varie entre 1 et 4 valeurs*/ margin-left:160px;/*espace par rapport à l'élément gauche*/ margin-right: 0px;/*espace par rapport à l'élément droit*/ border:solid 1px; /*height:200px;*/ } //Zone qui contient les vignettes en bas div#moduleBas { padding: 10px ;/*espace interne a l'élément. Varie entre 1 et 4 valeurs*/ margin-left:160px;/*espace par rapport à l'élément gauche*/ margin-top: 5px; border:solid 1px; } //Zone principale div#main { padding: 10px ;/*espace interne a l'élément. Varie entre 1 et 4 valeurs*/ margin-left:160px;/*espace par rapport à l'élément gauche*/ margin-top: 5px; border:solid 1px; } //Pied de page div#foot { /*border-top: solid #000 1px;*/ background-color: #CCCCCC; padding: 10px; margin-top:10px; text-align: center; } //Les vignettes div.float { float: left; margin-left:100px; width:100px; text-align:justify; } div.spacer { clear: both; } div.float p { text-align: center; }
Est ce que quelqu'un peut m'éclairer ?
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 <div id="moduleHaut"> <div class="float"> <img src="image1.gif" width="100" height="100"alt="image 1" /><br /> <p>légende 1</p> </div> <div class="float" style="margin-left:50px"> </div> <div class="float"> <img src="image2.gif" width="100" height="100" alt="image 2" /><br /> <p>légende 2</p> </div> <div class="float" style="margin-left:50px"> </div> <div class="float"> <img src="image3.gif" width="100" height="100" alt="image 3" /><br /> <p>légende 3</p> </div> <p> </p> <p> </p> <p> </p> </div>
Meri d'avance à ceux qui se penchent sur la question.[/code]
Partager