28173 sujets

CSS et mise en forme, CSS3

Voila je n'arrive pas à aligner les puces, j'arrive à les afficher en block en utilisant display:list-item mais pour les aligner avec display:inline, les puces ne s'affichent plus :

Voici mon css :

#nav{font-size:12px;color:#705206;margin-left:20px;padding:0px;}
#nav a{color:#9F5211;text-decoration:none;font-weight:normal;}
#nav ul{margin:0px;padding:0px;}
#nav li{display:inline;}
#nav ul li{margin:0px;padding:10px 0px 0px 10px;list-style-image:url(images/puce_orange.jpg);}


Merci de votre aide.
Modifié par jpp13 (12 Jul 2007 - 10:48)
Salut,

Pour les puces,


<ul>
<li><a>Mot 1</a></li>
<li><a>Mot 2</a></li>
</ul>


je te conseille ceci:


ul {

 margin:0;
padding:0 0 0 0;
}

li {
   list-style-type:none;
  margin:0;
  padding:0 0 0 0;
  background:url (images/test.jpg) no-repeat left center;
}

ul li a{
margin:0;
padding:0 0 0 10px
}

Modifié par Oryo (08 Jun 2007 - 15:58)
Merci mais ca correspond pas à ce que je cherche,

je veux juste que les puces soit alignées.

Et pour les liens qu'ils deviennent gras quand on passe le curseur dessus :

J'ai adapté ton code au mien mais maitenant les puces ne s'affichent plus :

#nav{font-size:12px;color:#705206;margin-left:20px;padding:0px;}
#nav a{color:#9F5211;text-decoration:none;font-weight:normal;}
#nav ul{margin:0px;padding:0px;}
#nav li{list-style-type:none;margin:0px;padding:0px;background:url (images/puce_orange.jpg) no-repeat left center;}
#nav ul li a{margin:0px;padding:0px 0px 0px 10px;}
#nav a:link{font-weight:normal;}
#nav a:visited{font-weight:normal;}
#nav a:hover{font-weight:bold;}
#nav a:active{font-weight:bold;}


Et le code HTML :
<div id="nav">
<ul>
<li><a href="<?php echo get_page_link(1); ?>">ville 1</a></li>
<li><a href="<?php echo get_page_link(2); ?>">ville 2</a></li>
<li><a href="<?php echo get_page_link(3); ?>">ville 3</a></li>
<li><a href="<?php echo get_page_link(4); ?>">ville 4</a></li>
</ul>
</div>


Merci de m'aider.
#nav ul li{margin:0px;
padding:10px 0px 0px 10px;
background:[#darkred]url ([/#]/images/puce_orange.jpg) no-repeat left center;


Il y a un espace entre url et la (

Supprime le , je pense que c'est une erreur de syntaxe.

#nav ul li{margin:0px;
padding:10px 0px 0px 10px;
background:[#darkred]url([/#]/images/puce_orange.jpg) no-repeat left center;
Merci Oryo, maintenant elles s'affichent mais elles ne s'alignent pas...

en fait je pense qu'il faut mettre display:inline mais je sais pas ou ?

#nav{font-size:12px;color:#705206;margin-left:20px;padding:0px;}
#nav a{color:#9F5211;text-decoration:none;font-weight:normal;}
#nav ul{margin:0px;padding:0px;}
#nav li{list-style-type:none;margin:0px;padding:0px;background:url(images/puce_orange.jpg) no-repeat left center;}
#nav ul li a{margin:0px;padding:0px 0px 0px 10px;}


Merci.
Mets un

display:inline;


dans ton

#nav li


Si tu as encore des problèmes , je te conseille ce site :
Listamatic
Modifié par Oryo (12 Jun 2007 - 17:22)