Discussion :

[Mathieu Salles]

Bonjour,

J'ai un problème tout bête, je n'arrive pas à aligner une série de 5 liens horizontalement et à droite.

L'idée et que l'affichage s'adapte si je dois ajouter ou supprimer une icône.

Voici le code HTML de ma page :

Code html :

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

1
2
3
4
5
6
7
<div class="acces">
	<a class="acces1" href="lien1"><img src="icon1"/> </a>
	<a class="acces2" href="lien2"><img src="icon2"/></a>	
	<a class="acces3" href="lien3"><img src="icon3"/></a>
	<a class="acces4" href="lien4"><img src="icon4"/></a>
	<a class="acces5" href="lien5"><img src="icon4"/></a>	
</div>

Et j'ai essayé avec le css suivant :

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
.acces{
	width:20%;
	float:right;
	display: inline;
 
}
 
.acces img{
	height:30px;
	width:30px;
 
}
 
.acces1{
	margin-left: 15px;
}
 
.acces2{
	margin-left: 15px;
}
 
.acces3{
	margin-left: 15px;
}
 
.acces4{
	margin-left: 15px;
}
 
.acces5{
	margin-left: 15px;
}

Bon il est faux bien sur mais j'ai testé avec inline block et plein de dérivé. Mon principale problème c'est que mes 5 icônes se chevauchent.

Si vous pouvez m'aider.

[Torgar]

Salut,

Sans doute parce que le width est pas assez grand et du coup te place les éléments sur plusieurs lignes.

Ceci devrait donner le résultat attendu :

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
#acces{
	width: 30%; /* à modifier à ta convenance */
	float: right;
	text-align: right;
	border: 1px solid black;
}
 
#acces img{
	height:30px;
	width:30px;
}
 
#acces a {
	margin-left: 15px;
}

Code html :

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

1
2
3
4
5
6
7
<div id="acces">
	<a href="lien1"><img src="icon1" alt="" /></a>
	<a href="lien2"><img src="icon2" alt="" /></a>	
	<a href="lien3"><img src="icon3" alt="" /></a>
	<a href="lien4"><img src="icon4" alt="" /></a>
	<a href="lien5"><img src="icon4" alt="" /></a>	
</div>

Tu noteras que j'ai simplifié le CSS. En effet, ce n'est pas utile et pertinent de faire plusieurs déclarations CSS ayant la même règle (margin-left ici).

[zwaldo]

Hello,

Pourquoi tu n'utilises pas de liste?

Code html :

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

1
2
3
4
5
6
7
8
9
<div id="acces">
<ul id="navigation">	
<li><a href="lien1"><img src="icon1" alt="" /></a></li>
<li><a href="lien2"><img src="icon2" alt="" /></a></li>	
<li><a href="lien3"><img src="icon3" alt="" /></a></li>
<li><a href="lien4"><img src="icon4" alt="" /></a></li>
<li><a href="lien5"><img src="icon4" alt="" /></a></li>
</ul>
</div>

avec pour css :

Code :

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

1
2
3
#navigation li {
  display: inline;
}