catonthecouchproductions
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></l i>
<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.p ng) 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?
<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
<li id="fourth"><a href="?p=employment" title="employment"></a></l
<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.p
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?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
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;
}
Just play around with the amount of pixels of the background-position bij adding / subtracting some
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...
For example changing the background-position on the second menu item will create a small yellow line above / below the image...
ASKER
Ah..i see you're right. I will redo the image up. Thank you!
Ryan
Ryan
'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