> 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
Kit de 16 Go (2 x 8 Go) de mémoire DDR4 Corsair Vengeance LPX 3200 MHz à 39,99 €
39,99 € 69,99 € -43% @Cdiscount

Cdiscount fait une belle promotion sur le kit de 16 Go (2x8 Go) de mémoire DDR4 Corsair Vengeance LPX 3200 MHz CL16 qui passe à 39,99 € au lieu de 59,99 €.


Voir le bon plan
Coupe-bordures sans fil Bosch EasyGrassCut 18V-230 (23 cm, batterie 18V 2Ah) à 74,99 €
74,99 € 104 € -28% @Amazon

Amazon fait une promotion sur le coupe-bordures sans fil Bosch EasyGrassCut 18V-230 avec 1 batterie 2 Ah qui passe à 74,99 € grâce à un coupon à activer sur la page du produit. On le trouve ailleurs à partir de 104 €.


Voir le bon plan
Clavier mécanique Roccat Vulcan 121 (RGB, rétroéclairé, switch Linear) à 78,77 €
78,77 € 120 € -34% @Amazon

Amazon fait une promotion sur le clavier mécanique Roccat Vulcan 121 (RGB, rétroéclairé) qui passe à 78,77 € au lieu de 120 €. 


Voir le bon plan
Carte mémoire Samsung 256 Go MicroSDXC Evo Select U3 (130 Mo/s) à 23,67 € livrée
23,67 € 32 € -26% @Amazon Allemagne

Amazon Allemagne fait une promotion sur la carte mémoire Samsung 256 Go MicroSDXC Evo Select U3 qui passe à 19,15 € (avec la TVA ajustée). Comptez 4,52 € pour la livraison en France soit un total de 23,67 € livrée

Une très bonne affaire pour cette carte que l'on trouve ailleurs à partir de 32 € et qui offre des vitesses de 130 Mo/s en lecture et 110 Mo/s en écriture.  Elle est idéale pour les téléphones, caméras et appareils photo 4K. Elle est étanche, anti-choc et résiste aux rayons X et aux champs magnétiques. Elle est garantie 10 ans.


Voir le bon plan
Pack de 4 ampoules Philips Hue White Ambiance bluetooth à 50,52 € livré
50,52 € 75 € -33% @Amazon Allemagne

Amazon Allemagne fait une belle promotion sur le lot de 4 ampoules Philips Hue White Ambiance bluetooth qui passe à 45,37 €. Comptez 5,15 € pour la livraison en France soit un total de 50,52 € livré au lieu de 75 €.  Vous pourrez contrôler et programmer l'éclairage des lampes avec votre smartphone sous Android ou iOS (compatible avec le HomeKit d'Apple) ainsi que via les assistants vocaux (Alexa, OK Google). Faites varier l’intensité de votre éclairage et personnalisez votre ambiance avec les nuances de blancs et profitez de 4 scénarios lumineux pré-programmés : stimulation, concentration, lecture et détente.


Voir le bon plan
Kit de 16 Go (2x8 Go) de mémoire DDR4 Corsair Vengeance RGB RS 3600 MHz à 51,99 €
51,99 € 75 € -31% @Amazon

Amazon fait une promotion sur le kit de 16 Go (2x8 Go) de mémoire DDR4 Corsair Vengeance RGB RS 3600 MT/s CL18 à 51,99 € alors qu'on le trouve ailleurs autour de 75 €. Vous pourrez personnaliser la palette de couleurs directement depuis le logiciel Corsair iCU.


Voir le bon plan

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