Question

我正在尝试找出使用CSS sprites作为YUI menu control的标题图像的最佳方法。

我有一个带有以下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缩小＆amp;通过组合每次重复的规则更容易维护。像

这样的东西

.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

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

2：当它回滚时，我从未听说过这种情况。您使用的图像是动态的吗？在css中，看起来你正在使用一些服务器端代码动态创建它。这可能是问题，或者可能是某种缓存问题。不确定。

3：你的spritesheet上是否有关于显示内容的文字？通常这是它在spritesheet中的工作方式，因此你通常会隐藏文本。如果您仍想要此文本，请检查一些将 a 标记设置为 display：none 的css。它也可能在YUI javascript中，我对YUI并不十分熟悉。 ;）

Answer 3

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

如果你是从标记构建的，那很容易 - 只需在锚标记中添加你的css类名。如果您是从javascript构建菜单，则必须在渲染菜单后添加该类。

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

即使YUI提供了一个classname配置属性，它也不是你想要的那个。你需要在锚点上应用精灵。

希望有所帮助。

什么是正确的CSS应用于YUI菜单栏？

3 个答案: