We help IT Professionals succeed at work.

Background-position - CSS Menu

2,053 Views
Last Modified: 2013-11-19
If you go to http://igniteyourbrand.net/ see the menu to the left.. I have it set up as:

      <div id="navigation">
            <ul class="navigation">
                  <li id="first"><a href="?p=about" title="about"></a></li>
                  <li id="second"><a href="?p=portfolio" title="portfolio"></a></li>
                  <li id="third"><a href="?p=clients-inquiries" title="client-inquiries"></a></li>
                  <li id="fourth"><a href="?p=employment" title="employment"></a></li>
                  <li id="five"><a href="?p=contact" title="contact"></a></li>
            </ul>
      </div>

CSS:

#navigation {
float: left;
width:150px;
background: #231f20 url(../images/nav-bottom.png) no-repeat left bottom;
padding-bottom: 110px;
}
ul.navigation {
margin:0;
padding:0;
list-style:none;
}
ul.navigation li a {
display:block;
width:150px;
height:30px; /* NOT 183px!!!!, but the height of one button! */
background:#231F20 url(../images/menu.png) no-repeat;
color:white;
text-decoration:none;
text-indent:-99999px;
}

ul.navigation li#first a {
background-position:0 0;
}
ul.navigation li#first a:hover {
background-position:0 -30px;
}

ul.navigation li#second a {
background-position:0 -60px;
}
ul.navigation li#second a:hover {
background-position:0 -90px;
}

ul.navigation li#third a {
background-position:0 -120px;
}
ul.navigation li#third a:hover {
background-position:0 -150px;
}

ul.navigation li#fourth a {
background-position:0 -180px;
}
ul.navigation li#fourth a:hover {
background-position:0 -210px;
}
ul.navigation li#five a {
background-position:0 -240px;
}
ul.navigation li#five a:hover {
background-position:0 -270px;
}

And is one image and using background-position to display the images for the rollovers. Any ideas how to get rid of the glow on the off state..when you go to the on state it is fine..I cant figure out how to remove the yellow glow.

Any thoughts?
Comment
Watch Question

Commented:
sorry i dont understand which state you are trying to get rid of.  When you say
'Any ideas how to get rid of the glow on the off state..'
do you mean the roleover glowing effect? as thats the only time your text glows but i wouldn't describe that as being the off state...

If that is what your trying to get rid of you need to remove all the  a.hover {  states for li#first  ... to #five

Analyst developer
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Albert you have the right idea! Thanks. Check this http://igniteyourbrand.net I got it a bit better any way to finish up the rest?

Thanks!
Ryan
ul.navigation li#first a {
background-position:0 0;
}
ul.navigation li#first a:hover {
background-position:0 -30px;
}
 
ul.navigation li#second a {
background-position:0 -60px;
}
ul.navigation li#second a:hover {
background-position:0 -90px;
}
 
ul.navigation li#third a {
background-position:0 -120px;
}
ul.navigation li#third a:hover {
background-position:0 -150px;
}
 
ul.navigation li#fourth a {
background-position:0 -177px;
}
ul.navigation li#fourth a:hover {
background-position:0 -207px;
}
ul.navigation li#five a {
background-position:0 -235px; //-240px
}
ul.navigation li#five a:hover {
background-position:0 -265px;
}

Open in new window

Albert Van HalenAnalyst developer
CERTIFIED EXPERT

Commented:
Just play around with the amount of pixels of the background-position bij adding / subtracting some
Albert Van HalenAnalyst developer
CERTIFIED EXPERT

Commented:
I tried it, but the best you can do is modify your image.
For example changing the background-position on the second menu item will create a small yellow line above / below the image...
Ah..i see you're right. I will redo the image up. Thank you!

Ryan
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.