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
Utilisateur anonyme - 25 févr. 2011 à 16:59
A voir également:
- Menu horizontale, text pas sur image
- Menu déroulant excel - Guide
- Image iso - Guide
- Canva text to image - Guide
- Menu démarrer windows 11 - Guide
- Acronis true image - Télécharger - Sauvegarde
13 réponses
Utilisateur anonyme
24 févr. 2011 à 11:23
24 févr. 2011 à 11:23
Bonjour,
Où voulez vous que s'affiche le texte, sur l'image, en dessous ?
Cordialement
Où voulez vous que s'affiche le texte, sur l'image, en dessous ?
Cordialement
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
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 :
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
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?
Utilisateur anonyme
24 févr. 2011 à 11:45
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;
}
<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
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
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é ^^
https://www.pixenli.com/image1298546572080023200.html
Sa ne donne pas vraiment l'effet escompté ^^
Utilisateur anonyme
24 févr. 2011 à 13:28
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;
}
<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;
}
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
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 :/
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 :/
Utilisateur anonyme
24 févr. 2011 à 14:39
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
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
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
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 ;)
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 ;)
Utilisateur anonyme
24 févr. 2011 à 15:16
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.
Je essayer de vous coder ça.
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
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;
}
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;
}
Utilisateur anonyme
24 févr. 2011 à 16:49
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
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
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
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.
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.
