[Resolu] Conflit de propriétés - Règles de spécificités

J'essaie de faire mes classes ... mais je patauge dans la soupe :

En travaillant sur l'un des menus graphiques proposés sur le tutoriel, j'ai rencontré le problème suivant : au survol sur d'autres liens insérés dans une liste (autres que ceux du menu), un fond (celui du menu) apparaissait.
Bon.
Le menu se trouvant dans un conteneur (du nom de menu), j'ai affecté les styles propres au menu graphique.
Mais, avec #menu li a:hover, l'effet de survol ne fonctionnait pas.

Nous avons résolu le problème de la manière suivante :

li a:hover {
	color: #FFFFCC;
	background-image: url(images/image.png);
	background-repeat: no-repeat;
	background-position: left top;
}

#page li a:hover {
	background: none;
}

page étant le conteneur pour mes autres liens.

Bon.

Mais je ne comprends pas pourquoi : [#menu li a:hover] pose un problème alors que [#page li a:hover] fonctionne très bien.

J'ai beau essayer de chercher une réponse (qui existe sûrement) mes petites méninges auraient besoin de vos talents de pédagogues ...

Modifié par Vero (24 Feb 2005 - 13:08)

[ ] Snif !, on m'a oublié ...
C'était peut-être un peu trop long ...
Alors, j'ai fait plus court ...
[ ]

Revérifie l'imbrication des différentes balises gérant le menu.

Ensuite, essaye de séparer les CSS devant gérer les listes de #menu de ceux devant gérer les listes de #page

Ah ! Merci Anthony d'être là !


Le validateur HTML me congratule et le validateur CSS me congratule aussi si le premier est d'accord !

Le menu est celui du tutorial d'Alsacréations ...


Bon, j'ai lu que cela ne veut pas tout dire ... (je veux parler de la validation !)

En gros :

- le div du menu est en position absolue
- Dessous, il y a un conteneur en position absolue contenant :
. le div id="page" dans le flux
. un autre div en float.

Mais je pensais que cela venait du CSS, une histoire de priorité ...
J'ai beau essayer de comprendre en lisant les specs (que je découvre péniblement ! ), je ne trouve pas la raison logique.

En fait, je voulais simplement comprendre (puisqu'il y a une solution qui fonctionne !) car il me semble que c'est le meilleur moyen de progresser...


Question subsidiaire : comment indenter le texte lorsqu'on rédige un message sur le forum ?
Modifié par Vero (22 Feb 2005 - 20:14)

#menu et #page sont 2 conteneurs différents avec leurs propres sauces de balises dedans donc dans le CSS il faut juste séparer les 2 et non les mélanger comme tu l'avais faite.

#menu li a:hover
#page li a:hover

doivent avoir, d'après ce que tu as dis, des propriétés différentes, alors il faut éviter les "li a:hover" globales.

Pour l'indentation, cela se fait via CSS avec la propriété text-indent. Il n'est pas possible via la saisie, sauf si un script est prévu dans le code PHP

anthony a écrit :
#menu et #page sont 2 conteneurs différents avec leurs propres sauces de balises dedans donc dans le CSS il faut juste séparer les 2 et non les mélanger comme tu l'avais faite.

Tu veux dire : faire 2 feuilles de style ?

anthony a écrit :

Pour l'indentation, cela se fait via CSS avec la propriété text-indent. Il n'est pas possible via la saisie, sauf si un script est prévu dans le code PHP

Tu veux dire qu'on peut mettre en forme les posts avec des feuilles de style ? Kesako ? Et comment font-ils ?

Vero a écrit :
Tu veux dire : faire 2 feuilles de style ?

ouais, 2 différentes, mais tu peux les mettres dans le même fichier .css

Vero a écrit :
Tu veux dire qu'on peut mettre en forme les posts avec des feuilles de style ? Kesako ? Et comment font-ils ?

CSS sert à la présentation, alors il est possible de "tout" mettre en forme.

Bon, si je récapitule :

1/en cas de conflit dans le CSS, il y a la possibilité de créer 2 feuilles de style (1 importée dans l'autre, je suppose ...)

2/Si on est très fort, on peut même utiliser le CSS dans les messages d'un forum !

3/ Mais on ne sait toujours pas pourquoi [#menu li a:hover] entraîne un dysfonctionnement du menu graphique (il est nécessaire de laisser : [li a:hover] ) même en l'absence de [#page li a:hover] (qui permet de régler le problème de survol sur le lien d'une liste étrangère au menu ...)

le fait de mettre "li a:hover {}" applique les propriétés à TOUTES la page
mais "#menu li a:hover {}" ne s'applique QU'A #menu et ne débordera JAMAIS sur #page.

il serait necessaire que tu lises les tutoriels sur les propriétés des CSS et les héritages. Autrement il serait très difficile de te l'expliquer à chaque fois que tu as un problème. Surtout pour des erreurs faciles à déceler.

anthony a écrit :
le fait de mettre "li a:hover {}" applique les propriétés à TOUTES la page
mais "#menu li a:hover {}" ne s'applique QU'A #menu et ne débordera JAMAIS sur #page.

Oui, je suis entièrement d'accord, j'ai bien compris cela ... et je dirais même plus, j'y compte bien !

[ ]
Le problème est que #menu li a:hover entraîne un dysfonctionnement du menu

apparemment je n'ai pas bien compris ton problème, pourrais-tu nous montrer la page posant problème car tes explications ne sont pas claires.

anthony a écrit :
il serait necessaire que tu lises les tutoriels sur les propriétés des CSS et les héritages. Autrement il serait très difficile de te l'expliquer à chaque fois que tu as un problème. Surtout pour des erreurs faciles à déceler.

Mais je les lis les tutoriels ... même les specs (en français ...)
[ ]

Bon, c'est l'heure de la soupe ...
[ ]

anthony a écrit :
apparemment je n'ai pas bien compris ton problème, pourrais-tu nous montrer la page posant problème car tes explications ne sont pas claires.

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=utf-8" />
<title>page d'accueil</title>
<link href="jdc.css" rel="stylesheet" type="text/css" />

</head>
<body>
  <div id="haut"><img src="images/logo.png" alt="logo" /></div>
  
  <div id="menu">
	<ul>
	  		<li><a id="toto1" title="Accueil" accesskey="1" href="#">Accueil&nbsp;&nbsp;</a></li>
			<li><a id="toto2" title="Offre de formation" accesskey="2" href="#">Offre de formation&nbsp;&nbsp;</a></li>
			<li><a id="toto3" title="Curriculum Vitae" accesskey="3" href="#">Curriculum Vitae&nbsp;&nbsp;</a></li>
			<li><a id="toto4" title="Ressources" accesskey="4" href="#">Ressources&nbsp;&nbsp;</a></li>
			<li><a id="toto5" title="Contact" accesskey="5" href="#">Contact&nbsp;&nbsp;</a></li>	
	</ul>
  </div>
  
  <div id="conteneur">
	<div class="nouvelles">et zut</div>
  	<div id="page">
  	    <ul>
  	      <li><a href="">lien dans une liste</li>
            </ul>
  	</div>
  </div>
  
</body>
</html>

css que j'ai un peu simplifié et qui marche (j'ai fait une fausse manip et j'ai posté en route, sorry)

html, body {
	margin: 0px;
	height: 100%;
	padding: 0px;
}
body {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #333300;
	background-color: #336600;
}

#menu {
	height: 342px;
	width: 300px;
	position: absolute;
	left: 0px;
	top: 110px;
	border: 1px solid #336600;
}

#menu ul, #menu li {
	list-style-type: none; /* suppression des puces de liste */
	margin: 0;
	padding: 0;
}

#menu ul {
	position: absolute;
	left: 0px;
	top: 0px;
	background: transparent url(images/citron.png) top left no-repeat;
	height: 342px;
	width: 300px;
	text-align: left;
	text-indent: 20px;
}

#menu li {
	display: inline; /* correction pour IE5 et IE5.5 */
}

