Problème de mise en place d'un menu horizontal avec la fonction :hove

Bonjour a tous,
Ceci est mon premier message sur ce forum, bien que je me sois renseigné sur le sujet et sur les règles du forum, je n'ai pas trouvé corde a mon arc et espère etre le plus clair possible

Voici donc mon problème, je souhaite réaliser un menu horizontal dont les boutons et tout le reste a été fait sous photoshop. malheureusement, meme en suivant les nombreux tutos du site et les explications du forum, je n'arrive pas a afficher correctement les boutons : ceux ci ne s'affichent pas du tout. A savoir que les boutons sont des images appelées dans la css.

voici le xhtml :

<div id="menuHaut">
	
	<ul id="boutons">
		<li><a href="Home.php" alt="Home" id="home"> </a></li> 

		<li><a href="osmose.php"  alt="osmose" id="osmose"> </a></li> 

		<li><a href="joindatease.php" alt="joindatease" id="joindatease"> </a></li> 
		
		<li><a href="medias.php" alt="medias" id="medias"> </a></li> 
		
		<li><a href="osmoseShop.php" alt="osmoseShop" id="osmoseShop"> </a></li> 
		
		<li><a href="liens.php" alt="liens" id="liens"> </a></li> 
		
		<li><a href="partners.php" alt="partners" id="partners"> </a></li> 
   </ul> 
 
 
</div>

et le css :

/** Menus **/

	/** Menu Haut **/
	
#menuHaut{
	position: absolute;
	top: 125px;
	width: 1280px ;
    height: 70px ;
	border: 2px solid white; /* Une bordure pour bien marquer les limites du corps */
	color: white;
	
}

#boutons { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
}
	  
#boutons li {  
    display:inline; 
	margin: 0;
}  

#boutons li a{
	width: 127px ;
	height: 51px ;
	background-image: url("../images/boutons/home.png") ; 
	background-repeat: no repeat;
	margin-top: 10px;
	margin-left:15px;
}
	
#menu li a:hover{ 
	width: 127px ;
	height: 51px ;
	background-image: url("../images/boutons/homeA.png") ; 
	background-repeat: no repeat;
	margin-top: 10px;
	margin-left:15px;
}
#osmose{ 
	background-image: url("../images/boutons/osmose.png") ; 
	float: right;
}
	
#osmose:hover{ 
	background-image: url("../images/boutons/osmoseA.png") ; 
}

#joindatease{ 
	background-image: url("../images/boutons/joindatease.png") ; 
}
	
#joindatease:hover{ 
	background-image: url("../images/boutons/joindateaseA.png") ; 
}

#media{ 
	background-image: url("../images/boutons/media.png") ; 
}
	
#media:hover{ 
	background-image: url("../images/boutons/mediaA.png") ; 
}

#osmoseshop{ 
	background-image: url("../images/boutons/osmoseshop.png") ; 
}
	
#osmoseshop:hover{ 
	background-image: url("../images/boutons/osmoseshopA.png") ; 
}

#liens{ 
	background-image: url("../images/boutons/liens.png") ; 
}
	
#liens:hover{ 
	background-image: url("../images/boutons/liensA.png") ; 
}

#partners{ 
	background-image: url("../images/boutons/partners.png") ; 
}
	
#partners:hover{ 
	background-image: url("../images/boutons/partnersA.png") ; 
}

Merci de m'indiquer l'erreur
A tte
Modifié par Laurie-Anne (13 Sep 2010 - 15:36)

Bonjour et welcome ^^

Essaie de mettre sur tes a un :

display:block

et dis moi si ça change quelque chose
Modifié par InpIxelItrust (13 Sep 2010 - 15:14)

Comment faire pour afficher son code proprement sur ce forum ( avec la barre verte a gauche )
Merci bien pour ton aide, les boutons s'affichent :
Peux tu me dire pourquoi mettre le display bloc sur les <a> et un display online sur les li ?
Cependant a présent les boutons sont en colónes mais pas el ligne, de plus la fonction hover ne marche pas trop mais je pense sortir l image home qui était par défaut et de la mettre dans un autre id ( ce qui fait bcp de lignes css pour une fonction comme je trouve, n'y aurait il pas d'autres moyen ? Il me semble que cette fonction est pourtant assez basique non ?)

