Menu horizontale, text pas sur image

Résolu/Fermé
Bassre Messages postés 43 Date d'inscription vendredi 10 décembre 2010 Statut Membre Dernière intervention 27 janvier 2012 - Modifié par Bassre le 24/02/2011 à 11:19
 Utilisateur anonyme - 25 févr. 2011 à 16:59
Bonjour,


Voila mon petit soucis, sa doit être tout bête mais je n'arrive pas a trouver, vola pourquoi je suis là, pour demander de l'aide.

Je fais un menu horizontale mais voila que le texte de mes liens s'affiche a droite de mes images et je ne trouve pas pourquoi. Une image est plus parlant, donc voici:

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

Voici un bout de code html et css:

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


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";
}

ul#menu_horizontal a:hover { text-decoration : underline; }

ul#menu_horizontal a img {
border : none;
padding : 0 0.1em;
}

Merci d'avance :)
A voir également:

13 réponses

Utilisateur anonyme
24 févr. 2011 à 11:23
Bonjour,

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

Cordialement
0
Bassre Messages postés 43 Date d'inscription vendredi 10 décembre 2010 Statut Membre Dernière intervention 27 janvier 2012 8
24 févr. 2011 à 11:33
Je veux que le text s'affiche sur l'image, dans l'espèce d'onglet, au milieu si possible :
0
Bassre Messages postés 43 Date d'inscription vendredi 10 décembre 2010 Statut Membre Dernière intervention 27 janvier 2012 8
24 févr. 2011 à 11:42
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?
0
Utilisateur anonyme
24 févr. 2011 à 11:45
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;
}
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Bassre Messages postés 43 Date d'inscription vendredi 10 décembre 2010 Statut Membre Dernière intervention 27 janvier 2012 8
24 févr. 2011 à 12:24
Hmm, voila ce que cela donne:

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

Sa ne donne pas vraiment l'effet escompté ^^
0
Utilisateur anonyme
24 févr. 2011 à 13:28
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;
}
0
Bassre Messages postés 43 Date d'inscription vendredi 10 décembre 2010 Statut Membre Dernière intervention 27 janvier 2012 8
24 févr. 2011 à 14:17
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 :/
0
Utilisateur anonyme
24 févr. 2011 à 14:39
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
0
Bassre Messages postés 43 Date d'inscription vendredi 10 décembre 2010 Statut Membre Dernière intervention 27 janvier 2012 8
24 févr. 2011 à 15:07
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 ;)
0
Utilisateur anonyme
24 févr. 2011 à 15:16
Vous pouvez me donner un lien vers une des images et m'envoyer la CSS ?

Je essayer de vous coder ça.
0
Bassre Messages postés 43 Date d'inscription vendredi 10 décembre 2010 Statut Membre Dernière intervention 27 janvier 2012 8
Modifié par Bassre le 24/02/2011 à 16:22
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;
}
0
Utilisateur anonyme
24 févr. 2011 à 16:49
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
0
Bassre Messages postés 43 Date d'inscription vendredi 10 décembre 2010 Statut Membre Dernière intervention 27 janvier 2012 8
25 févr. 2011 à 10:20
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.
0
Utilisateur anonyme
25 févr. 2011 à 16:59
De rien.
0