Bonjour,
J'ai un petit souci avec un menu ul dont les liens ne fonctionnent pas. Il n'y a pas de texte dans les liens, il y a seulement une image de background. est-ce que cela vient de là ?
HTML
<ul id="chap">
<li class="chap" id="new"><a href="#"></a></li>
<li class="chap" id="por"><a href="portrait.htm"></a></li>
<li class="chap" id="tra"><a href="travel.htm"></a></li>
<li class="chap" id="pri"><a href="print.htm"></a></li>
<li class="chap" id="sti"><a href="still.htm"></a></li>
<li class="chap" id="ful"><a href="full.htm"></a></li>
<li class="chap" id="adv"><a href="advertising.htm"></a></li>
</ul>CSS
ul#chap{
position: absolute;
left: 10px;
top: 20px;
width: 700px;
height: 20px;
display: inline-block;
}
li.chap{
list-style-type : none;
cursor: pointer;
float: left;
background: url(../img/inter/sprite-portfolio.png) no-repeat;
}
li#new{
width: 45px;
height: 15px;
background-position: 0 -15px;
}
li#new:hover{
background-position: 0 0;
}
li#por{
width: 77px;
height: 15px;
background-position: -45px -15px;
}
li#por:hover{
background-position: -45px 0;
}
li#tra{
width: 142px;
height: 15px;
background-position: -122px -15px;
}
li#tra:hover{
background-position: -122px 0;
}
li#pri{
width: 56px;
height: 15px;
background-position: -264px -15px;
}
li#pri:hover{
background-position: -264px 0;
}
li#sti{
width: 82px;
height: 15px;
background-position: -320px -15px;
}
li#sti:hover{
background-position: -320px 0;
}
li#ful{
width: 88px;
height: 15px;
background-position: -402px -15px;
}
li#ful:hover{
background-position: -402px 0;
}
li#adv{
width: 100px;
height: 15px;
background-position: -490px -15px;
}
li#adv:hover{
background-position: -490px 0;
}Merci de votre aide
Salut hatfab,
cela viens très probablement du fait que les liens sont vide, essaye en insérant un espace insécable entre tes balises <a> :
Ciao
Merci, j'ai essayé ça ne fonctionne pas.
Bonjour,
pourquoi n'inverses tu pas tes li avec tes a??
Je m'explique :
<ul id="chap">
<a href="#"><li class="chap" id="new"></li></a>
<a href="portrait.htm"><li class="chap" id="por"></li></a>
<a href="travel.htm"><li class="chap" id="tra"></li></a>
<a href="print.htm"><li class="chap" id="pri"></li></a>
<a href="still.htm"><li class="chap" id="sti"></li></a>
<a href="full.htm"><li class="chap" id="ful"></li></a>
<a href="advertising.htm"><li class="chap" id="adv"></li></a>
</ul>de cette façon ta li devient le lien .
Et non, ça ne fonctionne pas non plus !
Pardon, c'est moi qui avait mal fait l'inversion ! Ça marche Merci !
Salut,
pour moi c'est pas propre du tout, la suite logique c'est ul > li > a
et j'insiste sur le fait que c'est parce qu'aucun contenu n'est présent dans les <a>
Essaye en faisant ça : ul > li > a > img (celle de ton background)
Bonne journée
Je suis d'accord avec Orijin sur la façon de faire c'est sur.
J'avais donné cette solution pour "faciliter" la chose.
ce que t'explique Orijin est très simple. sans contenu dans ton lien forcément ça n'affiche rien.
si tu met une image a l’intérieur ça prendra en compte la même choses que ma solution mais en plus propre
Oui, mais le problème c'est que mon image est un sprite qui doit prendre une position différente au survol de la souris. On ne peut faire ça qu'avec une image de background si je ne m'abuse…
Yes ! Génial, merci ! J'ai appliqué ta technique à mon cas, ça marche parfaitement et W3C est content !
En plus tu m'as fait découvrir JSFIDDLE, c'est magique pour travailler sur des bouts de code.
Bravo et merci pour cette solution !