Discussion :

[sanfenice]

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]

Bonjour,

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

[Invité]

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]

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?

[Invité]

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>