Problème avec la règle "css list-style-type: none;" sous Fir

Question

23 Apr 2009 à 21:49

Hello à tous,

J'ai copié le menu suivant pour l'intégrer à mon site web : http://www.team-masters.com/exemples/menu-vertical21-pret-css.html

le problème est que, sous Firefox, une fois que je l'intègre à une de mes pages web, les puces s'affichent alors que la règle list-style-type: none; est bien spécifiée.

Voici le code css :

* {
	padding: 0;
	margin: 0;
}
a {
	text-decoration: none;
	outline: none;
}
body {
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
	color: #000000;
	height: 100%;
	font: 0.625em/1em Arial, Helvetica, sans-serif;
}
h1 {
	text-align: center;
	margin-top: 0;
	margin-bottom: 0.7em;
	color:#660099;
	background-color: #FFFFFF;
	font: 2em/1em Arial, Helvetica, sans-serif;
	line-height: 1.5em;
}
h2 {
	margin-bottom: 1em;
	font: 1.5em/1em Arial, Helvetica, sans-serif;
}
h3{
	font: 1.2em/1em Arial, Helvetica, sans-serif;
}    
html {
	height: 100.2%;
	font-size: 100%;
}
div#bandeau {
	text-align: center;
	height: 10%;
	margin: 0;
	padding: 1px;
	color: #000000;
	background-color: #FFFFFF;
}
div#colonne2 {
	margin: 0;
	padding: 0;
	background-image: url(../side2.gif); /*penser à trouver une image*/
	background-position: right;
	background-repeat: repeat-y;
	width: 100%;
	color: #000000;
	background-color: #FFFFFF;
}
div#colonne1 {
	margin: 0;
	padding: 0;
	background-image: url(../side1.gif); /*penser à trouver une image*/
	background-repeat: repeat-y;
	width: 100%;
}
div#zone_de_navigation {
	width: 220px;
	float: left;
	list-style-type: none;
}
div#zone_de_texte {
	padding: 1%;
	margin-left: 220px;
	margin-right: 13%;
	margin-bottom: 1%;
	color: #000000;
	background-color: #FFFFFF;
	text-align: justify;
	list-style-position: inside;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2em;
	line-height: 1.4em;
}
p {
	margin-bottom: 1em;
}
div#contenu_secondaire {
	padding: 1em;
	width: 13%;
	float: right;
}
div#pied_de_page {
	position: absolute;
	margin-bottom: 0;
	padding: 0;
	clear: both;
}
.clear {
	clear: both;
	display: block;
	height: 1px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.centrer {	
	text-align: center;
	}
.textepetit {
	line-height: 1em;
	margin-bottom: 0;
	font: 0.6em/1em Arial, Helvetica, sans-serif;
	}
.citations {	
	text-align: justify;
	font-style: italic;
	line-height: 1.4em;
	color: #000000;
	background-color:#CCFFFF;
	}
.extraits_de_code {	
	text-align: left;
	line-height: 1.4em;
	color: #000000;
	background-color:#FFFFCC;
}

img.image_centre {
	display: block;
	margin-right: auto;
	margin-left: auto;
	border: 0;
}
img.image_gauche {
	float: left;
	margin-right: 1em;
	margin-top: 1em;
	border: 0;
}
img.image_droite {
	float: right;
	margin-left: 1em;
	margin-top: 1em;
	border: 0;
}

/*--- Menu---*/

#menu {
width: 200px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
}

#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu li a:link, #menu li a:visited {
color: #C7377D;
display: block;
background: url(menu.gif);
padding: 8px 0 0 10px;
}

#menu li a:hover {
color: #C7377D;
background: url(menuhover.gif) 0 -32px;
padding: 8px 0 0 10px;
}

Et voilà le code html :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"/>
<link rel="icon" href="http://mon.lautre.net/favicon.ico" type="image/x-icon" />
<title>Merci !</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body id="mercicontact">

<div id="bandeau">

</div>

<div id="colonne2">
	<div id="colonne1">
<div id="zone_de_navigation">

<ul id="menu">

	<li class="classemenu" id="nav-A"><a href="../index.php" title="Page d'accueil de ce super site web tellement utile &agrave; la soci&eacute;t&eacute;.">Accueil</a></li>
	<li class="classemenu" id="nav-G"><a href="../astuces.php" title="Quelques astuces pour la cr&eacute;ation d'un site web">Astuces</a></li>
	<li class="classemenu" id="nav-I"><a href="../chat.php" title="A quoi peut-il bien servir ?">Chat</a></li>
	<li class="classemenu" id="nav-J"><a href="../contact.php" title="Contactez-moi par formulaire&hellip;">Contact</a></li>

</ul> <!-- Fin de du menu-->

 </div> <!-- Fin de de zone_de_navigation -->

		<div id="contenu_secondaire">
		</div>
		
		<div id="zone_de_texte">

	<h1>Message envoy&eacute;!</h1>

<p class="centrer">Merci pour le petit mot. Je r&eacute;pondrai d&egrave;s que possible si vous avez laiss&eacute; une adresse email.</p>
<p class="centrer">Pour revenir &agrave; la page d'accueil cliquez sur &quot;Accueil&quot; (l'eusses-tu cr&ucirc;?)<br />
  Pour ne pas revenir &agrave; la page d'accueil, ne cliquez pas sur &quot;Accueil&quot;.</p>
		</div>

		<div class="clear">&nbsp;</div>
	</div>
</div>
<div id="pied_de_page">
</div>
</body>
</html>

Voilà. Désolé d'avoir dû mettre tout ce code ou presque mais il se pourrait que le problème ne vienne pas forcement du code lié au menu lui-même.

PS: J'adore la légèreté graphique d'alsacreations Smiley smile

edfred

23 Apr 2009 à 22:15

Bonsoir, tu as une erreur dans ta CSS.

Remplace


#menu {
width: 200px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
}

#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

par :


#menu ul {
width: 200px;
list-style-type: none;
margin: 10px;
padding: 0;
}

En effet dans ton code, tu spécifies une ul contenue dans un bloc identifié "menu" alors que c'est l'UL qui est identifiée par l'ID "menu".

Aussi #menu et ul#menu sont répétitif puisque l'ID est donnée à l'UL.

Tu as quelque peu mal interprété le menu proposé par ton lien.

Bonne continuation...

Smallsmallworld

23 Apr 2009 à 23:27

Wouaw ! ça paraît si simple quand on connaît la réponse Smiley lol

Désormais je ferais plus attention aux noms que je donne à mes objets ou mes classes Smiley confus

Par contre le code que tu as donné a encore une redondance :
#menu ul { désigne encore 2 fois la même chose :
Il reste donc à enlever le ul en trop :

#menu {
width: 200px;
list-style-type: none;
margin: 10px;
padding: 0;
}

Et Voilà ça fonctionne sous Firefox, IE et Safari!
Merci pour la réponse en tout cas. J'ai le don de me noyer dans des verres d'eau. Smiley whattha

edfred

24 Apr 2009 à 17:47

Oups bizarre que ça fonctionne, je me rends compte que j'ai fait une erreur en copiant le code, tu ne dois pas avoir #menu ul mais ul#menu (C'est ce qui arrive quand on ne se relit pas! Smiley confused

Sujet clos

CSS et mise en forme, CSS3

Problème avec la règle "css list-style-type: none;" sous Fir