CODEWITHSUNDEEP
csscss-sprites
skuul
skuul

Reputation: 115

CSS menu background positioning problem

Hi i have a css menu but there is a problem and i cant figure out why it happens my problem is i have a png background with buttons normal, hover and selected states. Background image is like this

Menu buttons sprite

But i see it on page like this, with wrong order. Css code is included below. Please help!

enter image description here

#menu {padding:0; margin:0; list-style:none; width:560px; height:42px; }

#menu li {float:left;}
#menu li.last {margin:0;}
#menu li a {display:block; height:42px; width:80px; padding:0; float:left; color:#666666; text-decoration:none; font-family:MuseoSans700; font-size:12px; text-align:center; cursor:pointer;}
#menu li a b {position:relative; top:13px; font-weight:normal;}

#menu li a b.current { font-family: MuseoSans900;}

#menu li#home a {background: url(nav_bg.png) 0px 0px ;}
#menu li#single a {background:url(nav_bg.png) 80px 0 ;}
#menu li#dropdown a {background: url(nav_bg.png) 160px 0 ;}
#menu li#dropline a {background: url(nav_bg.png) 240px 0 ;}
#menu li#flyout a {background:url(nav_bg.png) 320px 0 ;}
#menu li#support a {background:url(nav_bg.png) 400px 0 ;}
#menu li#contact a {background: url(nav_bg.png) 480px 0 ;}

#menu li#home a:hover {background:url(nav_bg.png) 0 -42px;}
#menu li#single a:hover {background:url(nav_bg.png) 80px -42px;}
#menu li#dropdown a:hover {background:url(nav_bg.png) 160px -42px;}
#menu li#dropline a:hover {background:url(nav_bg.png) 240px -42px;}
#menu li#flyout a:hover {background:url(nav_bg.png) 320px -42px;}
#menu li#support a:hover {background:url(nav_bg.png) 400px -42px;}
#menu li#contact a:hover {background:url(nav_bg.png) 480px -42px;}

#menu li#home a.current {background:url(nav_bg.png) 0 -84px;}
#menu li#single a.current {background:url(nav_bg.png) 80px -84px;}
#menu li#dropdown a.current {background:url(nav_bg.png) 160px -84px;}
#menu li#dropline a.current {background:url(nav_bg.png) 240px -84px;}
#menu li#flyout a.current {background:url(nav_bg.png) 320px -84px;}
#menu li#support a.current {background:url(nav_bg.png) 400px -84px;}
#menu li#contact a.current {background:url(nav_bg.png) 480px -84px;}

Upvotes: 1

Views: 881

Answers (2)

MikeM
MikeM

Reputation: 27415

can use CSS borders for the same effect

example jsfiddle

need to adjust line-height for :hover and .current border width changes, then assign color classes to set the top and bottom border colors.

#menu a {
    border-top:solid 2px;
    border-right:solid 1px #B5B6B4;
    border-bottom:solid 2px;
    border-left:solid 1px #E3E3E3;
}
#menu a:hover {border-top-width:3px;height:39px;line-height:37px;}
#menu .current {border-top-width:6px;height:36px;line-height:32px;}

#menu .lightblue {
    border-top-color:#B1C9E4;
    border-bottom-color:#B1C9E4;
}
#menu .red {
    border-top-color:#E30613;
    border-bottom-color:#E30613;
}
#menu .blue {
    border-top-color:#242457;
    border-bottom-color:#242457;
}
#menu .orange {
    border-top-color:#F18924;
    border-bottom-color:#F18924;
}

Upvotes: 1

SeanCannon
SeanCannon

Reputation: 78006

Your first coordinate needs to be negative. You need to move the background image to the left instead of to the right - you're getting the wrap-around effect.

For example: 

#menu li#dropline a {background: url(nav_bg.png) 240px 0 ;}

should be 

#menu li#dropline a {background: url(nav_bg.png) -240px 0 ;}

When you move the background image 240px to the right, it wraps around and you see the yellow background. When you move the background image 240px to the left you see the red background which is the desired effect.

Upvotes: 3

Related Questions