Positionnement div même ligne

**n46il** · 09/01/2012, 19h01

Bonjour,
je voudrais positionner plusieurs div sur une même ligne.
Il s'agit du menu 2 et 3. Par défaut les div sautent la ligne, mais même si je
mets un display: inline; ma div disparaît. Pour être sur que les images ne soient pas l'une sur l'autre, j'ai ajouté margin-left :70% et 50%.
Toujours le même résultat
Merci de votre aide.
Css :

Code css :

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
div {
	text-align:center;
	}
 
body {
	background : transparent url("header.png") repeat;
	margin : auto;
}
div#bandeau {
	background : transparent url("logo.png") no-repeat;
	height : 220px;
	width : 900px;
	margin : 0 auto;
} 
 
div#menu2{
	background : transparent url("menu2.png") no-repeat;
	width: 105px;
	height :50px;
	margin-left: 50% ;
 
 
	}
 
div#menu3{
	background : transparent url("menu3.png") no-repeat;
	width: 105px;
	height :50px;
	margin-left: 70%;
 
 
	}
 
 
div#contenu {
	background : transparent url("body.png") no-repeat;
	height : 622px;
	width : 700px;
	margin : 0 auto;
	}
div#pied_page {
	background : transparent url("footer.png") no-repeat;
	height : 39px;
	width : 700px;
	margin : 0 auto;

HTML :

Code html :

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

1
2
3
4
5
6
7
body>
	<div id="bandeau"></div>
	<div id="menu2"></div>
	<div id="menu3"></div>
	<div id="contenu"></div>
	<div id="pied_page"></div>
</body>

Invité · 09/01/2012, 19h36

Bonjour,
un petit cours ne fait jamais de mal :
-> Div et CSS : une mise en page rapide et facile
(à étudier -> float:left

**n46il** · 10/01/2012, 09h15

Bonjour,
le float: left; a déjà été utilisé mais sans succès. Ma div se positionne à gauche mais ne reste pas au centre.
Mon problème est que je n'arrive pas à mettre 2 div côte à côte au milieu.
Merci de votre aide

Invité · 10/01/2012, 12h02

Il fallait le dire tout de suite :

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
#menucentre{
	clear: both;
	width: 210px; /* largeur des 2 div (menu2 + menu3) */
	margin: 0 auto; /* centrage horizontal automatique */
#menu2{
	float: left;
	margin: 0;
	width: 105px;
	height: 50px;
	background : transparent url("menu2.png") no-repeat;
}
#menu3{
	float: left;
	margin: 0;
	width: 105px;
	height: 50px;
	background : transparent url("menu3.png") no-repeat;
}

Code :

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

1
2
3
4
5
6
7
8
9
<body>
	<div id="bandeau">...</div>
	<div id="menucentre">
		<div id="menu2">...</div>
		<div id="menu3">...</div>
	</div>
	<div id="contenu">...</div>
	<div id="pied_page">...</div>
</body>

**n46il** · 11/01/2012, 10h30

Bonjour,
je vous remercie pour l'aide que vous m'avez accordé.

Positionnement div même ligne

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager