> 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 !!

Publicité
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.

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
375,99 €TV 50 pouces Thomson 50UZ6420 LED 4K UHD, HDR10, Android 9 à 375,99 €
Valable jusqu'au 25 Septembre

Cdiscount Fait une promotion sur le téléviseur 50 pouces (126 cm) Thomson 50UZ6420 TV LED 4K UHD qui passe à 375,99 €. Cette TV offre une résolution 4K Ultra HD de 3840x2160, possède le WiFi, est compatible avec le HEVC (H.265), Android 9 (Youtube, Netflix, Canal, Disney+, Amazon Prime, ...), HDR10, DLNA, Tuner TNT HD, ... Elle possède 3 ports HDMI et 2 ports USB pour lire vos contenus multimédias.


> Voir l'offre
123,99 €SSD externe NVMe Crucial X8 1 To à 123,99 €
Valable jusqu'au 24 Septembre

Amazon fait une promotion sur le SSD externe NVMe Crucial X8 1 To qui passe à 123,99 € alors qu'on le trouve ailleurs à partir de 150 €. Il offre des vitesses de lecture jusqu'à 1050 Mo/s et résiste aux chutes jusqu'à 2 mètres, aux chocs et aux températures extrêmes. Il est fourni avec des connecteurs USB C-3.2 et USB-A (USB classique).


> Voir l'offre
329 €Smartphone Google Pixel 4A (5.8' FHD+, 8 coeurs, 6 Go RAM, 128 Go) à 329 €
Valable jusqu'au 23 Septembre

Boulanger fait une promotion sur l'excellent smartphone Google Pixel 4A qui passe à 329 €. On le trouve ailleurs à 349 €. Ce smartphone possède un écran OLD FHD+ de 5.8 pouces, un processeur Snapdragon 730G octocoeurs, 6 Go de RAM et un espace de stockage de 128 Go. Les gros points forts de ce smartphone sont la qualité exceptionnelles des photos et qu'il bénéficie des mises à jour de sécurité et d'Android pendant au moins 3 ans. Autonomie de 24 heures.


> Voir l'offre

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