Menu horizontal avec images reactives de tailles variables

Bonjour,
Je débute en css...

Je cherche à faire le menu ci dessous avec des boutons textes (avec une image en fond qui change au survol) et des icones...

http://www.alise-technologies.fr/pagetype.htm
Le dit menu est également visible ici, ça marche bien sur Safari et Firefox(Mac)... mais je n'arrive pas à corriger un bug d'affichage sur IE

Quelques conseils pour mieux structurer tout ça serait bien venu également...

NB: J'ai lu le bouquin de R. Goetter... en entier...> il semblerait que la méthode des portes coulissantes soit plus approprié dans mon cas.

Plus je travaille dessus et plus je me noie...Je voudrais bien un peu d'aide...

Bonjour,
Voila la partir css concernant le menu que j'ai un peu modifié et ça fonctionne très bien, mais je n'ai pas trouvé d'ou vient le bug d'affichage.
A partir du moment ou tu applique un float:left; ou un position:absolule, la valeur d'affichage (display) passe en block automatiquement donc il devient inutile (cf liens).
Au leiu d'attribuerune class lien pour tout tes liens, choisis la méthode des slélecteurs descendant qui est moins lourde.
Pour tes image de fond rollover, elle ne s'affiche pas instantanément tout simplement parceque tu ne les précharge pas avant. Mais le préchargement sans javascript implique de choisir une méthode pas très propre qui consiste à mettre tes images dans un div caché au début de ton body pour qu'elles soient chargées en premier,
mais la plupart des lecteurs d'écran qui ne lisent pas les css afficheront ces images.
Donc la meilleur méthode est celle de l'image unique qui coulisse verticalement (monte de la hateur de ton menu: 28px) à l'état hover.

ul#menu-principal {
	position:relative;
	margin: 0;
	padding: 0;
	list-style:none;
}
#menu-principal li {display:inline;}
#menu-principal li img {float:left; margin: 0; padding: 0 1px 0 0;}
#menu-principal a {
	float:left;
	margin: 0 1px 0 0 ;
	padding: 0 15px 0 15px;
	background:url(barre-me.gif);
	font: 12px Arial, sans-serif;
	line-height:28px;
	color:white;
}
#menu-principal a:hover {
            text-decoration:none; 
            background:url(barre-menu-on.gif);
}

Modifié par Hermann (02 Jun 2006 - 13:39)

Hermann a écrit :
Bonjour,
Voila la partir css concernant le menu que j'ai un peu modifié et ça fonctionne très bien, mais je n'ai pas trouvé d'ou vient le bug d'affichage.

Merci, j'ai corrigé le problème.

Hermann a écrit :

A partir du moment ou tu applique un float:left; ou un position:absolule, la valeur d'affichage (display) passe en block automatiquement donc il devient inutile (cf liens).

Savais pas, merci...

Hermann a écrit :
Au leiu d'attribuer une class lien pour tout tes liens, choisis la méthode des sélecteurs descendant qui est moins lourde.

Oui mais le menu est moitié image /moitié bouton texte....

Hermann a écrit :

Pour tes image de fond rollover, elle ne s'affiche pas instantanément tout simplement parceque tu ne les précharge pas avant. Mais le préchargement sans javascript implique de choisir une méthode pas très propre qui consiste à mettre tes images dans un div caché au début de ton body pour qu'elles soient chargées en premier,
mais la plupart des lecteurs d'écran qui ne lisent pas les css afficheront ces images.

C'est ce que j'ai fait...
http://www.alise-technologies.fr/historique.htm

Hermann a écrit :

Donc la meilleur méthode est celle de l'image unique qui coulisse verticalement (monte de la hateur de ton menu: 28px) à l'état hover.

C'est là ou je comprends pas...
je vois pas où (selecteur) définir l'image du dessus et ou définir celle du dessus....

Comme je te l'ai expliqué, la meilleur méthode est celle de l'image UNIQUE qui coulisse verticalement (monte de la hateur de ton menu: 28px) à l'état hover.

Tu fais une image de de haut qui comprends ton etat on et off.
ET tu decale ton image vers le haut en hover:

#menu-principal a:hover {
            text-decoration:none; 
            background:url(barre-menu-on.gif) 0 -28px (ou 28px);
}