background-color style on menu list in html
Asked by duncanb7
at 2024-09-15 03:19:21
Point:500 Replies:14 POST_ID:828528USER_ID:11059
Topic:
Hypertext Markup Language (HTML);JavaScript;Cascading Style Sheets (CSS)
I have successfully to complete normal menu list in html code with the following html code and its style
And everthing is fine and once I point one of menu list item, The one Menu icon background-color is changed from
grey to blue and text is also changed from white to red . So the style is working on the menu as follows
.menu ul li a{
float: left;
text-decoration: none; /* removes the underline from the menu text */
color: #fff; /* text color of the menu */
padding: 10.5px 11px; /* 10.5px of padding to the right and left of the link and 11px to the top and bottom */
background-color:#333;}
.menu ul li a:hover{
color: red;
background-color:#0b75b2;/*blue color I want */}
But the question is if we go to do some gradient effect on the menu bar such color change from black to white gradully.
So i go ahead to replace the code background-color:#333; in the code area by the following code:
background: -moz-linear-gradient(black, white); /* FF 3.6+ */
background: -ms-linear-gradient(black, white); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(black, white); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
background: linear-gradient(red, white); /* the standard */
}
The gradient effect is woring fine and good but the a:hover's css code is not working at all when I point to
the menu item , it is still same as before , no any change. Why ?
Do I need to use other code instead of a:hover in html , Please advise
Duncan
And everthing is fine and once I point one of menu list item, The one Menu icon background-color is changed from
grey to blue and text is also changed from white to red . So the style is working on the menu as follows
.menu ul li a{
float: left;
text-decoration: none; /* removes the underline from the menu text */
color: #fff; /* text color of the menu */
padding: 10.5px 11px; /* 10.5px of padding to the right and left of the link and 11px to the top and bottom */
background-color:#333;}
.menu ul li a:hover{
color: red;
background-color:#0b75b2;/*blue color I want */}
But the question is if we go to do some gradient effect on the menu bar such color change from black to white gradully.
So i go ahead to replace the code background-color:#333; in the code area by the following code:
background: -moz-linear-gradient(black, white); /* FF 3.6+ */
background: -ms-linear-gradient(black, white); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(black, white); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
background: linear-gradient(red, white); /* the standard */
}
The gradient effect is woring fine and good but the a:hover's css code is not working at all when I point to
the menu item , it is still same as before , no any change. Why ?
Do I need to use other code instead of a:hover in html , Please advise
Duncan
Assisted Solution
Expert: Kyle Hamilton replied at 2024-09-15 16:38:11
50 points GOOD
Since you can't reset the filter, you can trick IE with this:
Expert: gurvinder372 replied at 2024-09-15 04:33:11
Sorry, i don't have IE7 on my system. I checked in on IE8 though, and it worked there
Author: duncanb7 replied at 2024-09-15 04:29:10
Yes, it isworking on firefox and chrome , but is not working in IE7 , do you know to work on IE7?
Expert: gurvinder372 replied at 2024-09-15 03:47:36
check this code (works for me in IE8 and chrome6)
Author: duncanb7 replied at 2024-09-15 03:42:39
hover is working fine on text color with gradient menu bar but still not working on changing
background-color from gradient background
background-color from gradient background
Expert: gurvinder372 replied at 2024-09-15 03:42:25
no you didn't add background:none for active and visited pseudo-selector
Author: duncanb7 replied at 2024-09-15 03:40:38
Your post code is same as the one I sent it to you, So what I need to check ? please advise ?
Expert: gurvinder372 replied at 2024-09-15 03:37:27
check this
.menu ul li a:visited
{
color: red;
text-decoration: none;
}
.menu ul li a:active
{
background:none;
background-color:#0b75b2;
}
.menu ul li a:hover
{
background:none;
color: red;
background-color:#0b75b2;
}
.menu ul li a:visited
{
color: red;
text-decoration: none;
}
.menu ul li a:active
{
background:none;
background-color:#0b75b2;
}
.menu ul li a:hover
{
background:none;
color: red;
background-color:#0b75b2;
}
Author: duncanb7 replied at 2024-09-15 03:28:17
So you mean like this follows , Please advise
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Menu</title>
<style type="text/css">
html{
font:11px Arial, Helvetica, sans-serif; /* Sets the font size and type for the whole html page */
color:#333;} /* Sets the font color for the whole html page */
.menu{
width: 100%; /* The menu should be the entire width of it's surrounding object, in this case the whole page */
background-color: #333;} /* dark grey bg */
.menu ul{
margin: 0;
padding: 0;
float: left;}
.menu ul li{
display: inline;} /* Makes the link all appear in one line, rather than on top of each other */
.menu ul li a{
float: left;
text-decoration: none; /* removes the underline from the menu text */
color: #fff; /* text color of the menu */
padding: 10.5px 11px; /* 10.5px of padding to the right and left of the link and 11px to the top and bottom */
background-color:none;
background: -moz-linear-gradient(black, white); /* FF 3.6+ */
background: -ms-linear-gradient(black, white); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(black, white); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
background: linear-gradient(red, white); /* the standard */
}
.menu ul li a:visited{ /* This bit just makes sure the text color doesn't change once you've visited a link */
color: red;
text-decoration: none;}
.menu ul li a:active{
background-color:#0b75b2;
}
.menu ul li a:hover{
color: red;
background-color:#0b75b2;} /* change the background color of the list item when you hover over it */
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<br style="clear: left" />
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Menu</title>
<style type="text/css">
html{
font:11px Arial, Helvetica, sans-serif; /* Sets the font size and type for the whole html page */
color:#333;} /* Sets the font color for the whole html page */
.menu{
width: 100%; /* The menu should be the entire width of it's surrounding object, in this case the whole page */
background-color: #333;} /* dark grey bg */
.menu ul{
margin: 0;
padding: 0;
float: left;}
.menu ul li{
display: inline;} /* Makes the link all appear in one line, rather than on top of each other */
.menu ul li a{
float: left;
text-decoration: none; /* removes the underline from the menu text */
color: #fff; /* text color of the menu */
padding: 10.5px 11px; /* 10.5px of padding to the right and left of the link and 11px to the top and bottom */
background-color:none;
background: -moz-linear-gradient(black, white); /* FF 3.6+ */
background: -ms-linear-gradient(black, white); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(black, white); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
background: linear-gradient(red, white); /* the standard */
}
.menu ul li a:visited{ /* This bit just makes sure the text color doesn't change once you've visited a link */
color: red;
text-decoration: none;}
.menu ul li a:active{
background-color:#0b75b2;
}
.menu ul li a:hover{
color: red;
background-color:#0b75b2;} /* change the background color of the list item when you hover over it */
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<br style="clear: left" />
</div>
</body>
</html>
Accepted Solution
Expert: gurvinder372 replied at 2024-09-15 03:25:46
400 points GOOD
In the <<.menu ul li a:hover>> (line 37) also, you either need to have the gradient only, or first set
background:none first and then set the background-color
background:none first and then set the background-color
