Problème de menu avec image

Salut, c'est mon premier post, je vais essayer d'être clair et concis

Voila, je veux mettre des images dans mon menu de navigation et m'en servir comme lien pour aller sur d'autre page de mon site. En fait, je dois utiliser 6 images différentes pour les 6 liens dans mon menu. Mais voila que de mettre une image en HTML pour mon menu n'est pas du tout un problème. Le problème est que j'aimerais que du texte sois afficher dans cette même image pour qu'ont puisse le voir et avoir un peu de fantaisie en affichant par exemple, un soulignage de la police de caractère à l'approche de la souris. Ex: Image d'un chapeau noir avec du texte blanc à l'intérieur. Lien suivant, cravate mauve avec texte blanc et Ainsi de suite.

J'espère sincèrement que vous allez réussire à m'aider, car après deux jours de recherche, je n'ai rien de concret. Merci a vous!

P.S.: Je travail avec Notepad++

Bonjour,

Si les images sont purement décoratives : menu classique (liste d'item par exemple) et images en background de tes liens via css.
Si les images sont porteuses de sens (intitulé des liens "en dur" sur l'image par exemple) images dans le code html et rollover via javascript.

Le tutoriel qui va bien pour le menu

Faire une recherche sur la toile pour le rollover en javascript

Re-bonsoir.

J'avais déjà lu ce tutoriel, mais rien n'y fait. Je suis le tout ligne après ligne et mon seul résultat est un rectangle noir derrière mon texte. J'avais précédemment fait mon menu, très simple sois-dis en passant, avec le même tuto et j'avais très bien réussi, mais mon employeur ma demander de changer cela pour des image en png. Voila le début du problème.

Je vais vous donner mon code, ça va aidé a mieux comprendre.

/* --- Menu de navigation --- */
#Menu { 
	font-size: small;
}

#Liens {
	margin: 0;
	padding: 0;
	text-align: center;
}

#Liens li {
	/*list-style-type: none;*/ <-- Ne pas se fier aux /**/ Une fois le code bien terminer je vais les nettoyer.
	display: inline;
	margin-top: 0px;
}

#Liens li a {
	padding: 1px 5px 2px 5px;
	background: url('contenu/images/chap.png') center no-repeat;
	color: #fff;
	display: inline;
	/*border: 1px solid;
	border-radius: 6px;
	box-shadow: 0 0 5px #333;*/
	font-family: verdana;
	text-decoration: none;
}

#Liens li a:hover, #Liens li a:focus, #Liens li a:active {
	background: url('contenu/images/chap.png') center no-repeat;
	text-decoration: underline;
} /* --- fin --- */

<!-- navigation -->
			<nav id="Menu">
				<ul id="Liens">
					<li><a href="index.html">Accueil</a></li>
					<li><a href="#">Dons</a></li>
					<li><a href="#">Recyclage</a></li>
					<li><a href="#">Peinture</a></li>
					<li><a href="#">Entreprise</a></li>
					<li><a href="#">Heures d'ouverture</a></li>
				</ul>
			</nav>
			<!-- fin de navigation -->

As-tu un exemple en ligne?

Parce que en lisant ton code je ne voit pas trop où il pourrait y avoir une erreur. Tout semble correct à première vue.

Tu peux peut-être ajouté un height et un width sur tes li afin que le bloc fasse bien la même grandeur de l'image de fond.

Numerik a écrit :
mais mon employeur ma demander de changer cela pour des image en png. Voila le début du problème.

Bonsoir,

Si cela ne vient pas de ton code ou d'un conflit dans ta CSS, cela arrive si tu n'as pas respecté la cascade et écrasé donc le 1er style par un autre situé plus bas, cela vient peut-être de tes images
tu as vérifié la taille de tes images de background?


ou tes chemins... tu as bien vérifié que les images étaient dans le bon dossier, que le chemin était le bon, que le nom du fichier image correspond, souvent c'est cela qui pêche...

Bonsoir

J'essaie du mieux que je peu de toujours respecter la cascade et d'éviter les doublons. Je suis loin d'être un expert et je suis sûr d'avoir des erreurs. Je n'ai pas d'exemple en ligne car le site n'est même pas fini d'être développer. J'ai parti une nouvelle base de zéro pour être sûr du code. Je ne veux pas de rollover, car les images ne bougeront pas et malheureusement, ayant des menu de différentes longueur, l'image va suivre le texte.

jmlapam a écrit :


Bonsoir,

Si cela ne vient pas de ton code ou d'un conflit dans ta CSS, cela arrive si tu n'as pas respecté la cascade et écrasé donc le 1er style par un autre situé plus bas, cela vient peut-être de tes images
tu as vérifié la taille de tes images de background?


ou tes chemins... tu as bien vérifié que les images étaient dans le bon dossier, que le chemin était le bon, que le nom du fichier image correspond, souvent c'est cela qui pêche...

Non le chemin de mes images est bon, à la seconde que je mets le lien de l'image dans le code html

<img src="contenu/images/blabla.png"

tout apparais, mais mon texte est a droite de mon image
Modifié par Numerik (10 Jan 2012 - 22:32)

J'ai bien essayer, mais rien n'y fait! Je comprend toujours pas pourquoi ça ne fonctionne pas...