Solved

background-color style on menu list in html

Posted on 2011-09-15
14
537 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:
gurvinder372 earned 400 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:gurvinder372
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
Independent Software Vendors: 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:gurvinder372
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:gurvinder372
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:gurvinder372
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 100 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 100 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

Independent Software Vendors: 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!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

749 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