| ||||||||
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é | ||||||||
| ||||||||
![]() ![]() | Salut
Avec un code et surtout un visu c'est plus sympa ....Bon, ta solution passera par déjà en css par: ul { 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.. | |||||||
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. 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 | |||||||
![]() ![]() | 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. | |||||||
Petit astucien |
Pas de problème, j'utilise une feuille CSS. Modifié par D3542 le 28/02/2013 19:00 | |||||||
![]() ![]() | D3542 a écrit :
| |||||||
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 | |||||||
![]() ![]() | Alors, c'est résolu? On peut voir? | |||||||
![]() ![]() | elle a écrit : Toujours aussi curieuse !! | |||||||
![]() ![]() | Non, intéressée... | |||||||
![]() ![]() | elle a écrit : Kif-kif !! | |||||||
Petit astucien |
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.
Merci encore à vous ! Je met en résolu mais je pense qu'il y aura des commentaires Faudrait que je pense à aller manger.
| |||||||
Publicité | ||||||||
| ||||||||
|
Les bons plans du moment PC Astuces | Tous les Bons Plans | ||||||||||||||||||
|