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:
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;
}
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
 
<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>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
 
	</div>
Est ce que quelqu'un peut m'éclairer ?

Meri d'avance à ceux qui se penchent sur la question.[/code]