Bonjour,

J'ai corrigé l'affichage du code (il faut utiliser [ code] et [ /code] sans espaces).

Pour ce qui est de ton menu, je te conseille d'oublier ta technique et de revoir le menu complet. Des images porteuses de contenu (intitulés de liens) et support de lien DOIVENT TOUJOURS se trouver dans le code HTML. Pour le déroulement, tu pourras utiliser JavaScript (caybon mangézan).

Le problème de ta solution actuelle est que si une image ne s'affiche pas (problème serveur, connection défaillante, utilisateur de lecteur d'écran, robot indexeur...) le lien n'existe pas.

dekker a écrit :

Peux tu me dire pourquoi mettre le display bloc sur les <a> et un display online sur les li ?

En fait les a sont des éléments inline, de base, si tu leur donnes pas un display:block, leur largeur et hauteur ne sont pas prises en compte, du coup tes images ne s'affichent pas.

Display inline sur les li, ça sert à les mettre en ligne (au lieu des uns sous les autres), la balise li était par défaut un élément de block.

Pour ce qui est du fait que tes éléments soient en colonne, essaie d'ajouter un float:left; sur ton li.

Par contre je ne m'explique pas le non fonctionnement du a:hover, tu as une page en ligne ?

Okay alors j'ai modifié le css,
J'ai supprimé #bouton li j'ai mis des px après les 0
Dans #bouton li a j'ai enlevé la largeur et la hauteur car je me suis rendu compte que mes boutons n'étaient pas des mêmes dimension, il va donc falloir que je mette ça pour chaque bouton j'ai rajouté le display:inline et float:left au final ça me fait :

#boutons li a{
background-repeat: no repeat;
margin-top: 10px;
margin-left:15px;
display : inline;
float: left;
}

et 
a{
display:bloc;
}

Au final je n'ai que lenpremier bouton qui s'affiche, et autre problème, mes boutons utilisés avec hover son "lumineux" donc il y a une transparence tout autour du bouton: résultat la taille du bouton est plus grande et dépasse du menu ( du bloc menuhaut) mais la mozilla me décale mon bouton lumineux vers en bas a droite et me coupe l'image. Faut il que je réadapte mon bloc menuHaut en plus grand quitte a changer les marges ensuite ou existe il un fonction qui permette de faire dépasser l'image ?

Inpix: non je n'ai pas de page en ligne sorry
Laurie-Anne si j'utilise un alt dans mon image ( sous html ?) ça ira ?

Le float est à appliquer sur le li et pas le a, tu as oublié un k à block ce qui donne :

#boutons li {
display : inline;
float: left;
}

a{
display:block;
}

Par contre comme dit Laurie-Anne si les images ne sont pas chargée pas de menu. Je viens de me rendre compte aussi que tu as mis des alt sur tes a, il me semble que l'attribut alt n'existe pas pour les a, puisqu'il signifie un truc du style "alternatif" pour les images. Mais tu peux utiliser l'attribut "title" qui va te mettre un tooltip, cependant ça ne règle pas le problème de non affichage des images.
Question "con", mais tes images sont juste des jolies bordures décoratives, ou de vrais images avec des icones dedans par exemple.

Voici a quoi devrait ressembler le site avec son menu, tout a été fait et découpé sous photoshop pour un label que l'on crée avec mon groupe de zik, je suis en charge de faire le site.

Http://dl.free.fr/iPrPm7pfz

Quant aux boutons, ils ne sont toujours pas en ligne après avoir fait ce que tu m'as dis, je n'ai quelle bouton home d'affiché ... Je ne sais pas quoi faire peut être jvous passe les fichiers ?

Bonjour,

Tu peux toujours utiliser <span>texte</span> en appliquant un display:none à la balise <span>, sa devrais résoudre le problème si ton CSS n'es pas appliquer.

Edit : Ah voilà j'ai trouver le lien (Sprites) j'avais chercher sous limonade

