Discussion :

[Pfeffer]

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]

[titoumimi]

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
 
#moduleHaut {
    padding: 10px ;
   margin-left:160px;
    margin-right: 0px;
   border:solid 1px;
   /*height:200px;
}
#image1 {
 width:33%;
text-align:center;
float:left;
}
#image2 {
 width:34%;
text-align:center;
float:left;
}
#image3 {
 width:33%;
text-align:center;
float:left;
}

puis dans ton HTML :

Code :

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

1
2
3
4
5
6
 
<div id="#moduleHaut">
<div id="image"1"><img src="..."></div>
<div id="image"2"><img src="..."></div>
<div id="image"3"><img src="..."></div>
</div>

[gorgonite]

ben tu mets les trois dans un div float, et tu mets a chacune les margin...

[Pfeffer]

Merci titoumimi,

mais comment faire maintenant pour que les vignettes soient en fait des cadres dans lesquels j'affiche des informations ? Et comment faire surtout pour que ces cadres soient séparés par une marge ?

[AlphaYoDa]

Code :

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

1
2
3
4
5
#image1 {
 width:33%;
text-align:center;
float:left;
}

Tu définis pour chaque vignette :

- ses marges : margin-left, margin-top, etc ou tout en un : margin:20px 0 20px 0;
- sa marge interne : padding
- sa bordure : border

Si tu ne connais pas ces propriétés , cherches sur google un tutorial CSS, ce sont les éléments de bases

[Pfeffer]

Très bien merci, cela fonctionne j'ai réussi a séparer les blocs entre eux.

Le hic c'est que maitnenant lorsque je réduit trop la fenêtre en largeur, le troisième block (#image3) se case en dessous du premier block. Et la zone du dessus s'abaisse au niveau des deux premiers blocks (#image1 et #image2).

[img]
http://anthony.pfeffer.free.fr/probleme.JPG
[/img]

Comment faire c'est un véritable casse tête cette mise en page ?

[gorgonite]

le problème, c'est que son width:XX% plus les margin fixes... ça dépasse les 100%

tu peux essayer avec des margin en %