Menu horizontale, text pas sur image

Bonjour,

Où voulez vous que s'affiche le texte, sur l'image, en dessous ?

Cordialement

Je veux que le text s'affiche sur l'image, dans l'espèce d'onglet, au milieu si possible :

J'avais pensé a bidouiller tout ça en utilisant position: relative; puis en le plaçant grâce a top et left, mais bon si je dois faire ça pour chaque menu, c'est pas du boulot, en plus il doit y avoir un autre moyen, non?

Solution, mettez l'image dans une div
<div class='menu1'><a href="#">Accueil</a></div>

et la css

.menu1 {
background:url('menu1.png');
width: largeur image;
height:hauteur image;
}

Hmm, voila ce que cela donne:

https://www.pixenli.com/image1298546572080023200.html

Sa ne donne pas vraiment l'effet escompté ^^

Vous devez avoir ce code là :

<ul id="menu_horizontal">
<li><div class='menu1'><a href="#">Accueil</a></div> </li>
<li><div class='menu2'><a href="#">News</a></div></li>
...
</ul>

C'est ça ?

Et vous avez bien modifié la CSS avec

.menu1 .menu2 .menu3.... {
background:url('menu1.png');
width: largeur image;
height:hauteur image;
}

Je l'avais fait uniquement pour le 1er, voila ce que sa donne avec tous:

https://www.pixenli.com/image1298553347020050200.html

Bref on passe d'un menu horizontale à la verticale et le problème des textes reste le même :/

Oui ok désolé.

Dans la CSS il va falloir ajouter float:left; pour que les div soient les unes à côté des autres et vertical-align:bottom; et text-align:center; pour positionner le texte
après tu peux jouer avec le padding par ex padding: 0 0 5px 0; dans la css pour positionner le texte

.menu1 .menu2 .menu3.... {
float:left;
background:url('menu1.png');
width: largeur image;
height:hauteur image;
vertical-align:bottom;
text-align:center;
}

Pour le texte, il va falloir

Pour le texte, il va falloir...? ^^

J'ai essayé ce que vous m'avez dis de faire, tout semble fonctionner correctement, en tout cas c'est revenue en menu horizontale, par contre toujours le même soucis avec le positionnement du texte, je n'arrive pas a le mettre ou je veux, même en utilisant l'astuce du padding, car un bout de mon image se "duplique" si la valeur du padding est trop importante.

En tout cas j'attend la fin de votre message qui a été coupé, cela va peut étre résoudre mes soucis.

Merci pour vos solutions précédentes ;)

Vous pouvez me donner un lien vers une des images et m'envoyer la CSS ?

Je essayer de vous coder ça.

Wow, j'ai finalement réussi a poster mon message, désolé pour le temps d'attente, je voulais t'envoyer mes fichier via sendspace mais sa doit être considère comme de la pub donc mon message s'affichait pas. Voila tout ça, sinon j'ai une petite question, comment on fait pour faire un petit espace de disons 3 cm entre mes différents onglets ?

Image d'ensemble: https://www.pixenli.com/image1298559752035606300.html

Image menu1: https://www.pixenli.com/image1298560805094165900.html

HTML:

<ul id="menu_horizontal">
<li><div class='menu1'><a href="#">Accueil</a></div> </li>
<li><div class='menu2'><a href="#">News</a></div></li>
<li><div class='menu3'><a href="#">Livre d'or</a></div></li>
<li><div class='menu4'><a href="#">Admin</a></div></li>
<li><div class='menu5'><a href="#">Contact</a></div></li>
</ul>

CSS:

ul#menu_horizontal {
width : 852px;
margin : 0em 0 0 0;
padding : 0;
list-style-type : none;
}

ul#menu_horizontal li {
padding : 0 0.0em;
}

ul#menu_horizontal li.bouton_gauche {
float : left;
}

ul#menu_horizontal a {
color : black;
text-decoration : none;
padding : 0 0.1em;
font : 0.8em "Trebuchet MS";
float : left;
}

ul#menu_horizontal a img {
border : none;
padding : 0 0.1em;
}
span.menu-text {
width: 109px;
height:110px;
background-image:url(menu1.png);
float: left;
}
span.menu-text2{
position: relative;
height: auto;
width: auto;
left: 25px;
top: 90px;
}
div.menu1 {
background:url('menu1.png');
width: 109px;
height: 111px;
float:left;
vertical-align:bottom;
text-align:center;
}
div.menu2 {
background:url('menu2.png');
width: 109px;
height: 111px;
float:left;
vertical-align:bottom;
text-align:center;
}
div.menu3 {
background:url('menu3.png');
width: 109px;
height: 111px;
float:left;
vertical-align:bottom;
text-align:center;
}
div.menu4 {
background:url('menu4.png');
width: 109px;
height: 111px;
float:left;
vertical-align:bottom;
text-align:center;
}
div.menu5 {
background:url('menu5.png');
width: 109px;
height: 111px;
float:left;
vertical-align:bottom;
text-align:center;
}

Voila pour la CSS

div.menu5 {
background:url('menu5.png');
padding: 90px 0 0 15px;
width: 94px;
height: 21px;
float:left;
}

et le HTML est plus cool ainsi

<div>
<div class='menu1'><a href="#">Accueil</a></div>
<div class='menu2'><a href="#">News</a></div>
<div class='menu3'><a href="#">Livre d'or</a></div>
<div class='menu4'><a href="#">Admin</a></div>
<div class='menu5'><a href="#">Contact</a></div>
</div>

Parce que les <ul> et <li> forcent un formatage à gauche par défaut, après il faudra revoir la police des ancre a

Mais c'est l'idée

Ok je vois le genre, en tout cas merci bien ;)

Sinon dernière petite question pour la route ^^, est ce tu sais ce qu'il faut faire pour faire un espace entre mes différents "onglets" de mon menu ?, quelque chose comme 3 cm entre chaque.