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

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

0 голосов
/ 07 апреля 2009

Я пытаюсь найти наилучший способ использовать спрайты 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 в качестве изображений.

Ответы [ 3 ]

1 голос
/ 07 апреля 2009

Можете ли вы привести живой пример проблем, с которыми вы сталкиваетесь? Трудно отлаживать только на основе вашего фрагмента 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;}
0 голосов
/ 26 июня 2009

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

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

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

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

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

0 голосов
/ 07 апреля 2009

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

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

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

...