#menu li a {
	display: block;
	line-height: 40px;
	color: #FFFFCC;
	font-size: 100%;
	text-decoration: none;
	font-weight: bold;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}

li a:hover {
	color: #FFFFCC;
	background-image: url(images/citron.png);
	background-repeat: no-repeat;
	background-position: left top;
}

a#toto1:hover {
background-position: 0% -342px; /* dýcalage de l'arriýre-plan pour chaque bouton */
}

a#toto2:hover {
background-position: 0% -382px;
}

a#toto3:hover {
background-position: 0% -422px;
}

a#toto4:hover {
background-position: 0% -462px;
}

a#toto5:hover {
background-position: 0% -502px;
}
#conteneur {
	position: absolute;
	width: 70%;
	top: 110px;
	right: 1%;
	background-color: #FFFFCC;
	border: 1px solid #336600;
	height: auto;
	padding: 2%;
}
#haut {
	position: absolute;
	height: auto;
	width: auto;
	left: 0px;
	top: 0px;
	padding-top: 10px;
	padding-left: 20px;
}
#page {
	height: auto;
	width: auto;
}
.nouvelles {
	border: 1px solid #336600;
	float: right;
	background-color: #FFCC33;
	width: 30%;
}

#page a:link, .nouvelles a:link {
	font-weight: bold;
	color: #333333;
}
#page li a:hover {
	background: none;
}


