Solved

background-color style on menu list in html

Posted on 2011-09-15
14
535 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:
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
Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

 
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

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

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.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

772 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