CSS Menu horizontal montre balles liste

-1

J'utilise ce code:CSS Menu horizontal montre balles liste

#menu { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: block; 
 
    overflow: auto; 
 
} 
 

 
#menu li { 
 
    margin: 1px; 
 
    padding: 0; 
 
    float: left; 
 
} 
 

 
#menu li a { 
 

 
    display: block; 
 
    padding: 2px; 
 
    padding-left : 15px; 
 
    padding-right: 15px; 
 
    
 
    font-family: "Tahoma"; 
 
    font-size: 18px; 
 
    color: #8f8b20; 
 
    text-decoration : none; 
 
} 
 

 
#menu li a:hover { 
 

 
    background-color: #dad68c; 
 
    
 
    padding: 2px; 
 
    padding-left : 15px; 
 
    padding-right: 15px; 
 
} 
 

 
#menu li a:active { 
 
    color: #ffffff; 
 
    background-color: #dad68c; 
 
    
 
    padding: 2px; 
 
    padding-left : 15px; 
 
    padding-right: 15px; 
 
}

<ul id="menu"> 
 
<li><a href="#">Home</a></li> 
 
<li><a href="#">Foods</a></li> 
 
<li><a href="#">Gallery</a></li> 
 
<li><a href="#">Site Map</a></li>    
 
<li><a href="#">About us</a></li> 
 
    <li><a href="#">Contact us</a></li> 
 

 
</ul>

Pour un menu CSS horizontal qui fonctionne très bien sur jsFiddle mais quand je l'utilise dans mon site. . il me donne des balles de la liste, voir l'image ci-dessous ....

alt text

COMMENT débarrasser de ces BALLES

F1F1

Help !!!

Toute clé

Source

2010-10-19 Moon

Modifier ce style:

#menu li { 
    margin: 1px; 
    padding: 0; 
    float: left; 
}

Comme ceci: (Il vous manque list-style propriété)

#menu li { 
    margin: 1px; 
    padding: 0; 
    float: left; 
    list-style:none; // this should remove the bullets 
}

Plus d'info:

http://www.w3schools.com/CSS/pr_list-style-type.asp

Source

2010-10-19 18:43:47 Sarfraz

C'est la vérité simple :), jsFiddle utilise un [reset-css] (http://developer.yahoo.com/yui/3/cssreset/) Je crois, c'est pourquoi vous ne voyez pas de balles Là! Cette réinitialisation supprime tous les paramètres du navigateur par défaut. –

@Justus Romijn: C'est vrai que j'aurais dû le mentionner dans ma réponse mais merci d'ajouter que :) – Sarfraz

+1 pour la référence à w3schools. Super site de référence! –

Avez-vous essayé liste de style?

ul { 
     list-style: none; 
     ... 
     ... 
}

Source

2010-10-19 18:45:25

Cela s'appliquera à tous les éléments de 'ul' :) – Sarfraz

Bien sûr, c'est juste un exemple de la façon dont vous utiliseriez le style de liste. :) Il peut réduire la portée à un ID spécifique ou à une classe comme vous l'avez fait dans votre réponse. –

Le code CSS manque une règle pour ul mise list-style: none

Source

2010-10-19 18:46:19 Xint0

Vous devez remplacer le style par défaut <li> en ajoutant list-style: none; à #menu. Ajouter cela à #menu li aura le même effet, mais il faut 3 caractères supplémentaires. :)

La raison pour laquelle jsFiddle a l'air très bien est que le CSS qu'ils appliquent à la page entière s'occupe de cela pour vous.

En savoir plus sur list-style-type, et le raccourci list-style (utilisé ci-dessus).

Source

2010-10-19 18:53:44 keirog

Répondre

Questions connexes