Version complète: sur le forum Webmaster Hub : LI ou LI y est pas ?
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
xpatval
dimanche 27 mars 2005 à 20:48
Bonjour,soir,

Je me pose un problème, que je vous soumets, n'arrivant pas à quelque chose de concluant (peut-être n'est pas faisable ?)

Mon menu, vertical, est défini avec des listes à pupuce.
Je souhaite y associer une toute petite image, lors des passages de souris.

Voici le css:
CODE
#linkList ul {
    margin: 0px;
    padding: 0px;
    }
#linkList li {
    line-height: 2.5ex;
    list-style-type: none;
    display: block;
    padding-top: 5px;
    margin-bottom: 5px;
    }
#linkList li a:link {
    background: transparent url(commun/pause1.gif) no-repeat top right;
    color: #000000;
    }
#linkList li a:hover {
    background: transparent url(commun/pause2.gif) no-repeat top right;
    color: #000000;
    }
#linkList li a:visited {
    background: transparent url(commun/pause3.gif) no-repeat top right;
    color: #000000;
    text-decoration:underline;
    }
#linkList li a:active {
    background: transparent url(commun/pause.gif) no-repeat top right;
    color: #000000;
    }


Le principe est d'afficher un rond (par exemple), lorsque le lien est inactif, puis un carré lors du survol, et un triangle lorsqu'il est actif.
Malheureusement, l'image ne prend que la taille de la chaîne de caractère (le nom du lien), et non sa taille réelle (bcp plus grande).

Auriez-vous une solution ?

Merci,

xpatval
Boudha
dimanche 27 mars 2005 à 22:39
Essayes de cette manière :

CODE
#linkList li a:hover {
list-style-image: url('image.jpg');
color: #000000;
xpatval
dimanche 27 mars 2005 à 22:57
Non, car je ne souhaite pas mettre une image en puce, mais bien appliquer une image de "fond" , sur toute la longueur de la chaîne de caractère du lien et quelques pixels en plus (disons une quinzaine) .
Or, le résultat auquel j'arrive, c'est l'application de cette image, mais seulement sur la longueur du lien, et pas plus.

Merci quand même.

xpatval
lupucide
dimanche 27 mars 2005 à 23:39
Je crois que IE ignore les :hover sur autre chose que les liens, à vérifier.
Striker
dimanche 27 mars 2005 à 23:40
Pour l'image de fond voici un tuto qui devrais t'aider.
http://mammouthland.free.fr/cours/css/cours3.php

Il y en a surement d'autres surement mieu fait mais celui ci devrais te donner une bonne piste à exploiter wink.gif
xpatval
lundi 28 mars 2005 à 14:58
CITATION
Je crois que IE ignore les :hover sur autre chose que les liens, à vérifier.

Je fais bien mon :hover sur un "a", contenu lui-même dans un <li>

En fait, là où je bloque, c'est l'attribution d'une longueur fixe à <li>. Je ne pense pas que cela soit permis.

xpatval

ps: Merci pour le lien... wink.gif
Loupilo
lundi 28 mars 2005 à 16:03
En fait, tu donnes des propriétés à l'attribut a : a au survol, a activé, a visité.
Et l'attribut a, ce n'est que le texte de ton lien, donc c'est normal que l'effet ne s'applique qu'à lui.

Il faudrait que, comme en xHtml 2, li soit le lien, et que tu fasses li:hover, li:active, ...
Seulement, ce n'est pas encore possible.

La solution de contournement est de, si par exemple ton 'li', ton item, fait 200px de large, mettre un display:block;width:198px; à 'a', le lien.
L'image de fond s'appliquera donc bien au lien, mais celui-ci prendra la place du 'li'.

a+
Loupilo.
xpatval
mardi 29 mars 2005 à 09:22
Merci de l'info concernant Xhtml2 que je ne connaissais pas.

Comme la solution n'existe pas telle que je la souhaite, j'ai opté pour un jeu de puce différent.
En fait, je souhaitais aligné, avec les <li> ces puces, ou plutôt ces images de puces, à droite, sur un même plan vertical (l'inverse de la liste à puce, en fait).

Tant pis,

Et merci,

xpatval
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.