28173 sujets

CSS et mise en forme, CSS3

Menu horizontal avec puces

Bonjour

J ai un problème avec css, je cherche a faire un menu horizontal avec des puces carrées. Le menu est bien horizontal mais les puces n' apparaissent pas, voila le code html et css: 

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>


#navlist li
{
display: inline;
list-style-type: square;
padding-right: 20px;
}



J ai regardé les topics existants et listamatic mais je dois louper quelque chose . Quelqu un a une idée?

merci
Une petite recherche sur la propriété CSS display aurait pu donner ceci :
http://wiki.media-box.net/documentation/css/display
Où l'on voit que les items de liste ont un affichage de type list-item. Si on passe cet affichage à inline, on n'a plus d'affichage de type list-item, et les puces ne marchent plus. CQFD.

Deux solutions :
- utiliser les flottants pour avoir des items de liste côte-à-côte, plutôt que l'affichage de type inline ;
- utiliser l'affichage de type inline, et des images de fond (en no-repeat, avec un padding pour le texte) pour créer les puces.
Smiley rolleyes Merci , je me suis buté surle fait que ca ne marchait pas, je ne me suis pas demandé si c' était censé marcher... jaimalagijaimalagijaimalagi
J'ai le même problème, avec des puces en losanges Smiley ravi : Comment les placer sur une barre de lien horizontale ?
J'ai essayé la méthode avec une image de fond. Ca marche sous internet explorer, mais pas sous mozilla : les puces n'apparaissent pas.
Voici mon code :
ul {
height: 1.1em;
width: 100%; 
line-height: 20px;
}
li {
list-style-type:none;.
background-image: url(images/puce_n.gif);
background-repeat: no-repeat;
background-position: 0% 65%;
padding-left: 1em;
display:inline;
}

.menu a {
font: 0.9em ;
margin: 0 0.5em;
text-decoration: none;
color: #545154;
}



<ul class="menu">
<li><a id="accueil" href="link1.html">Accueil/l'Atelier</a></li>
<li><a id="plan" href="link2.html ">Plan du site</a></li>
<li><a id="collages" href="link3.html ">Collages</a></li>
<li><a id="carnets" href="link1.html">Carnets de recettes</a></li>
<li><a id="objets" href="link2.html ">Objets</a></li>
<li><a id="expos" href="link3.html ">Expos</a></li>
<li><a id="commandes" href="link2.html ">Commandes</a></li>
<li><a id="contac" href="link3.html ">Contact</a></li>
</ul>

Y a-t-il une solution ?
Modifié par Marrine (19 Dec 2006 - 20:00)
Modérateur
Bonjour,

Pour conserver les puces de bases , il faut effectievment se pencher sur le display.

Avec des raisons differentes a celle de mpop , mais qui vont mener au même resultat.

1)en mettant en 
float:left;/*ou right */
les li , les listes gardent leur proprietés d'element de type block et sont en mesure d'affiché leur puces , on peut les mettre en 
list-style-position:inside;
pour contenir la puce ... ,
autre avantage , c'est que disposées en flottantes , ces listes , seront en mesure d'acceillir un lien avec un affichage passé en type block.

Juste ce qu'il nous faut pour integrer IE au soucis.

2)Je peut alors mettre mes <a> en 
display:list-item;
sans qu'il ne reviennent a la ligne (cas si l'on met li en display:inline;) , le display:list-item , confere affichage de type block.

3)resultat , dans IE ma puce apparait bien , et dans firefoxe , j'ai la puce du li et celle du lien !

4) j'efface la puce de li pour ne pas en avoir 2 dans Firefox.

Demo avec le code du premier post:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html 

xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head><title>XHTML 1.0 Strict</title><style type='text/css'>
#navlist li
{
	float:left;/* IE n'affiche plus les puces , penser a les effacer */
	list-style-type:none;
}
#navlist li a
{
	display:list-item;/* report des puces dans les contenu de li , IE les affichera */
	list-style-position:inside;
	list-style-type: square;
	padding-right: 20px;/* ah le padding devient effectif */
}
</style>
</head><body>
<div id="navcontainer">
<ul id="navlist">
	<li id="active"><a href="#" id="current">Item one</a></li>
	<li><a href="#">Item two</a></li>
	<li><a href="#">Item three</a></li>
	<li><a href="#">Item four</a></li>
	<li><a href="#">Item five</a></li>
</ul>
</div>
</body></html>


Je pense repondre aux 2 questions la ? Smiley smile

++
Modifié par gcyrillus (20 Dec 2006 - 20:58)
Voici ce que je propose et qui marche, en fait je reprends très largement ce que le très compétent gcyrillus a conseillé :

ul {
	width : 100%;
	
}

li {
	
	list-style-position:inside;/* mettre les puces à l'intérieur pour qu'elles soient centrées avec le contenu de li*/
	background-image: url(bouton.png); /*image de fond de chaque élément de liste*/
	height: 33px;
	width : 107px;
	padding-top: 6px;
	float : left;/* pour obtenir une liste horizontale et qui reste de type bloc (display : inline fait perdre cette caractéristique) sur IE, float : left empêche l'affichage de la puce, c'est pour cela que les liens du menu se voient attribués une puce, cf la suite*/
	text-align : center;
	list-style-type:none; /*les puces sont cachées pour que firefox n'affiche pas ces puces et celles prévues pour le lien compris dans les li*/
	}
	
a {
	display:list-item; /*passe l'élément a en type bloc et permet d'y adjoindre une puce*/
	list-style-type : disc; /* déterminer la puce ou l'image qui servira de puce*/
}

Modifié par manu_css (21 Dec 2006 - 22:43)
Marrine a écrit :
mais pas sous mozilla : les puces n'apparaissent pas.
Voici mon code :

Bonjour Marrine et bienvenue.

Pour résoudre ce problème enlève le point qui se trouve après le point virgule :
li {
list-style-type:none;.

c'est la cause du problème. Un validateur CSS t'aurait certainement signalé une erreur.

Il est par ailleurs plutôt préférable d'ouvrir un nouveau sujet pour présenter son propre problème plutôt que de le faire dans un sujet ouvert par un autre.
Modifié par Alan (21 Dec 2006 - 00:34)
Sujet clos
Aller à