?
Solved

background-color style on menu list in html

Posted on 2011-09-15
14
Medium Priority
?
548 Views
Last Modified: 2012-05-12
Dear Expert,
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

/* Original menu list html program without gradient effect */

!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:#333;
	 	
    
}

.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>

Open in new window

0
Comment
Question by:duncanb7
  • 6
  • 5
  • 3
14 Comments
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 1200 total points
ID: 36541980
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
0
 
LVL 13

Author Comment

by:duncanb7
ID: 36541986
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>
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36542011
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;
}
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 13

Author Comment

by:duncanb7
ID: 36542027
Your post code is same as the one I sent it  to you,  So what I need to check ? please advise ?
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36542031
no you didn't add background:none for active and visited pseudo-selector
0
 
LVL 13

Author Comment

by:duncanb7
ID: 36542032
hover is working fine on text color with gradient menu bar but still not working on changing
background-color from gradient background
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36542055
check this code (works for me in IE8 and chrome6)
<!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;
} 

.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
{ 
      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;
} 
</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>

Open in new window

0
 
LVL 13

Author Comment

by:duncanb7
ID: 36542204
Yes, it isworking on firefox and chrome , but is not working in IE7 , do you know to work on IE7?
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36542213
Sorry, i don't have IE7 on my system. I checked in on IE8 though, and it worked there
0
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 300 total points
ID: 36546676
Since you can't reset the filter, you can trick IE with this:
 
.menu ul li a:hover
{
    color: red;
    background-color:#0b75b2;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0b75b2', endColorstr='#0b75b2'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#0b75b2', endColorstr='#0b75b2')"; /* IE8+ */  
  
}

Open in new window

0
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 300 total points
ID: 36546680
oops, I didn't mean to take out the background:none; Put that back in.

.menu ul li a:hover
{
    background:none;
    color: red;
    background-color:#0b75b2;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0b75b2', endColorstr='#0b75b2'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#0b75b2', endColorstr='#0b75b2')"; /* IE8+ */  
  
}

Open in new window

0
 
LVL 13

Author Closing Comment

by:duncanb7
ID: 36552472
Thanks fort work your reply, finaly it works if change it
to

.menu ul li a:hover{
      
/*background:none;
 background-color:#0b75b2;*/
 color: white;
   
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(black, white); /* the standard */

      }
0
 
LVL 13

Author Comment

by:duncanb7
ID: 36552486
And  also need to put back href="javascript:home();" to replace any onlick="home();" in <a> tag
since onclick is not working with a:hover for all broswer  
 
<li><a href="#">Home</a></li>
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36552520
Thanks for the points.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question