?
Solved

background-color style on menu list in html

Posted on 2011-09-15
14
Medium Priority
?
540 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 
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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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 style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

777 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