[résolu]Hover particulier sur un menu

(reprise du message précédent)

Hello,

Tout d'abord, désolé d'avoir perturbé le fil de la discussion.

Si on ne reste qu'en CSS, le plus simple reste effectivement d'affecter une classe ou un identifiant sur chacun des liens pour les différencier... Personnellement, j'intégrais les images comme ceci :

*
{
	padding: 0;
	margin: 0;
}
body
{
	font: 90% "Palatino linotype","Times New Roman",serif;
}
ul#menu
{
	padding: 10px 0 0 20px;
}
ul#menu li
{
	list-style-position: outside;
}
ul#menu li a
{
	font-size: 1em;
	line-height: 2.3em;
	width: 8.5em;
	height: 2.3em;
	display: block;
	color: #008;
	background-color: #FFF;
}
ul#menu li a:hover
{
	color: #A00;
}
ul#menu li a.item0:hover
{
	background: url(gloomith.gif) 100% 0 no-repeat;
}
ul#menu li a.item1:hover
{
	background: url(gloomith_2.gif) 100% 0 no-repeat;
}
ul#menu li a.item2:hover
{
	background: url(gloomith_3.gif) 100% 0 no-repeat;
}
ul#menu li a.item3:hover
{
	background: url(gloomith_4.gif) 100% 0 no-repeat;
}
ul#menu li a.item4:hover
{
	background: url(gloomith_5.gif) 100% 0 no-repeat;
}

<ul id="menu">
	<li><a href="#" class="item0">Lorem Ipsum</a></li>
	<li><a href="#" class="item1">Lorem Ipsum</a></li>
	<li><a href="#" class="item2">Lorem Ipsum</a></li>
	<li><a href="#" class="item3">Lorem Ipsum</a></li>
	<li><a href="#" class="item4">Lorem Ipsum</a></li>
</ul>

Exemple de rendu

Je n'ai pas vu l'utilité d'ajouter des span en fait. Peut-être y'avait-il une raison particulière ? mmh... et le bug... où apparait-il ? Je n'ai pas eu affaire à lui. Si on différencie les id ou class, pourquoi cette notion d'empilement ? Je m'en vais lire l'article.

A part çà... pour le mélange CSS/Javascript, ben... Je n'y arrive pas sur IE ! J'aurais mieux fait de me taire... Comme l'a dit Laurent :

a écrit :
- la répartition des propriétés de background entre les blocs #menu et .default n'est pas la voie la plus élégante côté syntaxe CSS; Mais c'est celle qui ne pose pas de soucis à IE Windows.

J'ai tenté de faire sans le mélange id/class mais non, çà bloque.
J'obtenais ceci qui, comme tu peux le voir, fonctionne sur Firefox ou Opera mais pas IE.

Comme quoi, le hover en CSS, çà dépanne...

PS: Les petites bestioles qui bougent dans mes pages, c'est pour l'exemple, mais il est préférable de rester plus... conventionnel !

ok, j'ai vu pourquoi

Mes images se placent à côté des liens alors que dans l'exemple de Laurent, elles restent placées au même endroit...

koala64 a écrit :

Un point me semble important... Lorsqu'on attribue une couleur via DOM, on écrit souvent :

var oP = document.getElementsByTagName('p')[0];
oP.style.color = 'red';

et on obtient bien notre paragraphe en rouge. Ce qui pose problème, c'est justement en terme d'évolutivité et de facilité de ré-emploi du code. Si demain, je décide de changer mon CSS, je dois aussi modifier cette valeur dans le JS alors que si je m'étais contenté d'affecter une classe, je n'aurais que le CSS à changer.

(...)

Même si l'importance est moindre que la séparation structure/présentation-comportement, je pense qu'une des bonnes pratiques est aussi de faire la séparation présentation/comportement.

javascript+css n'empêche pas cette séparation présentation/comportement : l'organisation du script ci-dessus et la manière dont il s'articule avec une feuille de style en est un bon exemple

Cela dit, à la manière de Molly Holzschlag, je crois qu'il s'agit plus de réfléchir en terme de "mariage" présentation/comportement/structure, qu'en terme de "séparation", car ce dernier induit souvent en erreur.

Un autre exemple: dans une récente intégration, nos clients avaient à modifier chaque semaine certains éléments de présentation. D'ordinaire, on considère justement que la "séparation contenu/présentation" facilite ce genre de choses. Mais dans leur cas, modifier via leur CMS une CSS externe n'était pas aisé. une petite partie des styles a donc été transférée sous forme d'attributs style internes...

Merci, je crois que c'est bon ça marche là

Si vraiment il y a encore des problèmes, j'essairai le javasript, sinon je préfère garder le css...

(j'aime bien le menu avec le smiley qui bouge...Même si j'avoue que ça donne un peu la tête qui tourne )