Проблема с позиционированием фона меню CSS - PullRequest
Новая
       3

Проблема с позиционированием фона меню CSS

1 голос
/ 08 августа 2011

Привет, у меня есть меню css, но есть проблема, и я не могу понять, почему это происходит, моя проблема в том, что у меня фон png с кнопками normal, hover и выбранными состояниями.Фоновое изображение выглядит так:

Menu buttons sprite

Но я вижу это на странице вот так, в неправильном порядке.Код CSS включен ниже.Пожалуйста, помогите!

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;}

Ответы [ 2 ]

3 голосов
/ 08 августа 2011

Ваша первая координата должна быть отрицательной. Вам нужно переместить фоновое изображение влево, а не вправо - вы получаете эффект обтекания.

Например: 

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

должно быть 

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

Когда вы перемещаете фоновое изображение на 240 пикселей вправо, оно оборачивается, и вы видите желтый фон. Когда вы перемещаете фоновое изображение на 240 пикселей в влево , вы видите красный фон, который является желаемым эффектом.

1 голос
/ 08 августа 2011

можно использовать CSS border s для того же эффекта

пример jsfiddle

необходимо настроить line-height для :hover и .current изменения ширины границы, затем назначить цветовые классы для установки цветов top и bottom. 

#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;
}
...