28173 sujets

CSS et mise en forme, CSS3

List-item +mozilla

Pages :
Bonjour à tous,

J'ai creer plusieurs list <ul> le problème c'est que sous mozzila mes <li> se retrouve entassés lesuns sur les autres...?!! voici mon code si quelqu'un pourrais m'éclairer SVP....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
<html lang="fr">
	<head>
		<title>Construction de menus simples en XHTML/CSS: menu vertical</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
#item {
	width: 149px ;
	margin: 2px 0px 0px 0px;
	background-color: #99ccff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	list-style-type: none;
	height: 20px;
	padding: 0px;
	margin:2px;
}
				
#subitem{
	background: White;
}

#item li{
	padding: 0px 0px 0px 2px;
	line-height:20px;
	margin: 1px 0px 1px 0px;
}
#item a {
	color: #000000;  
	text-decoration: none;
	display: block;
	height:20px;
}

#item ul li a:hover {
	color: #000000;  
	font-weight:bold;
	text-decoration: none;
}

#item ul li a:active { 
	color:#000000;
	font-weight: bold;
	text-decoration: none;
}
#item a:hover, {
	color:#000000;
	font-weight:bold;
	text-decoration: none;
}
#item a:active { 
	color:#000000;
	font-weight: bold;
	text-decoration: none;
}
			--></style>
	</head>
	<body bgcolor="#dcf1fa">
		<h1>Menu vertical</h1>
<ul id="item">
	<li><a href="#">Gerer emplois du temps</a></li>
</ul>
<ul id="item">
	<li id="subitem"><a href="#">Visualiser les taches </a></li>
	<li id="subitem"><a href="#">Saisir une tache </a></li>
	<li id="subitem"><a href="#">Saisir une absence </a></li>
</ul>
<ul id="item">
	<li><a href="#">Pr&eacute;f&eacute;rences</a></li>
</ul>
<ul id="item">
	<li id="subitem"><a href="#">Pr&eacute;f&eacute;rences g&eacute;n&eacute;rale</a></li>
	<li id="subitem"><a href="#">Activit&eacute;s pr&eacute;f&eacute;r&eacute;es</a></li>
</ul>
<ul id="item">
	<li><a href="#">Quitter</a></li>
</ul>
	</body>
</html>
Bonjour,

Quelques points de correction avant toute chose :

- Un identificateur (id) doit être unique dans une page. Or dans ta page, il y'a plusieurs id="item" et plusieurs id="subitem". Ils ne me semblent même pas pertinent dans ton cas (si tel est le cas remplacer id par class (faire la conversion concernant les css #item devient .item et ainsi de suite)). A la place de "#item" pourquoi ne pas utiliser directement le nom de ta balise "ul".

- Certains de tes sélecteurs ne s'appliquent pas à ton document. Exemple :
#item ul li

qui cible les éléments de type li se trouvant dans des éléments de type ul eux même se trouvant dans un élément ayant comme attribut id "item".

Bonne continuation.
Romain
Et pour le problème lui-même -- que tu devrais avoir la joie de constater non seulement avec Mozilla (Firefox, Camino...), mais aussi avec Safari, Konqueror, Opera, et... Internet Explorer 7 --, il vient probablement de ceci :
#item a {
	display: block;
	height:20px;
}

Si tu figes la hauteur d'un élément contenant du texte plutôt que de le laisser s'agrandir en fonction de son contenu, il y a forcément un moment où le contenu débordera.

Si tu cherchais à donner une hauteur minimale à tes liens, regarde plutôt du côté de min-height.
Salut Romain....

et merci pour ta réponse... à vrai dire j'ai fait une grosse betise de newbi et j'ai rien vu... Smiley confus

donc après épuration et surtout reflexion. je suis arrivé à un code plus épuré.. et qui maintenant marche à moitié car les class a:hover et a:active ne fonctionne toujours pas.. Smiley decu

bref voila le resulat

		<style type="text/css">
.item 
{
	width: 149px ;
	background-color: #99ccff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	list-style-type: none;
	padding: 0px;
	margin:2px;
}
				
.subitem {
	background: White;
}

.item li{
	padding: 0px 0px 0px 2px;
	line-height:20px;
	margin: 1px 0px 1px 0px;
}
.item a {
	color: #000000;  
	text-decoration: none;
	display: block;
	height:20px;
}

.item a:hover, {
	color:#000000;
	font-weight:bold;
	text-decoration: none;
}
.item a:active { 
	color:#000000;
	font-weight: bold;
	text-decoration: none;
}
			--></style>
en faite j'ai mis ça

#item a {
	display: block;
	height:20px;
}


c'est pour que le lien soit clickable sur toute la zone
Tu peux déjà dégagé cet fin de commentaire --> avant </style>
et peux tu me confirmer que ton code html ressemble bien à ceci :

