0

I am trying to figure out the best way to use CSS sprites as header images for a YUI menu control.

I have a CSS sprite with the following 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;}

How can I apply this to a YUI menu?

So far I've applied the navImg0, navImg1 etc. styles to the buttons.

They come up in the right position but with a few problems:

  • there are lines between the items and i need to ideal way to remove them
  • when i rollover the button the correct rollover works, but then if i roll off the menu and onto the main part of the screen the button disappears
  • the <a> tags under the <li> for each of the top level items doesnt work (theres no text inside anymore).

They have a lot of documentation about applying CSS but I couldn't find any examples of how to use CSS Sprites as images.

4

3 回答 3

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;}
于 2009-04-07T15:24:23.720 回答
0

1：听起来像边距/填充问题。检查a和li标签的边距和内边距。

2：我从来没有听说过它回滚时会发生这种情况。您使用的图像是动态的吗？在 css 中，看起来您正在使用一些服务器端代码动态创建它。这可能是问题所在，也可能是某种缓存问题。没有把握。

3：您的精灵表是否已经在显示的内容上显示了文本？通常这就是它在 spritesheet 中的工作方式，因此您通常会隐藏文本。如果您仍然想要此文本，请检查一些将a标签设置为显示的 CSS：无。它也可能在 YUI javascript 中，我对 YUI 不是很熟悉。;)

于 2009-04-07T13:48:28.973 回答
0

我有几个使用精灵的 YUI 菜单，但这有点棘手。

如果您从标记构建，这很容易 - 只需在锚标记中添加您的 css 类名称。如果您从 javascript 构建菜单，则必须在呈现菜单后添加类。

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

即使 YUI 提供了一个类名配置属性，它也不是您想要的。您需要在锚点处应用精灵。

希望有帮助。

于 2009-06-26T00:58:20.470 回答