Positionnement div même ligne [Résolu]

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>

jreaux62 · 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

jreaux62 · 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é.

09/01/2012, 19h36	#2
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 994 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 994 Points : 5 787 Points : 5 787	Bonjour, un petit cours ne fait jamais de mal : -> Div et CSS : une mise en page rapide et facile (à étudier -> float:left __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

11/01/2012, 10h30	#5
n46il Invité de passage Inscription : janvier 2012 Messages : 3 Détails du profil Informations forums : Inscription : janvier 2012 Messages : 3 Points : 0 Points : 0	Problème : Résolu Bonjour, je vous remercie pour l'aide que vous m'avez accordé.
	00

10/01/2012, 09h15	#3
n46il Invité de passage Inscription : janvier 2012 Messages : 3 Détails du profil Informations forums : Inscription : janvier 2012 Messages : 3 Points : 0 Points : 0	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email