Discussion :

[EagleDig]

Bonsoir,
Voila je suis en train de monter un site afin de présenter mes créations de skins sous Windows Mobile.
Je ne fait pas au plus compliqué, ej suis chez e-monsite qui est très bien.
Je viens vous demander de l'aide afin de faire une barre de menu.
J'ai donc bien les différentes images en HTML mais je ne sais pas comment les aligner sur la même ligne comme ceci:



Je souhaite aligner 6 icones sur une même ligne.
Voici les HTML des images:

1:

Code :

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

<a href="http://www.casimages.com"><img src="http://nsa11.casimages.com/img/2009/11/08/091108015723459839.png" alt="Image hébergée par Casimages.com : votre hébergeur d images simple et gratuit" border="0"/>

2:

Code :

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

<a href="http://www.casimages.com"><img src="http://nsa11.casimages.com/img/2009/11/08/091108020031558683.png" alt="Image hébergée par Casimages.com : votre hébergeur d images simple et gratuit" border="0"/>

3:

Code :

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

<a href="http://www.casimages.com"><img src="http://nsa10.casimages.com/img/2009/11/08/091108020110327955.png" alt="Image hébergée par Casimages.com : votre hébergeur d images simple et gratuit" border="0"/>]

4:

Code :

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

<a href="http://www.casimages.com"><img src="http://nsa10.casimages.com/img/2009/11/08/091108020154816366.png" alt="Image hébergée par Casimages.com : votre hébergeur d images simple et gratuit" border="0"/>

5:

Code :

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

<a href="http://www.casimages.com"><img src="http://nsa10.casimages.com/img/2009/11/08/091108020219456062.png" alt="Image hébergée par Casimages.com : votre hébergeur d images simple et gratuit" border="0"/>

6:

Code :

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

<a href="http://www.casimages.com"><img src="http://nsa11.casimages.com/img/2009/11/08/091108020248612831.png" alt="Image hébergée par Casimages.com : votre hébergeur d images simple et gratuit" border="0"/>

Voila, les liens sont importants et seront à éditer, je ne l'ai pas encore fait car je nai pas créer mes page pour le moment.
Je suis arrivé à faire quelques chose et à commencer à mettre 2 icones ça sembl etre bon mais je comprend pas comment j'ai fait les lienq ue je donne viennent de Casimages, c'est peut etre ça qui me bloque.

Merci d'avance,
Cordialement

[kaiser59]

Salut,

Je ne sais pas si sur Mobile cela pourrait marcher mais pense à mettre tes images en float égale à left, donc si tu peux mettre du css, il te faut ceci :

Code css :

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

1
2
3
4
5
.alignImg {
border:0;
width:60px;
height:60px;
float:left;}

et dans le code de tes images tu ajoutes la class

En espérant que ça marche

[EagleDig]

Merci beaucoup, mais j'ai trouvé, voici ce qu'il falait mettre :

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
<ul id="menu_horizontal">
<li class="bouton_gauche"><a href="http://eagledig.e-monsite.com/"><img src="http://nsa11.casimages.com/img/2009/11/08/091108015723459839.png" alt="accueil" /></a></li>
<li class="bouton_gauche"><a href="#"><img src="http://nsa11.casimages.com/img/2009/11/08/091108020031558683.png" alt="news" /></a></li>
<li class="bouton_gauche"><a href="#"><img src="http://nsa10.casimages.com/img/2009/11/08/091108020110327955.png" alt="livre d'or" /></a></li>
<li class="bouton_gauche"><a href="#"><img src="http://nsa10.casimages.com/img/2009/11/08/091108020154816366.png" alt="admin" /></a></li>
<li class="bouton_gauche"><a href="#"><img src="http://nsa10.casimages.com/img/2009/11/08/091108020219456062.png" alt="contact"/></a></li>
<li class="bouton_gauche"><a href="http://www.mobilecustom.fr/forum/index.php"><img src="http://nsa11.casimages.com/img/2009/11/08/091108020248612831.png" alt="contact"/></a></li>
</ul>
 
       <style type="text/css">
ul#menu_horizontal { 
width : 1000px; 
height : 64px;
margin : 0em 0 0 0;
padding : 0;
list-style-type : none; 
margin: auto;
}
 
ul#menu_horizontal li {
padding : 0;  
}
 
ul#menu_horizontal li.bouton_gauche {
float : left;
}
 
ul#menu_horizontal li.bouton_droite {
float : right;
}
 
ul#menu_horizontal a {
color : black;
text-decoration : none;
padding : 0; 
}
 
ul#menu_horizontal a:hover { text-decoration : underline; }
 
ul#menu_horizontal a img { 
border : none;
padding :  0;
}
 
       </style>

Pour voir ce que ça donne => http://eagledig.e-monsite.com/accueil.html