http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html
Modifié par 3arly3F (13 Sep 2010 - 18:13)

Humm on dirait que le lien ne marche pas

En théorie si tu mets ton a avec un display block, que tu lui donnes la hauteur et largeure de tes images, ça devrait fonctionner. Il y a peut être un souci dans le chemin des images ? Question, mais est-ce que tes balises prennent du coup toute la place de ton image ? Mets leur un border pour le reste, si elles ont la taille de ton image, c'est que le souci vient de l'url de l'image.

@ 3arly3F : limonades bien joué ^^

L'idée des <span>texte</span> pour mettre du texte est pas mauvaise, mais présente deux inconvénients :
- le display:none est mal pris en charge par certains screenreaders qui du coup ne "lisent" pas ce qui se trouve dans la balise, il vaut donc mieux un text-indent:-9999px (cf Remplacement d'images : halte au display none !)
- si le css est activé, et que l'image se charge pas, toujours pas de menu : erf !!

Sinon une idée, vous me dites ce que vous en pensez, elle est peut-être pas bonne, mais un truc du genre

<li> <a href="toto"> <img src="monimagemenu01" alt="home"> <span class="hidden"> home</span> </a>
</li>

et en css

.hidden{
text-indent:-9999px;
}

Bon sémantiquement pas la joie, mais on a :
- un attribut alt qui s'affiche quand l'image est pas chargée ou désactivée : non négligeable
- le mot "home" en dur pour l'accessibilité

Après j'ai pas testé, juste une idée qui passe par là à 22h, donc c'est peut-être pas super, si c'est le cas disoulé
Modifié par InpIxelItrust (13 Sep 2010 - 22:26)

Hello,
Une question: as tu une image qui s'affiche dans au moins un bouton? Ou est que c'est la meme image qui s'affiche dans tout tes boutons?

Oula, il fa falloir remettre certaines chose à leur place...

le span avec un texte que l'on masque, que ce soit avec display:none ou text-indent est unr très mauvaise idée. Cela donne l'impression que la solution est accessible (dans la seconde solution, c'est le cas pour les utilisateurs de lecteur d'écran, mais uniquement eux) alors qu'elle ne l'est absolument pas.

alt n'as strictement rien à faire sur un lien.

title n'apporte rien en terme d'accessibilité ; et s'il répète l'intitulé du lien (même si celui-ci est en fond) il sera une gène.

La seule bonne solution (en terme d'accessibilité et de compatibilité) c'est de placer les images dans le code HTML et de faire le hover en JavaScript.

Quand à ta solution InpIxelItrust, elle est extrêmement redondante. De plus, si l'image ne se charge pas, son alt sera affiché ; nul besoin d'un "texte en dur" puisque l'alt l'est.
Modifié par Laurie-Anne (14 Sep 2010 - 09:29)

Laurie-Anne a écrit :

La seule bonne solution (en terme d'accessibilité et de compatibilité) c'est de placer les images dans le code HTML et de faire le hover en JavaScript.

Quand à ta solution InpIxelItrust, elle est extrêmement redondante. De plus, si l'image ne se charge pas, son alt sera affiché ; nul besoin d'un "texte en dur" puisque l'alt l'est.

Merci de la précision

Hello,
Après plusieurs tentatives, je suis arrivé a mes fins, le problème venait que n'ayant ni texte html ni dimension des images dans la feuille css, le navigateur n'affichait rien , il suffisait de mettre height et width pour que l'image s'affiche.

Anne-laure , Sais tu si je peux utiliser une police de mon choix dans n'importe quel navigateur, en dehors des polices habituelle ? comment faire donc pour importer une police qui est présente sous photoshop dans le navigateur de l'internaute afin effectivement d'avoir au moins le texte dans tout les cas.

Dernière question, c'est assez basique mais bon je débute
Comment inclure une page DANS un bloc, car j'ai vu les tutos sur la fonction include , ca okay, mais comment faire en sorte qu'un lien ne me fasse changer que le contenu d'un bloc (le bloc principal, le main) sans que le reste ne change ni même se recharge.

Merci bien !

Pardon,
Anne-Laure => Laurie Anne