comment masquer les puces dans le menu de navigation et les liens de pied de page mais les montrer pour la liste des éléments
J'ai un menu de navigation, un pied de page et un diaporama qui utilisent le style listé pour lister les liens et les images. J'ai le css list-style:none; défini pour masquer les puces à côté des liens et des images dans le nav et le pied de page, mais je veux montrer les puces pour le texte normal de la liste.
Comment puis-je faire cela?
6 réponses
L'exemple ci-dessous explique comment supprimer des puces en utilisant une classe de style css. Vous pouvez utiliser , similaire à la classe css, par identifiant (#id), par balise parent, etc. De la même manière que vous pouvez utiliser pour définir un css pour supprimer des puces du pied de page.
J'ai utilisé ce site comme un point de départ.
<html>
<head>
<style type="text/css">
div.ui-menu li {
list-style:none;
background-image:none;
background-repeat:none;
background-position:0;
}
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
li
{
background-image:url(sqpurple.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
</style>
</head>
<body>
<div class="ui-menu">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</div>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Vous devez définir une classe pour les balles que vous souhaitez masquer. Pour des exemples
.no-bullets {
list-style-type: none;
}
Ensuite, appliquez-le à la liste que vous voulez puces cachées:
<ul class="no-bullets">
Toutes les autres listes (sans classe spécifique) afficheront les bulltets comme d'habitude.
Vous pouvez styliser les éléments li différemment en fonction de leurs class, de leurs id ou de leurs éléments ancêtres:
li { /* styles all li elements*/
list-style-type: none;
}
#ParentListID li { /* styles the li elements that have an ancestor element
of id="ParentListID" */
list-style-type: bullet;
}
li.className { /* styles li elements of class="className" */
list-style-type: bullet;
}
Ou, pour utiliser les éléments ancêtres:
#navigationContainerID li { /* specifically styles the li elements with an ancestor of
id="navigationContainerID" */
list-style-type: none;
}
li { /* then styles all other li elements that don't have that ancestor element */
list-style-type: bullet;
}
Disons que vous utilisez cette disposition HTML5:
<html>
<body>
<header>
<nav><ul>...</ul></nav>
</header>
<article>
<ul>...</ul>
</article>
<footer>
<ul>...</ul>
</footer>
</body>
</html>
Vous pourriez dire dans votre CSS:
header ul, footer ul, nav ul { list-style-type: none; }
Si vous utilisez HTML 4, attribuez des ID à vos DIVs (au lieu d'utiliser les nouveaux éléments fancy-pants) et remplacez ceci par:
#header ul, #footer ul, #nav ul { list-style-type: none; }
Si vous utilisez une feuille de style de réinitialisation CSS (comme celle D'Eric Meyer), vous devrez en fait restituer le style de liste, car la réinitialisation supprime le style de liste de toutes les listes.
#content ul { list-style-type: disc; margin-left: 1.5em; }
J'ai combiné une partie de la réponse de Flavio à cette petite solution .
.hidden-ul-bullets li {
list-style: none;
}
.hidden-ul-bullets ul {
margin-left: 0.25em; // for my purpose, a little indentation is wished
}
La décision concernant les puces est prise au niveau d'un élément englobant, typiquement un div. L'inconvénient (ou todo) de ma solution est que la suppression de liststyle s'applique également aux listes ordonnées.
Vous pouvez également définir une classe pour les balles que vous voulez afficher, donc dans le CSS:
ul {list-style:none; list-style-type:none; list-style-image:none;}
Et dans le HTML, vous définissez simplement les listes à afficher:
<ul style="list-style:disc;">
Ou vous définissez alternativement une classe CSS:
.show-list {list-style:disc;}
, Puis l'appliquer à la liste que vous souhaitez afficher:
<ul class="show-list">
Toutes les autres listes ne montreront pas les puces...