Pb pour positionner des éléments

**cissou06** · 03/07/2007, 11h50

Bonjour,

Je souhaiterais un peu d'aide afin de positionner les différents "blocks" que j'ai définis comme je veux...

Voilà 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
 
body {
	font-family:Arial,Times;
	font-size:12px;
	color:black;  
	margin:5px;
	padding:0;
	border:0;
	background-color:white;
	}
 
div#main {
	width:800px;
	height:580px;
	margin-left:auto;
	margin-right:auto;
	background-color:orange;
	}
 
div#bandeau_haut {
	width:800px;
	height:160px;
	background-color:red;
	}
 
div#bandeau_gauche {
	width:250px;
	height:420px;
	margin:0;
	background-color:green;
	}
 
div#infos {
	width:200px;
	height:100px;
	margin:0;
	background-color:pink;
	}
 
div#photos {
	width:200px;
	height:300px;
	margin:0;
	background-color:lightsteelblue;
	}
 
div#contenu {
	width:490px;
	height:335px; 
	padding:30px; 
	font-family:Arial,Verdana;
	background-color:yellow;
	}
 
div#menus {
	width:550px;
	height:30px;
	z-index:100000; 
	background-color:black;
	}

Voilà 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
 
	<BODY>
		<DIV ID="main">
 
			<DIV ID="bandeau_haut">
 
			</DIV>
 
			<DIV ID="bandeau_gauche">
				<DIV ID="infos">
 
				</DIV>
				<DIV ID="photos">
 
				</DIV>
			</DIV>
 
 
			<DIV ID="menus">
 
			</DIV>
 
			<DIV ID="contenu">
 
			</DIV>
 
		</DIV>
 
	</BODY>

J'ai donc bien le "block" orange qui contient en haut le rouge, en dessous à gauche le vert (qui contient lui même le rose et bleu clair) Par contre les 'blocks' noir (menus) et jaune (contenu) j'aurais voulu qu'il se positionne sur le orange, à droite du vert. Hors là ils se mettent en dessous du orange...

Je ne sais pas comment faire

alors si qq'un a une petite idée, je prends!

Merci d'avance!!!!

**buzeeg** · 03/07/2007, 16h24

Salut,

en fait ce n'est pas bien compliqué. Où a-tu indiqué que le bandeau gauche doit être à gauche, ou alors que les deux autres (contenu et menu) doivent être à droite ?

il suffit de rajouter dans ton bandeau gauche

Code :

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

 float: left;

d'autre part, tes bandeaux se placent sous le main (orange), car tu a spécifié une valeur pour la hauteur (height), et la somme des deux hauteurs (bandeauhaut + bandeaugauche) fait la hauteur de main (logique c'est ce que tu veux), donc les reste ne se plaçant pas à droite, il se met en dessous, et en dessous du div main à cause de ça. (je te conseille d'enlever la hauteur pour la div main d'ailleurs pour débugguer)

**cissou06** · 03/07/2007, 17h27

Ah merci! ça marche comme je voulais! Je maitrise pas encore tous ces trucs de positionnement, float etc... MERCI!!!!

**buzeeg** · 03/07/2007, 17h32

Pas de problème.

Ouai ça marche pas toujours comme prévu, j'ai eu aussi un peu de mal avec ça au début.

**cissou06** · 03/07/2007, 17h32

Heu... je me suis emballée un peu vite... je viens de me rendre compte qu'en fait les "blocks" jaunes et noirs se glissent derrière le "block" vert au lieu de se mettre à côté...

**cissou06** · 03/07/2007, 17h36

J'ai trouvé en bidouillant! J'ai rajouté float:right pour les "blocks" noirs et jaunes et ça marche! Merci de m'avoir mise sur la piste!

**buzeeg** · 03/07/2007, 18h55

oui, il faut parfois jouer avec les float:right; float:left; et clear:both;

Pb pour positionner des éléments

Positionnement en CSS

Discussions similaires

Partager

Partager