Positionnement horizontal de plusieurs div

sanfenice · 12/12/2011, 14h50

Bonjour,

Voila je souhaiterai positionner horizontalement 4 BOUTONS, chacun étant créé dans un élément de type div class, et ce, dans un conteneur, de type class également.

Pour l'instant je n'affiche que les images correspondant a mes boutons.

En effectuant une recherche, il avait été conseillé d'insérer cette portion de code, dans l'élément conteneur:

text-align: center;

Ou alors, l'idée et d'utiliser la balise float: left, float: right, mais aucune de ces deux solutions ne m'a permis de résoudre mon problème, je n'ai donc pas insérer les balises adéquates dans mon code actuel, je vous fournit donc ma portion de code afin d'avoir surtout une idée de la construction.

Voici mon code CSS:

.social-network représente l'élément conteneur.

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
.social-network {
 
 
	padding-top: 10px;
	height:118px;
	width: 259px;
	background:url(images/socialnetwork-bt-bg.png) no-repeat left top;
 
 
	}
 
 
.social-network .fb{
 
	width: 46px;
	height:45px;
	background:url(images/facebook-bt.png) no-repeat left top;
 
 
	}
 
.social-network .tw{
 
 
	width: 46px;
	height:45px;
	background:url(images/twitter-bt.png) no-repeat left top;
 
 
	}
 
.social-network .fl{
 
	width: 46px;
	height:45px;
	background:url(images/flickr-bt.png) no-repeat left top;
 
 
	}
 
.social-network .yt{
 
	width: 46px;
	height:45px;
	background:url(images/youtube-bt.png) no-repeat left top;
 
 
	}

Dans mon footer, j'ai ceci:

Code :

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

1
2
3
4
5
6
7
8
<div class="social-network">
 
    <div class="fb"></div>
    <div class="tw"></div>
    <div class="fl"></div>
    <div class="yt"></div>
 
    </div>

Merci pour votre aide.

Emyleen · 12/12/2011, 15h00

Bonjour,

As-tu essayé de mettre tes div en display: inline-block? Cela permettrait de les aligner je penses

jreaux62 · 12/12/2011, 16h55

Bonjour,
comme ça ?

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
.social-network {
	margin:0 auto;	/* centrage du conteneur */
	padding-top: 10px;
	height: 118px;
	width: 256px;
	background:url(images/socialnetwork-bt-bg.png) no-repeat left top;
 	}
 
.social-network .fb{
	float:left;
	margin: 35px 9px;
	width: 46px;
	height: 45px;
	background:url(images/facebook-bt.png) no-repeat left top;
	}
 
.social-network .tw{
	float:left;
	margin: 35px 9px;
	width: 46px;
	height: 45px;
	background:url(images/twitter-bt.png) no-repeat left top;
 	}
 
.social-network .fl{
	float:left;
	margin: 35px 9px;
	width: 46px;
	height: 45px;
	background:url(images/flickr-bt.png) no-repeat left top;
	}
 
.social-network .yt{
	float:left;
	margin: 35px 9px;
	width: 46px;
	height: 45px;
	background:url(images/youtube-bt.png) no-repeat left top;
	}

Emyleen · 12/12/2011, 17h51

Non, pas en float: left, en display, comme ça :

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
.social-network {
	margin:0 auto;	/* centrage du conteneur */
	padding-top: 10px;
	height: 118px;
	width: 256px;
	background:url(images/socialnetwork-bt-bg.png) no-repeat left top;
 	}
 
.social-network .fb{
	display: inline-block;
	margin: 35px 9px;
	width: 46px;
	height: 45px;
	background:url(images/facebook-bt.png) no-repeat left top;
	}
 
.social-network .tw{
	display: inline-block;
	margin: 35px 9px;
	width: 46px;
	height: 45px;
	background:url(images/twitter-bt.png) no-repeat left top;
 	}
 
.social-network .fl{
	display: inline-block;
	margin: 35px 9px;
	width: 46px;
	height: 45px;
	background:url(images/flickr-bt.png) no-repeat left top;
	}
 
.social-network .yt{
	display: inline-block;
	margin: 35px 9px;
	width: 46px;
	height: 45px;
	background:url(images/youtube-bt.png) no-repeat left top;
	}

Edit: Ah pardon je pensais que c'était l'auteur du sujet qui avait répondu

mais ta solution avec les float fonctionne aussi, tu as vérifié sous IE?

jreaux62 · 12/12/2011, 18h03

il faut juste vérifier qu'on a bien un doctype :

Code :

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

1
2
3
4
<!DOCTYPE html>
<html>
...
</html>

et ajouter :

Code :

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

1
2
3
4
body {
	width:100%;
	height:100%;
}

Ca marche aussi avec display: inline-block; sauf qu'on trouve un "espace" entre les div (ce qui perturbe l'affichage).
A moins d'écrire :

Code :

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

1
2
3
4
5
<div class="social-network">
 
    <div class="fb"></div><div class="tw"></div><div class="fl"></div><div class="yt"></div>
 
</div>

12/12/2011, 15h00	#2
Emyleen Membre actif Emeline Dabée Webmaster Inscription : mars 2010 Messages : 136 Détails du profil Informations personnelles : Nom : Emeline Dabée Âge : 26 Localisation : France, Aveyron (Midi Pyrénées) Informations professionnelles : Activité : Webmaster Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : mars 2010 Messages : 136 Points : 171 Points : 171	Bonjour, As-tu essayé de mettre tes div en display: inline-block? Cela permettrait de les aligner je penses
	00

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