Какой правильный CSS применить к строке меню YUI?

Question

Я пытаюсь выяснить, как лучше использовать CSS-спрайты в качестве изображений заголовков для элемента управления меню YUI.

У меня есть спрайт CSS со следующим CSS:

.navImg0{width:61px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-0px -0px;}
.navImg0:hover{width:61px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-0px -23px;}
.navImg1{width:75px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-65px -0px;}
.navImg1:hover{width:75px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-65px -23px;}
.navImg2{width:96px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-144px -0px;}
.navImg2:hover{width:96px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-144px -23px;}
.navImg3{width:65px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-244px -0px;}
.navImg3:hover{width:65px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-244px -23px;}
.navImg4{width:98px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-313px -0px;}
.navImg4:hover{width:98px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-313px -23px;}

Как я могу применить это к меню YUI?

До сих пор я применял стили кнопок navImg0, navImg1 и т. Д. К кнопкам.

Они находятся в правильном положении, но с несколькими проблемами:

• Есть линии между элементами, и мне нужно идеальный способ удалить их
• когда я переворачиваю кнопку, работает правильное переворачивание, но затем, если я скатываюсь с меню на основную часть экрана, кнопка исчезает.
• <a> теги под <li> для каждого из элементов верхнего уровня не работает (больше нет текста внутри).

У них много документации по применению CSS, но я не смог найти примеров того, как использовать CSS Sprites в качестве изображений.

Answer 1

Можете ли вы привести живой пример проблем, с которыми вы сталкиваетесь? Трудно отлаживать только на основе вашего фрагмента CSS.

Не связано с вашей проблемой, но вы можете сделать свой CSS меньше и проще в обслуживании, комбинируя правила, которые повторяются каждый раз. Что-то вроде

.navImg0, 
.navImg0:hover, 
.navImg1, 
.navImg1:hover, 
.navImg2, 
.navImg2:hover, 
.navImg3, 
.navImg3:hover, 
.navImg4, 
.navImg4:hover { background: url('/dynamicimage/navigation') no-repeat top left; }


.navImg0{width:61px;height:23px;background-position:-0px -0px;}
.navImg0:hover{width:61px;height:23px;background-position:-0px -23px;}
.navImg1{width:75px;height:23px;background-position:-65px -0px;}
.navImg1:hover{width:75px;height:23px;background-position:-65px -23px;}
.navImg2{width:96px;height:23px;background-position:-144px -0px;}
.navImg2:hover{width:96px;height:23px;background-position:-144px -23px;}
.navImg3{width:65px;height:23px;background-position:-244px -0px;}
.navImg3:hover{width:65px;height:23px;background-position:-244px -23px;}
.navImg4{width:98px;height:23px;background-position:-313px -0px;}
.navImg4:hover{width:98px;height:23px;background-position:-313px -23px;}

Answer 2

У меня есть несколько меню YUI, которые используют спрайты, но это немного сложно.

Если вы строите из разметки, это легко - просто добавьте ваши имена классов CSS в тег привязки. Если вы создаете свои меню из JavaScript, вам нужно добавить класс после того, как вы отобразите меню.

YAHOO.util.Dom.addClass(theAnchorElemnt, 'the-sprite-css-class');

Несмотря на то, что YUI предоставляет свойство конфигурации имени класса, это не то, что вам нужно. Вы должны применить спрайты на якоре.

Надеюсь, это поможет.

Answer 3

1: звучит как проблема с полями / отступами. Проверьте поля и отступы на тегах a и li.

2: я никогда не слышал об этом, когда это откатывается. Является ли изображение, которое вы используете, динамическим? В CSS, похоже, вы создаете его на лету с помощью некоторого кода на стороне сервера. Это может быть проблема или, возможно, проблема с кешем. Точно сказать не могу.

3: есть ли у вашей спрайт-листа текст того, что показано? Обычно это то, как это работает в таблице спрайтов, и вы обычно скрываете текст из-за этого. Если вы все еще хотите этот текст, проверьте наличие некоторого CSS, который устанавливает отображаемые теги : нет. Это также может быть в JavaScript YUI, я не очень знаком с YUI.;)