28172 sujets

CSS et mise en forme, CSS3

Adapter une image pour chaque li hover

bonsoir
je viens d'adapter une petite barre de navigation voici ci-dessous :

html:

<!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=utf-8" />
	<link rel="stylesheet" href="CSS3 Menu_files/css3menu1/style.css" type="text/css" />

</head>
<body style="background-color:#EBEBEB">
<ul id="css3menu1" class="topmenu">
	<li class="topfirst"><a href="#" title="Item 0">Item 0</a></li>
	<li class="topmenu"><a href="#" title="Item 1">Item 1</a></li>
	<li class="toplast"><a href="#" title="Item 2">Item 2</a></li>
</ul>


<p style="display:none"><a href="http://css3menu.com/">CSS Rollover Menus Css3Menu.com</a></p>
</body>
</html>


css :

ul#css3menu1,ul#css3menu1 ul{
	margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;}
ul#css3menu1 ul{
	display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#FFFFFF;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;}
ul#css3menu1 li:hover>*{
	display:block;}
ul#css3menu1 li:hover{
	position:relative;}
ul#css3menu1 ul ul{
	position:absolute;left:100%;top:0;}
ul#css3menu1{
	display:block;font-size:0;float:left;}
ul#css3menu1 li{
	display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1>li,ul#css3menu1 li{
	margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
	outline-style:none;}
ul#css3menu1 a{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Trebuchet MS,sans-serif;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#c1c1c1;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
	float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
	text-align:left;padding:4px;background-color:#FFFFFF;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma,sans-serif;color:#000;text-decoration:none;}
ul#css3menu1 li:hover>a{
	background-color:#f8ac00;border-color:#C0C0C0;border-style:solid;font:bold 14px Trebuchet MS,sans-serif;color:#000000;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menu1 img{
	border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu1 img.over{
	display:none;}
ul#css3menu1 li:hover > a img.def{
	display:none;}
ul#css3menu1 li:hover > a img.over{
	display:inline;}
ul#css3menu1 span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a{
	background-color:#FFFFFF;background-image:none;font:14px Tahoma,sans-serif;color:#868686;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
	height:22px;line-height:22px;border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu1 li.topfirst:hover>a{
	line-height:22px;}
ul#css3menu1 li.topmenu>a{
	height:22px;line-height:22px;}
ul#css3menu1 li.topmenu:hover>a{
	line-height:22px;}
ul#css3menu1 li.toplast>a{
	height:22px;line-height:22px;border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;}
ul#css3menu1 li.toplast:hover>a{
	line-height:22px;}


je souhaiterais créer pour chaque item a:hover une couleur différente. Comment puis-je procéder?

merci d'avance
Salut,
Pour faire ce que tu demandes, 2 techniques : soit utiliser des sélecteurs CSS3, soit utiliser des classes.

Pour les sélecteurs CSS3, utilise la pseudo-classe :nth-child(), tu peux avoir un exemple ici: http://www.css3create.com/Menu-avec-coins-arrondis-et

Sinon, comme tu as déjà des classe, utilises les sur les li,

li.topfirst a{bacground:red;}
li.topmenu a{bacground:green;}
li.toplast a{bacground:blue;}
vdo93 a écrit :
Salut,
Pour faire ce que tu demandes, 2 techniques : soit utiliser des sélecteurs CSS3, soit utiliser des classes.

Pour les sélecteurs CSS3, utilise la pseudo-classe :nth-child(), tu peux avoir un exemple ici: http://www.css3create.com/Menu-avec-coins-arrondis-et-degrades

Sinon, comme tu as déjà des classe, utilises les sur les li,

li.topfirst a{bacground:red;}
li.topmenu a{bacground:green;}
li.toplast a{bacground:blue;}

Modifié par vdo93 (16 Jan 2011 - 21:59)
Sujet clos
Aller à