Menu Horizontal site

Version imprimable

08/11/2009, 01h57
EagleDig

Menu Horizontal site

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:

http://nsa10.casimages.com/img/2009/...2753709599.jpg

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

1:

Code:

<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:

<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:

<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:

<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:

<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:

<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
08/11/2009, 14h08
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:

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 :)

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

Code:

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