Si vous souhaitez savoir comment supprimer les puces, nous sommes l\u00e0 pour vous aider ! Le style par d\u00e9faut est une ligne pleine* pour la plupart des sites web, avec un peu d’espace entre les lignes. Vous pouvez choisir l’aspect que vous souhaitez lui donner en s\u00e9lectionnant le texte, en acc\u00e9dant \u00e0 votre design ou \u00e0 votre feuille de style et en apportant des modifications. <\/p>\n\n
Avant de poursuivre le guide, je voudrais remercier NaturHandel.dk<\/a> et Virksomhedsoplysninger.dk<\/a>.<\/p>\n\n Il existe de nombreuses fa\u00e7ons de se d\u00e9barrasser de ces petites pointes de fl\u00e8che. De l’utilisation d’une biblioth\u00e8que externe ou d’un plugin pour les remplacer par quelque chose de plus esth\u00e9tique (comme un cercle) \u00e0 l’utilisation d’une propri\u00e9t\u00e9 overflow : hidden dans la feuille de style de votre conteneur, il existe de nombreuses m\u00e9thodes qui fonctionnent tr\u00e8s bien. Voici les meilleures m\u00e9thodes et astuces pour supprimer les puces en css. <\/p>\n\n Utiliser une biblioth\u00e8que ou un plugin<\/strong><\/p>\n\n Si vous souhaitez une alternative plus propre et plus moderne aux petites fl\u00e8ches, vous pouvez utiliser une biblioth\u00e8que ou un plugin qui propose quelque chose qui corresponde \u00e0 vos attentes. En voici quelques-uns que nous vous recommandons : <\/p>\n\n Utilisez le bouclier de d\u00e9bordement<\/strong><\/p>\n\n Vous avez probablement vu des sites web dont le contenu des conteneurs utilise une propri\u00e9t\u00e9 overflow : hidden pour une raison ou une autre. Cette propri\u00e9t\u00e9 permet de faire ressortir le texte (c’est-\u00e0-dire les puces) dans certaines situations. Par exemple, si vous avez d\u00e9j\u00e0 vu une zone \u00e0 onglets dans laquelle les onglets sont repouss\u00e9s hors de l’\u00e9cran, une propri\u00e9t\u00e9 overflow : the hidden est utilis\u00e9e. <\/p>\n\n Un d\u00e9bordement : la propri\u00e9t\u00e9 cach\u00e9e est une m\u00e9thode plus couramment utilis\u00e9e car elle est facile \u00e0 mettre en \u0153uvre. Vous pouvez rechercher en ligne de nombreux tutoriels qui vous expliquent comment utiliser cette m\u00e9thode et l’appliquer \u00e0 vos propres besoins. Certains des tutoriels les plus populaires se trouvent ici et ici. <\/p>\n\n Cette m\u00e9thode doit \u00eatre utilis\u00e9e avec pr\u00e9caution, car elle ne fonctionne qu’avec les \u00e9l\u00e9ments en ligne (c’est-\u00e0-dire le contenu \u00e0 l’int\u00e9rieur d’une balise de paragraphe). Par cons\u00e9quent, si vous utilisez une grande police de caract\u00e8res pour votre texte, cette m\u00e9thode ne fonctionnera pas car elle brisera l’espacement. <\/p>\n\n Par exemple :<\/p>\n\n Avant :<\/p> Apr\u00e8s : <\/p> Utiliser un onglet de code<\/strong><\/p>\n\n La plupart du temps, si vous souhaitez vous d\u00e9barrasser des puces, c’est parce que vous avez plusieurs niveaux de contenu que vous souhaitez s\u00e9parer. Au lieu d’ajouter des tonnes d’espace (ce qui consommerait de l’espace pr\u00e9cieux), essayez d’utiliser un onglet de code. Cela peut fonctionner tr\u00e8s bien si vous n’avez qu’un seul niveau de puces. Veillez simplement \u00e0 ce qu’il soit plac\u00e9 en bas de page, afin que personne ne puisse le voir. <\/p>\n\n Utiliser un onglet CSS<\/strong><\/p>\n\n Il s’agit d’une solution minimale puisque vous ne pouvez rien personnaliser. Cependant, si vous ne voulez pas de cadre suppl\u00e9mentaire et que vous souhaitez utiliser cette m\u00e9thode \u00e0 fond, alors celle-ci est faite pour vous ! De la m\u00eame mani\u00e8re que vous pouvez personnaliser les onglets en g\u00e9n\u00e9ral, tout ce que vous avez \u00e0 faire est de cr\u00e9er votre propre onglet personnalis\u00e9 et de le superposer \u00e0 un autre \u00e9l\u00e9ment. L’astuce consiste \u00e0 placer vos onglets en bas, puis \u00e0 les faire chevaucher par un autre \u00e9l\u00e9ment. Je vous sugg\u00e8re d’espacer davantage vos \u00e9l\u00e9ments afin qu’ils n’interf\u00e8rent pas les uns avec les autres. Cette op\u00e9ration peut \u00eatre r\u00e9alis\u00e9e \u00e0 l’aide d’une m\u00e9thode CSS ou JavaScript. <\/p>\n\n Utiliser un chevauchement d’onglets avec un s\u00e9lecteur de liste<\/strong><\/p>\n\n Il s’agit d’une solution assez simple pour supprimer compl\u00e8tement les puces. Vous devez cr\u00e9er votre \u00e9l\u00e9ment de liste, puis utiliser un autre s\u00e9lecteur qui se superpose \u00e0 lui. De cette mani\u00e8re, vous n’avez pas d’onglets ici, vous n’avez que les puces elles-m\u00eames. Pour obtenir cet effet, assurez-vous que votre \u00e9l\u00e9ment de liste poss\u00e8de une classe qui correspond \u00e0 la classe de puce de votre liste (voir ci-dessous) et d\u00e9finissez un style CSS de \u00ab\u00a0liste-bullet\u00a0\u00bb (\u00e0 la fin du style d’onglet) ou quelque chose de similaire. <\/p>\n\n Par exemple :<\/p>\n\n .tabs ul li { padding:0; } .tabs li.list-bullet { width:150px; } .tabs li a { display:block; text-decoration:none; } .tabs li a:hover { text-decoration:underline; }<\/p>\n\n Mettre en place un cadre liquide<\/strong><\/p>\n\n Si tout le reste \u00e9choue, vous pouvez mettre en place un cadre liquide et masquer les puces \u00e0 l’aide de CSS. Toutefois, cette solution n\u00e9cessiterait le plus de travail, car elle requiert la cr\u00e9ation de votre propre cadre, c’est pourquoi je ne la sugg\u00e8re pas. De plus, comme il existe de nombreux frameworks (tels que Bootstrap ou Foundation) qui proposent des puces par d\u00e9faut, il est plus facile d’utiliser l’un d’entre eux. <\/p>\n\n LA PLUPART DU TEMPS, NOUS UTILISONS LA M\u00c9THODE DU BOUCLIER DE D\u00c9BORDEMENT. SI VOUS N’AVEZ PAS CETTE POSSIBILIT\u00c9, FAITES CE QUE VOUS AVEZ \u00c0 FAIRE. <\/p>\n\n Convertissez vos puces en v\u00e9ritables paragraphes pour une meilleure lisibilit\u00e9.<\/p>\n\n Nous savons que cela semble un peu \u00e9trange au premier abord, mais c’est une excellente solution car elle r\u00e9duit le d\u00e9filement n\u00e9cessaire \u00e0 la lecture de votre contenu. Lorsque vous convertissez vos puces en v\u00e9ritables paragraphes (voir ci-dessous), le texte est plus facile \u00e0 assimiler et plus lisible. <\/p>\n\n Remplacer une liste ordonn\u00e9e par des paragraphes imbriqu\u00e9s<\/strong><\/p>\n\n Les listes ordonn\u00e9es ont un style pr\u00e9d\u00e9fini. Si vous souhaitez que les puces soient plus attrayantes visuellement, vous pouvez les transformer en paragraphes imbriqu\u00e9s en cr\u00e9ant plusieurs paragraphes et en mettant en retrait chaque point \u00e0 l’int\u00e9rieur du paragraphe. <\/p>\n\n Remplacer les listes num\u00e9rot\u00e9es par des paragraphes imbriqu\u00e9s<\/strong><\/p>\n\n Une fa\u00e7on de supprimer les puces de votre CSS est de convertir les listes num\u00e9rot\u00e9es en paragraphes imbriqu\u00e9s.<\/p>\n\n Par exemple, vous pourriez tourner ceci :<\/p>\n\n -Premi\u00e8re balle<\/p>\n\n -Bullet two<\/p>\n\n dans ce domaine :<\/p>\n\n -Premi\u00e8re balle – Deuxi\u00e8me balle<\/p>\n\n<\/ol><\/p>\n\n