Remplacement Liste balles avec des images en utilisant le CSS, Tech pour luddites
par Elizabeth Kricfalusi, Tech pour luddites
C'est ce que une norme ressemble liste à puces sur une page web:
- J'écris un article long liste 1 afin que vous puissiez voir ce qui se passe lorsque le texte enveloppe sur plusieurs lignes
- Liste 2 article
- Liste 3 article
Le code HTML pour créer cette liste ressemble à ce qui suit. le
- signifie « liste non ordonnée » et
- signifie « élément de la liste. » (Si vous voulez utiliser des numéros au lieu de balles, vous pouvez utiliser
- , ou « liste ordonnée ».)
- J'écris un article long liste 1 afin que vous puissiez voir ce qui se passe lorsque le texte enveloppe sur plusieurs lignes
- Liste 2 article
- Liste 3 article
- J'écris un article long liste 1 afin que vous puissiez voir ce qui se passe lorsque le texte enveloppe sur plusieurs lignes
- Liste 2 article
- Liste 3 article
- J'écris un article long liste 1 afin que vous puissiez voir ce qui se passe lorsque le texte enveloppe sur plusieurs lignes
- Liste 2 article
- Liste 3 article
- J'écris un article long liste 1 afin que vous puissiez voir ce qui se passe lorsque le texte enveloppe sur plusieurs lignes
- Liste 2 article
- Liste 3 article
- J'écris un article long liste 1 afin que vous puissiez voir ce qui se passe lorsque le texte enveloppe sur plusieurs lignes ainsi.
- Liste 2 article
- Liste 3 article
- étiquette de sorte que vous pouvez utiliser d'autres attributs pour ajuster le positionnement exactement comme vous le voulez.
Ainsi, le CSS serait maintenant:
fond li.leaf: url ( '/ images / leaf_icon.jpg) no-repeat gauche en haut;
>et le code HTML serait:
- J'écris un article long liste 1 afin que vous puissiez voir ce qui se passe lorsque le texte enveloppe sur plusieurs lignes
- Liste 2 article
- Liste 3 article
La liste ressemblera alors à ceci:
- J'écris un article long liste 1 afin que vous puissiez voir ce qui se passe lorsque le texte enveloppe sur plusieurs lignes ainsi.
- Liste 2 article
- Liste 3 article
Maintenant, de toute évidence, nous avons encore besoin de faire un peu plus de travail. L'image de la balle est coupée sur le fond que nous devons définir une valeur de hauteur de l'élément de liste qui est au moins aussi grande que la hauteur de l'image. Nous avons également besoin d'espace entre l'image et le texte, que nous fixons à l'aide padding-left. J'utilise aussi une padding-top pour aligner le texte verticalement mieux.
Je ne peux pas vous donner des valeurs exactes car il dépendra d'un certain nombre de variables, y compris la taille de la balle, combien vous voulez l'espacement, la taille de la police, et ainsi de suite. Mais voici le changement que je l'ai fait à la CSS et la sortie résultante.
fond li.leaf: url ( '/ images / leaf_icon.jpg) no-repeat gauche en haut;
hauteur: 54px;
padding-left: 44px;
padding-top: 3px;
>- J'écris un article long liste 1 afin que vous puissiez voir ce qui se passe lorsque le texte enveloppe sur plusieurs lignes ainsi.
- Liste 2 article
- Liste 3 article
Pour des images plus petites Bullet
Les travaux ci-dessus très bien si votre image est plus grande qu'une balle standard. Si elle est plus petite, vous pourriez vous retrouver avec quelque chose qui ressemble à ceci:
- J'écris un article long liste 1 afin que vous puissiez voir ce qui se passe lorsque le texte enveloppe sur plusieurs lignes ainsi.
- Liste 2 article
- Liste 3 article
Vous pouvez voir que le texte d'une balle se jette dans la ligne suivante. Maintenant, vous pouvez corriger cela en spécifiant une valeur de plus grande hauteur à nouveau, mais qui paraître étrange pour une petite balle, par exemple
- J'écris un article long liste 1 afin que vous puissiez voir ce qui se passe lorsque le texte enveloppe sur plusieurs lignes ainsi.
- Liste 2 article
- Liste 3 article
Dans ce cas, vous voulez ajouter un attribut d'affichage et d'ajuster le positionnement haut dans l'image d'arrière-plan (remplacer « top » avec une dimension réelle). Ainsi, le CSS va maintenant ressembler à ceci:
fond li.red_square: url ( '/ images / rouge carré 4 × 4.jpg') non-répétition gauche 9px;
padding-left: 12px;
bloc de visualisation;
>Et la sortie sera:
- J'écris un article long liste 1 afin que vous puissiez voir ce qui se passe lorsque le texte enveloppe sur plusieurs lignes ainsi.
- Liste 2 article
- Liste 3 article
Encore une fois, jouer avec les valeurs jusqu'à ce qu'il regarde la façon dont vous le voulez. Et notez que vous pouvez également repositionner des images plus grandes de balles et si vous ne l'aimez pas la façon dont il est l'alignement du texte.
Note: Merci au lecteur Sibley qui a partagé la pointe au sujet ayant besoin d'un: attribut pour les petites balles « affichage bloc ».
Types de mélange de balles dans la liste même
Enfin, en appliquant des classes à la - étiquettes au lieu de la
- tag, vous pouvez mélanger et assortir les types de balles et des images dans la même liste.
- Liste élément: disque balle
- Liste item: balle carrée
- Liste élément: bullet grec inférieur
- Liste item: Image feuille balle
- Liste item: image carrée rouge balle
- Liste élément: disque balle
- Liste item: balle carrée
- Liste élément: bullet grec inférieur
- Liste item: Image feuille balle
- Liste item: image carrée rouge balle
Donc, avec ce code HTML:
se transforme en ce (avec quelques réglages appropriés aux définitions de classes individuelles CSS):
Vous pouvez changer le style en changeant la définition
- dans votre feuille de style CSS.
ul list-style-type: inférieur grec;
>ul.lower_greek list-style-type: inférieur grec;
>Ensuite, vous souhaitez ajouter cette classe dans la
- balise dans le code HTML comme suit:
Voici ce que la liste ressemble maintenant.
Maintenant, pour changer la balle à une image, vous pouvez ajouter un attribut appelé list-style-image à votre définition CSS. Pour cet exemple, j'utilise une image de feuille qui est 24 x 38 pixels. Le code CSS serait maintenant:
ul.leaf list-style-image: url ( '/ images / leaf_icon.jpg');
>et le code HTML serait:
Voici ce que la liste ressemble sur la page web:
Maintenant, vous pouvez voir le problème avec cette approche est que la balle n'est pas positionné très bien par rapport au texte. En effet, lorsque vous ajoutez l'attribut list-style-image à la
- tag, il utilise le même positionnement et l'espacement entre la balle et le texte, quelle que soit la taille de l'image. Donc, cela pourrait bien fonctionner si votre image est de la même taille qu'une balle standard, mais pas si bien si elle est beaucoup plus grand ou plus petit.
Une autre option est d'éliminer complètement la balle standard en utilisant la
- tag puis ajouter une image d'arrière-plan dans la