Optimisation d'un code valide CSS / XHTML trans.

Bonjour,

je fais le grand saut et commence à monter mon premier site XHTML 1.0 Transitional, dans le cadre de mon travail.
... c'est dur ...

Je suis parvenu à monter une feuille de style qui fonctionne partiellement: elle est valide (mon code XHTML aussi), les couleurs changent, etc...

Seulement elle n'est certainement pas optimisée ! Je pense qu'il faut moitié moins de code pour faire 2x mieux !..

Certains auraient-ils la patience de me montrer comment optimiser cette CSS en terme de longueur de code, et en faisant en sorte que le menu change de couleur non pas au survol du texte, mais bien au survol de la zone (ici le <dt>) ?

Merci d'avance

Voici mon code (CSS)

.menu
{
width:120px;
margin-left:20px;
}

.menu dt
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color:#000000;
background-color:#FFFFFF;
padding-bottom:5px;
border-top:1px dotted #000000;
}

.menu a
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color:#000000;
text-decoration:none;
}

.menu dt:hover
{
background-color:#DF0A11;
}

.menu a:hover
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color:#FFFFFF;
text-decoration:none;
}

je sais, je sais : "TOUT ça !!!!"... je sais...

et le XHTML :

<div class="menu">
			<dl>	
			<dt><a href="#"><img src="img/puce_menu.gif" alt="puce" />Item 1</a></dt>
			<dt><a href="#"><img src="img/puce_menu.gif" alt="puce" />Item 2</a></dt>
			<dt><a href="#"><img src="img/puce_menu.gif" alt="puce" />Item 3</a></dt>
			<dt></dt>
			</dl>
		</div>

De retour au boulot, j'édite mon poste car, finalement, ce code ne fonctionne pas avec IE : la couleur de fond de la zone <dt> ne change pas...
Je tourne ce truc dans tous les sens depuis hier soir sans parvenir à quelque chose de satisfaisant... si quelqu'un à une idée ?
Modifié par Breskovic (07 Feb 2007 - 15:20)

A part mettre :

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

dans la class menu je pense que c'est pas mal du tout

j'aurais tendance, vu la façon dont est employée la balise <dl> (avec un <dt> seul) à me demander s'il ne vaut pas mieux mettre une liste non ordonnée (<ul>) ... Car le <dt> est censé être "défini" par un <dd> or tu n'utilises ici qu'une énumération de <dt>.
Modifié par Malcolm (08 Feb 2007 - 09:23)

Merci pour vos réponse

Merci également pour le "c'est pas mal du tout" ! ... sauf que ça ne marche pas !..

Pour les infos de typo dans la classe menu : OK
Et pour répondre à Malcom, j'ai choisi <dl><dt> car <ul> fait automatiquement un retrait à droite; et je ne peux pas me le permettre (il sagit du menu principal de navigation du site, positionné dans la colonne de gauche).
A moins que quelqu'un sache comment utiliser <ul> en annulant le retrait automatique ..??

Mais dans tous les cas, même avec <ul>, je crains que le problème reste le même : dans l'état actuel de mon code cité ici, IE ne produit pas le changement de couleur du background (reste blanc), et autant IE que FF réagissent au passage de la souris SUR LE TEXTE, mais pas sur l'ensemble de la zone...

Je pense franchement qu'il faut penser la CSS autrement... je m'y remet Si quelqu'un à une piste, c'est bienvenu !

pour ton retrait lors de l'emploi de UL :

#menu ul
{
	margin:0px;
	padding:0px;	
	list-style-type:none; /*si tu veux pas de disc, cercle etc ...*/
}

ceci t'affichera ton texte le long de ta marge.

Concernant le changement de fond au passage, j'avais le même problème sur un site que je suis en train de refondre, pour arriver a avoir toute le background qui change sur la longueur du menu et pas seulement lebackground derriere le texte j'ai utilisé une la propriété background-image avec une image de la largeur de mon menu.
Au survol de la souris, c'est l'image qui change et donne ainsi cette impression de background modifié.

	#navigation li a
	{ 
		text-decoration:none;
		background: url(ton_image.jpg) no-repeat left;
		float:left;
	}
	#navigation li a:hover
	{
		background: url(ton_image_au_survol.jpg) no-repeat left;
	}

Chez moi ca fonctionne impec, y'a juste un chti soucis avec l'affichage des titres
http://forum.alsacreations.com/topic-2-22482-1-Problemes-dAffichage-dun-menu-sous-Firefox.html
tu pourras voir a quoi ressemble l'affichage ainsi

Kent a écrit :
Concernant le changement de fond au passage, j'avais le même problème sur un site que je suis en train de refondre, pour arriver a avoir toute le background qui change sur la longueur du menu et pas seulement lebackground derriere le texte j'ai utilisé une la propriété background-image

... et c'est tout à fait injustifié s'il ne s'agit que d'une simple couleur! Il suffit d'attribuer au lien un statut d'élément de type bloc et de lui donner la couleur désirée lors de son survol par le curseur.

Merci Kent

je testerais le CSS de UL dès que j'ai 5 mn. Par contre, l'utilisation d'une image ne me tente pas : je cherche vraiment à faire un code propre et optimisé aux max, car la réalisation de ce site doit être pour moi l'occasion d'apprendre le XHTML (avant je montais mes sites avec des tables partout).

J'ai bien tenté de mettre le <dt> en "display:block;", sans que cela n'ai de conséquences sur IE.

Pour être au maximum clair, j'ai mis mon menu en ligne (le CSS est dans la source de la page HTML) :
http://raggini.evelyne.free.fr/css/menu.html [/url]

Je vous propose d'y passer avec FF (le survol fonctionne, il reste un défaut de gestion de typos à règler) > ça donne une bonne idée de ce que je cherche à faire.
Ensuite, y retourner avec IE ...

Note: si vous testez le menu, cliquez sur Item 1, cela vous montrera ce que doit devenir le menu dans un deuxième temps: un menu déroulant façon "glissière" > ce qui peut vous montrer que je suis limité dans l'utilisation de la balise <a>...

Merci d'avance !
Modifié par Breskovic (08 Feb 2007 - 11:32)

Tu peux gagner quelques caractères en tapant background au lieu de background-color.
En fait background est la propriété raccourcie pour
background-color,
background-image,
background-repeat,
background-attachment et
background-position,
en respectant cet ordre
Ainsi, si tu déclare

background: #fff

tu déclare la première des valeurs uniquement, celle de la couleur, et çà marche.
Modifié par Mikachu (08 Feb 2007 - 11:46)