> Tous les forums > Forum des Webmasters
 Listes - Espace entre la puce (image) et le texteSujet résolu
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
D3542
  Posté le 28/02/2013 @ 10:29 
Aller en bas de la page 
Petit astucien

Bonjour,

En HTML 5, dans une liste toute simple, ul/li, j'ai remplacé la puce dans ul par une image icône de 20px x 20px que j'ai recadrée en hauteur 20px x largeur 14px.

Dans les recherches j'ai trouvé quelques astuces mais pas évidentes.

Est-ce possible de dimininuer l'espace entre le bord image et le texte ? Il me semble qu'avec les puces ce n'est déjà pas possible. Désolé, je ne peux pas mettre d'exemples.

Merci de vos réponses.

Publicité
Dreamer
 Posté le 28/02/2013 à 18:21 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Salut

Avec un code et surtout un visu c'est plus sympa ....Bon, ta solution passera par déjà en css par:

ul {list-style-type : none; }

Qui va supprimer tes puces...

Ensuite si tu as la ma même image devant tes li, tu peux faire ceci (je décompose)

li{background-image: url(monimage.gif) no-repeat; background-position: 0 10px;padding-left: 5px}

Donc j'ai mon image, une seule fois, positionnée à la hauteur du texte décalée de 5px ...

Par contre si tu as plusieurs images, tu devras utiliser une class pour chaque image

li .image_1, li .image_2, etc..

D3542
 Posté le 28/02/2013 à 18:35 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Bonjour Dreamer,

Quelle coïncidence, à voir l'heure de ta réponse, je viens juste de me connecter d'un autre endroit.

Merci de ta réponse.

J'avais vu cette astuce mais j'ai pataugé malgré mes tests et je pourrai tester que demain a-midi.
Je te fais confiance car tes réponses sont toujours très claires ainsi que le groupe de spécialistes {#}

L'image est un ? uniquement devant le 1er li.

J'ai pourtant recadré l'image en largeur car une liste "normale" il y a toujours un espace avec la puce et je suppose que cet espace doit rester inchangeable. Par rapport à une puce, l'espace avec l'image est plus grand, pas de beaucoup mais si je peux resserrer un peu ce sera mieux.

Bonne soirée !



Modifié par D3542 le 28/02/2013 18:47
Dreamer
 Posté le 28/02/2013 à 18:44 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Les ul n'ont pas d'image, seules les li peuvent en avoir une !!

Comme je le disais (mauvaise explication de ma part), si tu utilises une image en background et non une puce, tu peux la positionner comme voulu, c'est l'avantage.

D3542
 Posté le 28/02/2013 à 18:51 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

J'ai modifié ma réponse entre temps. Effectivement, pas les ul mais les li.

Pas de problème, j'utilise une feuille CSS.



Modifié par D3542 le 28/02/2013 19:00
elle
 Posté le 28/02/2013 à 18:57 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

D3542 a écrit :

Une autre question stp, peut-on mettre une class à une balise ul et li ?

Oui.

D3542
 Posté le 28/02/2013 à 19:05 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Bonjour et merci elle,

Heureusement que tu me cites car je me suis aperçu de ma question idiote et j'ai modifié. Il y a des moments comme ça.. enfin je commence à me demander si ce n'est pas permanent



Modifié par D3542 le 28/02/2013 19:06
elle
 Posté le 28/02/2013 à 20:38 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Alors, c'est résolu? On peut voir?

Dreamer
 Posté le 28/02/2013 à 20:56 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

elle a écrit :

Alors, c'est résolu? On peut voir?

Toujours aussi curieuse !!

elle
 Posté le 28/02/2013 à 20:58 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Non, intéressée...

Dreamer
 Posté le 28/02/2013 à 22:44 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

elle a écrit :

Non, intéressée...

Kif-kif !!

D3542
 Posté le 01/03/2013 à 12:47 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Les curieux

Super !

Sans background-position: 0 10px; l'image est centrée en hauteur (pas désagréable à voir) et avec background-position: 0 10px; je n'ai pas réussi à remonter l'image, j'ai essayé plusieurs valeurs.
Dand li j'ai mis un padding-top:1px; et voilà ce que ça donne dans IE 10 (W 7) : faudra que je teste avec FF et Google. IE 8 je l'ai sur un autre PC de tests.

Merci encore à vous !

Je met en résolu mais je pense qu'il y aura des commentaires

Faudrait que je pense à aller manger.

Publicité
Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
Ecran PC 27 pouces KTC H27V13 (VA, Full HD, 100 Hz) à 99,99 €
99,99 € 149 € -33%
@Geekbuying
Hub USB C 5 en 1 UGREEN (HDMI 4K, 1xUSB 3.0, 2xUSB 2.0, 1xUSB C PD 100W) à 14,99 €
14,99 € 25,99 € -42%
@Amazon
NAS Synology DS423+ (4 baies) à 474,95 €
474,95 € 559 € -15%
@Amazon
Ecran PC 27 pouces Lenovo Legion Y27-30 (FHD, IPS, 180 Hz, HP, pied réglable) à 157,60 €
157,60 € 219,99 € -28%
@Amazon
Affiche rétro Ariane 6 en HD à télécharger
Gratuit -1 -28%
@Amazon
Mini PC ACEMAGICIAN AM06 Pro (Ryzen 5 5800U, 32 Go RAM, SSD 512 Go, Windows 11 Pro) à 331,49 €
331,49 € 419 € -21%
@Amazon

Sujets relatifs
Liste : écart entre la puce et le texte
faire un espace entre le cadre et la cellule (tableau)
pb avec espacement entre lignes et listes
Inserer une image au survol d'un texte
popup image dans un texte
Insertion texte dans une image a un endroit précis
espace entre les lignes
Zone visible entre fond d'image et fond de page
pourquoi un espace entre les images ?
retour à la ligne entre image et checkbox
Plus de sujets relatifs à Listes - Espace entre la puce (image) et le texte
 > Tous les forums > Forum Forum des Webmasters