asked on

Background-position - CSS Menu

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?

gxp071

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

ASKER CERTIFIED SOLUTION

Albert Van Halen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

catonthecouchproductions

ASKER

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 Halen

Just play around with the amount of pixels of the background-position bij adding / subtracting some

Albert Van Halen

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

catonthecouchproductions

ASKER

Ah..i see you're right. I will redo the image up. Thank you!

Ryan