Menu horizontale, text pas sur image
Résolu
Bassre
Messages postés
49
Statut
Membre
-
Utilisateur anonyme -
Utilisateur anonyme -
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 :)
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:
- Menu horizontale, text pas sur image
- Menu déroulant excel - Guide
- Image iso - Guide
- Ligne horizontale word - Guide
- Canon quick menu - Télécharger - Utilitaires
- Extraire texte d'une image - Guide
13 réponses
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;
}
<div class='menu1'><a href="#">Accueil</a></div>
et la css
.menu1 {
background:url('menu1.png');
width: largeur image;
height:hauteur image;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Hmm, voila ce que cela donne:
https://www.pixenli.com/image1298546572080023200.html
Sa ne donne pas vraiment l'effet escompté ^^
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;
}
<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 :/
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
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 ;)
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.
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;
}
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
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
