bobolito Posté 23 Février 2005 Posté 23 Février 2005 Bonjour est ce qu'il est possible sur des listes d'avoir un display:inline en même temps qu'utiliser la propriété list-style-image pour définir des puces ? (en gros de faire un menu horizontal net et efficace avec des puces) merci
tictact Posté 23 Février 2005 Posté 23 Février 2005 (modifié) est-ce que c'est comme ça ? et tu bricoles dans l'autre sens . Modifié 23 Février 2005 par tictact
bobolito Posté 24 Février 2005 Auteur Posté 24 Février 2005 bin justement, ce qui me gène c'est de bricoler dans un sens alors qu'il n'y a pas du tout à bricoler dans l'autre. j'avais fait avec background image mais je me demandais s'il n'y avait pas plus propre. enfin, vive le css quoi...
Nissone Posté 24 Février 2005 Posté 24 Février 2005 Oui, c'est possible ... mais tu donnes toi-même la réponse dans ta question !! Qu'est-ce qui te poses problème ? li {display:inline; list-style-type: url(dossier/image.ext)}, par exemple.
bobolito Posté 24 Février 2005 Auteur Posté 24 Février 2005 salut, bin je sais pas comment tu fais chez moi ça donne rien...
Nissone Posté 24 Février 2005 Posté 24 Février 2005 Est-ce que tu peux nous copier-coller ton code ou nous donner l'URL de ta page page ? Et aussi (au moins) préciser ce qui ne marche pas : le inline ou la puce image ?
bobolito Posté 24 Février 2005 Auteur Posté 24 Février 2005 Salut voilà le code : <head><style type="text/css">li {display:inline;list-style-image: url(monfichier);}</style></head><body><ul> <li>liste1</li> <li>liste2</li></ul></body> le inline fonctionne, y'a pas de soucis, le problème c'est les puces-images qui n'apparaisent pas. si je met list-style-type les puces n'apparaissent pas non plus. si par contre je ne met pas le display:inline les puces-images apparaissent. Qu'est ce que j'ai oublié ?
Sarc Posté 24 Février 2005 Posté 24 Février 2005 Sur la page que Tictact a donné, il faut prendre la solution background image, et tu mets ton display inline... (voir les exemples) #background li { display:inline; background-image: url(puce.png); background-repeat: no-repeat; background-position: 0% 65%; padding-left: 15px; } Ce code marche, du moins sur firefox, mais il doit marcher aussi sur IE
bobolito Posté 24 Février 2005 Auteur Posté 24 Février 2005 Salut bon bin finalement on en revient un peu au même point, on est obligé de passer par des background-image quoi. css power... merci pour vos réponses
bobolito Posté 24 Février 2005 Auteur Posté 24 Février 2005 le problème c'est qu'il y a une propriété qui est explicitement faite pour mettre des puces images sur des listes et qu'elle n'est pas utilisable... ou alors je n'ai pas su l'utiliser. et background je trouve ça assez laid comme solution. mais ça marche effectivement !
Nissone Posté 24 Février 2005 Posté 24 Février 2005 Si tes puces n'apparaissent plus quand elles sont inline alors qu'elles apparaissent sous forme de block, il se peut que cela soit un problème de padding et de margin. Parce que : 1. ton code est bon puisque cela marche dans un cas 2. on peut utiliser inline et une puce image ensemble. Donc, il s'agit juste d'adapter. Moi, il m'est très souvent arrivé de "perdre" une puce qui était en fait beaucoup plus loin à cause d'un margin. Tu ne peux/veux pas nous montrer ta page ?
Sarc Posté 24 Février 2005 Posté 24 Février 2005 (modifié) En même temps, je trouve qu'une liste à la base, c'est pour être verticale et non horizontale, donc c'est aussi un "abus de langage" de dire qu'on fait une liste horizontale, surtout avec puces ... Mais bon, ça reste un avis edit : Nissone, sur la page exemple que j'ai donné, essaye de mettre un display:inline sur la premiere liste, tu verras que les puces disparaissent... Modifié 24 Février 2005 par sarc
bobolito Posté 24 Février 2005 Auteur Posté 24 Février 2005 Nissone, on peut considérer que le code de ma page c'est ce que j'ai donné un peu avant. J'aimerais juste savoir pourquoi on ne voit pas les images dans ce cas. Sarc, Je ne comprend pas non plus pourquoi on s'évertue à respecter la sémantique des balises HTML si c'est après pour bidouiller avec les css et là par contre ne plus respecter ce pour quoi les propriétés utilisées ont été faites... Une autre question : quid de l'alternative textuelle d'une image utilisée comme puce avec la propriété list-type-image ou background-image ? est ce qu'il y a besoin (pour l'""""accessible"""") de cette alternative et si oui est il possible de la mettre directement dans une ccs ?
Sarc Posté 24 Février 2005 Posté 24 Février 2005 Je ne suis pas certain d'avoir bien compris ta question, mais je dirais comme ça, à vue d'oeil, que tu ne dois rien faire en plus... Les puces n'ont pas un intêret énorme (on va pas décrire une puce dans l'attribut alt), et il n'y à rien à rajouter dans le CSS... Bref, laisse tout comme ça, je pense que c'est ok Si j'ai mal compris ta question, hum, suis désolé
Nissone Posté 24 Février 2005 Posté 24 Février 2005 La balise <li>, sémantiquement, sert à indiquer un élément de la liste. Elle n'induit en elle-même aucune présentation. "Hier, je suis allé au marché et j'ai acheté des pommes, des poires et des raisins" ; il s'agit bel et bien d'une liste et il n'est pas incorrect de la mettre "en ligne". Par contre, les balises (toutes ? je laisse les spécialistes le préciser) ont un style donné par defaut. Celui des listes a été défini "en block". Ce qui ne veut pas dire qu'il est incorrect de les mettre en ligne ; bien au contraire, le style CSS, c'est à ça que ça sert. Pour ce qui est de l'alternative textuelle, il s'agit d'un attribut à la balise <img>. Dans le cas d'une liste où la puce est donnée par le style, il n'y a pas besoin de balise <img> et donc la question du alt ne se pose pas. Pour répondre tout de même à ta question, dans le cas d'une balise <img>, lorsque l'image n'apporte pas une information mais qu'elle est purement décorative, il faut indiquer alt="". Mais la balise alt est nécéssaire, même vide.
Sarc Posté 24 Février 2005 Posté 24 Février 2005 Nissone, je suis d'accord qu'une liste peut se faire horizontalement, quand on met dans une phrase, à la suite, les termes de la liste. Mais dans ce cas là, je pense que l'utilisation de puces ne s'accordent pas sémantiquement ! Quand je fais une liste verticale, j'utilises mes tirets, mes points, mes 1), 2), mais quand j'énumère horizontalement, je n'utilise pas ces items.. Voilà, j'espère que je suis mieux compris ... C'est vrai qu'en relisant, j'avais mal expliqué ce que je voulais dire. Quand on met une liste horizontalement, avec display:inline;, les puces sont enlevées.
bobolito Posté 24 Février 2005 Auteur Posté 24 Février 2005 Ok merci c'est très pertinent tout ça en tout cas...
Xavier Posté 26 Février 2005 Posté 26 Février 2005 J'imagine que tu peux aussi faire flotter ton élément li li {display:list-item; list-style-type:square;float;right;} Les éléments flottants se mettront sur une même ligne, et il y aura les puces (attention aux paddings/margins).
Sarc Posté 26 Février 2005 Posté 26 Février 2005 oui, tu as raison en fait, j'avais oublié cette solution :/
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant