18043 sujets

Questions générales et questions de débutants

Modifier la couleur de fond dans un menu

Bonjour à tous, j'aimerais faire un menu où chaque titre disposerait d'une couleur différente.

Lorsqu'on survolerait le titre "accueil", son fond deviendrait rouge. Lorsqu'on survolerait, dans le même menu, le titre téléchargements, le fond deviendrait bleu et ainsi de suite?

Comment faire donc pour assigner plusieurs couleurs dans un même menu?

Du même genre, j'aimerais que chaque section(titres) du menu dispose de sa propre image de fond... Comment faire?

Cordialement
Modifié par kisscool (22 May 2011 - 18:49)
Oups, pardon c'est qu'en fait, je ne suis pas super doué en css... Je bidouille beaucoup et j'apprends en surmontant des problèmes mais là, je n'ai aucune connaissance pouvant m'aider à faire cela donc aucune source...

Mais peut-être que vous pourrez m'aider à partir de cela :

du côté css j'ai
a écrit :

ul#menu li {
display : inline;

}
li.accueil{
background-image: url(image/contacts.png);
}


et du côté html j'ai ceci :
a écrit :
<ul id="menu">
<li class="accueil"><a href="#" title="Accueil">Accueil</a></li>


Est-ce dans cette optique-là que je dois continuer? Si oui, j'ai déjà un problème : l'image s'affiche en tout petit sur le côté du titre du bouton...

Merci pour vos conseils !
Voici quelque chose de tout simple pour t'inspirer. En ce qui concerne ton image de fond, je te conseille de taper "background-image background-repeat background-position" dans notre ami commun, à savoir Google Smiley cligne 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Exemple de menu tout simple</title>

<style type="text/css">
ul#menu li { 
	display : inline;
	padding: 5px;
	background-color: yellow;
	margin-right:-5px;
	font: normal 14px arial,verdana,helvetica,sans-serif;
	cursor: pointer;
}
ul#menu li a:link {
	text-decoration:none;
	color:black;
}
ul#menu li.accueil:hover{
	background-color: red;
}
ul#menu li.telechargements:hover{
	background-color: blue;
}
ul#menu li.prix:hover{
	background-color: orange;
}
ul#menu li.contact:hover{
	background-color: pink;
}
</style>
</head>
<body>
<ul id="menu">
	<li class="accueil"><a href="#" title="Accueil">Accueil</a></li>
	<li class="telechargements"><a href="#" title="Téléchargements">Téléchargements</a></li>
	<li class="prix"><a href="#" title="Prix">Prix</a></li>
	<li class="contact"><a href="#" title="Contact">Contact</a></li>
</ul>
</body>
</html>
Merci pour vos conseils... pour les images, voilà comment je procède :

css :

a écrit :
/*Menu*/

ul#menu li {
display : inline;
}
ul#menu li.accueil a{
background-image: url(image/accueil.png);
padding: 5px 10px 0px 5px;
}
ul#menu li.accueil a:hover{
background-image: url(image/accueil_top.png);
}


HTML :
a écrit :
<ul id="menu">
<li class="accueil"><a href="#" title="Accueil">Accueil</a></li>


Voilà à quoi ça ressemble :
http://images4.hiboox.com/images/2111/diapodf2a177f4e21ad971389d1e21ce957f5.jpg

alors que mon image devrait être comme ceci :

http://images4.hiboox.com/images/2111/diapoea1021e1fb50645e1c904d73b15092d5.png

En gros, mon image est coupée... Que faire?

Merci pour vos conseils et j'espère être assez explicite !
Et les css3 border radius arrivèrent ...
pour faire ce que tu veux faire avec des images il en faudrait 3 à cause de l'étirement des images ... d'où l'invention des nine patch (*.9.png) par google pour la plateforme android au passage ... ce serait super ça sur le web ...


donc avant les border-radius , il fallait pour faire un joli onglet arrondi , une image pour le bord gauche, une image pour le milieu et une pour le bord droit... donc obligation d'avoir des éléments autour du <li> où du <a> juste pour la déco .....

là c'est plus simple avec les bordures arrondies ...
cf l'article de Raphaël : http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html
Oué mais ça ne fonctionne pas sous IE ... bizarrement ... Ai-je mal fait quelque chose?

Je code en général sous Topstyle et il ne le reconnait pas

Pour IE, probablement car il n'est pas à jour sur la dernière version ... Mais le hic, c'est que ce n'est supporté que par les derniers navigateurs, encore peu mis-à-jour et donc pas très peu de visiteurs... Smiley decu
Modifié par kisscool (23 May 2011 - 21:28)
Euh si les utilisateurs utilisent firefox /chrome /safari ou opéra ils ont souvent la dernière version ... ( aucun souci avec les navigateurs natifs sous Debian Lenny par exemple ... )
pour les windowsiens sous seven le passage sous IE9 a quasi été imposé lors des mises à jour

il reste les irréductibles sous XP/Vista avec IE7 , tu as alors la solution indiquée par Raphaël dans son article : CSS3pie

PS : je viens de regarder les stats de mes sites et parmi les 15 premiers navigateurs aucun IE ... à savoir que j'héberge moi-même mes images que je poste sur les forums donc j'ai des accès pour tous ceux qui voient mes images sur les topics des forums et leurs navigateurs sont comptabilisés , le site de mon mari a eu la visite de ie8 et ie9 ( en dernière position il a le navigateur ipad ...) pas mal de firefox , de chrome ... donc bon faut pas croire que les gens ne mettent pas à jour leur navigateur ... en plus c'est souvent automatique ...

PS2: bon bien sûr il y a les gens qui surfent à partir d'ordinateurs pas à jour depuis leur entreprise ...
Modifié par Arialia (23 May 2011 - 22:36)
Bon j'ai un soucis, j'ai créé le menu et j'ai mis une image de fond (qui fait un onglet arrondi). Le hic, c'est que l'image ne s'affiche pas car le bouton du menu (<a>) n'est pas assez grand... J'aimerais soit définir la taille du bouton pour afficher entièrement l'image de fond...

Je fais souvent ça pour mes bannières : je créé un div ban et je lui mets une image en background-image. Ensuite, je définis le width et le height du div pour afficher la bannière complète... Par contre pour le bouton, ça fonctionne pas Smiley decu

Que faire?
Sujet clos
Aller à