<ul class="item">
<li class="subitem"><a href="#">Pr&eacute;f&eacute;rences g&eacute;n&eacute;rale</a></li>
<li class="subitem"><a href="#">Activit&eacute;s pr&eacute;f&eacute;r&eacute;es</a></li>
</ul>
ok....
voici le code qui me parrait identique

<body bgcolor="#dcf1fa">
<ul class="item">
	<li><a href="#">Gerer emplois du temps</a></li>
</ul>
<ul class="item">
	<li class="subitem"><a href="#">Visualiser les taches </a></li>
	<li class="subitem"><a href="#">Saisir une tache </a></li>
	<li class="subitem"><a href="#">Saisir une absence </a></li>
</ul>
<ul class="item">
	<li><a href="#">Pr&eacute;f&eacute;rences</a></li>
</ul>
<ul class="item">
	<li class="subitem"><a href="#">Pr&eacute;f&eacute;rences g&eacute;n&eacute;rale</a></li>
	<li class="subitem"><a href="#">Activit&eacute;s pr&eacute;f&eacute;r&eacute;es</a></li>
</ul>
<ul class="item">
	<li><a href="#">Quitter</a></li>
</ul>
	</body>
a écrit :
et qui maintenant marche à moitié car les class a:hover et a:active ne fonctionne toujours pas.. Smiley decu


Qu'est-ce qui ne marche pas ? Qu'essayes-tu d'obtenir ?
Comment peux-tu savoir que le lien reste actif sous IE ? Car selon ce que tu déclares aucune différence entre les deux états :

.item a:hover {
	color:#000000;
	font-weight:bold;
	text-decoration: none;
}

.item a:active { 
	color:#000000;
	font-weight: bold;
	text-decoration: none;
}

Modifié par yodaswii (27 Apr 2007 - 15:49)
je passe dessus avec la souris il devient bold, ensuite je clique sur le lien et là il reste bold tant que je n'ai pas cliqué sur un autre lien
C'est un comportement normal de Firefox (à mes yeux) ... pour moi pas de problème (bien que je vois de quoi tu parles) ... peut être que quelqu'un aura une piste ...
Modifié par yodaswii (27 Apr 2007 - 15:58)
c'est effectivement bizzard, car avec le code ci dessous qui sort du livre "le guide complet" ca marche

<?xml version="1.0" encoding="UTF-8"?>
<!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>un menu</title>
		
		<meta http-equiv="Content-language" content="fr" />
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			ul {
				width: 150px;
				padding: 0;
				margin: 0;
				list-style-type: none;
				/*border: solid 1px #000;*/
				font: 1em/3 Impact, Arial, Helvetica, sans-serif;
				text-transform: uppercase;
			}
			li {
				line-height: 3em;
				text-align: center;
			}
			a {
				display: block;
				height: 3em;
				text-decoration: none;
			}
			a:link {
				background-color: #eee;
				color: #555;
			}
			a:visited {
				background-color: #ddd;
				color: #aaa;
			}
			a:focus {
				background-color: #888;
				color: #eee;
			}
			a:hover {
				background-color: #555;
				color: #eee;
			}
			a:active {
				background-color: #000;
				color: #fff;
			}
		</style>
	</head>

	<body>
		<ul>
			<li><a href="#2" id="a1">:link</a></li>
			<li><a href="#3" id="a2">:visited</a></li>
			<li><a href="#4" id="a3">:focus</a></li>
			<li><a href="#5" id="a4">:hover</a></li>
			<li><a href="#1" id="a5">:active</a></li>
		</ul>
	</body>
</html>
Essaye d'ajouter le :
a:focus {...}

avant le hover je pense que le problème est résolu sous firefox Smiley cligne .

C'est la seule chose que je n'avais pas testé et ça me semble solutionner le problème ...
et moi qui me suis dit que ca peut pas être pour ça....
bein j'aurais du aussi essayer.....


MErci yodaswii... c'est cool
toutanne a écrit :
je passe dessus avec la souris il devient bold, ensuite je clique sur le lien et là il reste bold tant que je n'ai pas cliqué sur un autre lien

Ça ne se fait pas en CSS. La pseudo-classe :active correspond à l'état du lien au moment de son activation. C'est encore IE qui fait des siennes en l'appliquant n'importe comment.

Fais une recherche sur comment mettre en évidence le lien correspondant à la page en cours, si c'est bien ce que tu veux faire. C'est un sujet traité régulièrement sur le forum. La FAQ en parle également.

Au passage :
a {
	display: block;
	[b]height: 3em;[/b]
	text-decoration: none;
}

Que ça soit 3em ou 20px, c'est une mauvaise idée de donner une hauteur fixe à un élément accueillant du texte. Smiley rolleyes
ok et merci...

par contre j'ai mis une hauteur fixe juste pour pouvoir cliquez sur toute la zone ou se trouve mon lien et non que sur le texte...

il y a une autre solution pour ça?
Pages :
Sujet clos
Aller à