#page li, .nouvelles li {
	margin-top: 5px;
	padding-top: 5px;
}

Modifié par Vero (22 Feb 2005 - 21:03)

Where is the problem ??

Bonsoir,
Tu pourrais t'épargner une div avec #menu, ul est déjà un élément de type bloc, si tu utilises un id c'est donc qu'il a vocation à être unique.
Je te proposerais une notation du genre:

ul#menu{}
ul#menu li{}
ul#menu li a{}
ul#menu li a:hover{}

Tu ne styleras dans ce cas que la liste ayant pour id menu.

anthony a écrit :
Where is the problem ??

Je voulais juste comprendre pourquoi #menu li a:hover entraine un dysfonctionnement du menu et nous oblige à laisser li a:hover qui est la solution au problème.
Il n'y a pas de problème, il ya juste que cela ne me parait pas logique ...

Mais bon, c'est pas grave, on va aller manger ...
A+

Igor a écrit :
Bonsoir,
Tu pourrais t'épargner une div avec #menu, ul est déjà un élément de type bloc, si tu utilises un id c'est donc qu'il a vocation à être unique.
Je te proposerais une notation du genre:

ul#menu{}
ul#menu li{}
ul#menu li a{}
ul#menu li a:hover{}

Tu ne styleras dans ce cas que la liste ayant pour id menu.

Merci pour cette piste, Igor.
N'étant pas tout à fait à l'aise, à force d'essayer des choses, je m'embrouille et j'avais opté pour demander un peu d'aide.
Je vais essayer de comprender ce que tu me proposes, mais d'abord, je vais faire manger ma petite famille qui me réclame à corps et à cris !

A+

En relisant ce topic à tête reposée, et en avancant à petit pas, j'ai commencé par le renomer pour tenter de mieux me faire comprendre.

Je ne cherche pas à résoudre un problème particulier, mais je tente de comprendre un concept général en m'appuyant sur ce qu'on peut appeler "un cas d'école" !

J'ai pris note et j'ai simplifié mon code en fonction du commentaire d'Igor, mais je cherche encore pourquoi :

En affectant un ID à la pseudo classe a:hover du menu, le survol ne fonctionne pas.

Ce qui m'amène à faire la différence entre :

#menu selecteur {} : qui définit donc des propriétés pour un sélecteur dont le parent a une id="menu"

et

selecteur#menu {} : qui permet, si je comprends bien en lisant la traduction CSS1, de gérer une exception de propriétés sur .... un élément dont le parent a une ID menu (et non pas sur l'élément lui-même ?)

Parce que je me dis que la solution de l'enigme est là et que trouver la solution de cette enigme va me permettre de comprendre, par l'exemple, les possibilités de tout cela.

Et je me dis aussi, que ce qui complique les choses est de manipuler en plus a:hover.

Certains pourront penser que je me complique un peu la vie, mais j'espère que d'autres encourageront ma démarche d'apprentissage.
Autrement dit, quand je serais plus à l'aise dans ces notions, j'envisagerais de faire un site ... pour l'instant, j'apprends, j'expérimente, je participe à des concours ...


Merci pour votre aide si précieuse.

Modifié par Vero (23 Feb 2005 - 18:08)

Igor a écrit :
Bonsoir,
Tu pourrais t'épargner une div avec #menu, ul est déjà un élément de type bloc, si tu utilises un id c'est donc qu'il a vocation à être unique.
Je te proposerais une notation du genre:

ul#menu{}
ul#menu li{}
ul#menu li a{}
ul#menu li a:hover{}

Tu ne styleras dans ce cas que la liste ayant pour id menu.

Si, cela vous interesse :

Résolu, après élimination du div et simplification, mais la déclaration proposée ne marche pas, celle qui fonctionne est :

#menu{}
#menu li{}
#menu li a{}
#menu li :hover{}

Parce que l'id menu est déjà appliqué à l'élément ul, sans doute ?

#menu li a:hover ne marche pas, il faut supprimer le a ... ?
Pourquoi ? ... pour un prochain épisode !

Voilà, ne cherchez plus

Modifié par Vero (24 Feb 2005 - 10:21)