Discussion :

[ThitoO]

J'ai un probleme de placement de div (avec css). Je m'explique: j'ai un bloc que l'on va appeller "centre" de 800px de large. Dans ce bloc il y en a 3 autres. Le premier de 131px * 364px, je voudrai le placer a gauche (left: 0px -> Ouf sa marche. Le second de 518px * 600px, je voudrai le placer a 10px du precedent et à la meme hauteur (donc top: -364px; left: 10px -> Yep sa marche. Le troisieme de 131 * 364, je voudrai le placer lui aussi à la meme hauteur mais a 10px du precedent (donc top: -600px; left: 10px -> Arf c'est pas la bonne hauteur !!, bon tant pis je le remonte encore plus. Et enfin j'observe un BLANC enorme sous le bloc du center !!!

Voici ce que je voudrai:


Mon code:

Code :

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

1
2
3
4
5
6
7
8
 
			<div align="center">
					 <img src="images/site_02.gif" alt=""></br>	                      <!-- Logo -->
					 <img src="images/site_04.gif" width="800px" height="20px" alt=""></br> <!-- Barre du haut -->
					 			<div class="sousmenu"></div>		
								<div class="souscontenu"></div>
								<div class="soussondage"></div>
			</div>

Et mon 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
 
.sousmenu
{
position: relative;
width: 131px;
height: 364px;
top: 0px;
left: -334.5px;
background-image: url('images/site_10.gif');
border: red double 1px; 
}
.souscontenu
{
position: relative;
width: 518px;
height: 600px;
top: -364px;
left: 10px;
background-image: url('images/site_07.gif');
border: double black 1pt; 
}
.soussondage
{
position: relative;
width: 131px;
height: 364px;
top: 0px;
left: 0px;
background-image: url('images/site_10.gif');
border:  blue double 1px; 
}

ps: j'emploi ici le parametre de position: relative; car tout contenu dans le bloc "centre" doit etre centré.

ps2: desolé pour ce mega post mais je ne trouve pas de solution et je voulai tout mettre a votre disposition.

voila ce que ca donne: http://tanniao.free.fr/structure.htm

[Ricou13]

Salut,

Essaies plutôt de mettre tes 3 blocs en

Code :

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

float: left;

et en jouant sur les marges droite et gauche du bloc central pour créer les espacements.

[ThitoO]

Je vais essayer de mettre des margin-left: **px; margin-right: **px; pour mon bloc centrale. Mais par contre pour le bloc de gauche je met float: left; et pour le droit je peut mettre float: right; ??

[ThitoO]

C'est bon, jai mis les float et sa marche, pas comme je voulai a la base, mais bon c quand meme pas mal, et meme un peu mieu que ce que je pensai

Merci Ricou13

[Ricou13]

Tu peux mettre le bloc de droite en float: right; mais il faut alors impérativement qu'il soit positionné, dans ton html, avant les deux autres. Sinon il risque d'être décalé vers le bas.

Je pense que 3 float: left; à la suite est plus facilement gérable.

[ThitoO]

Oui, j'ai essayer mais le tout s'aligne a gauche et ne tien pas compte du premier gros block qui devrai les aligner au centre.

[Ricou13]

C'est normal, le float:left aligne le bloc le plus à gauche possible de son conteneur.

Or, ton conteneur fait la largeur totale de la page.

Si tu veux centrer ton contenu il faut :

1) supprimer le align-center de ton div principal;
2) lui donner un id
3) dans tes css, lui appliquer une largeur fixe (pas plus que 800px - prends celle de ta bannière)
4) lui ajouter :

Code :

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

margin: 0 auto;