1

我对网页设计相当陌生，但非常了解它。只是，当涉及到数学时，我完全迷失了 OO 我为导航栏所做的几乎是我创建了一个精灵，现在正在使用精灵的两个不同部分来创建悬停链接的效果超过。哦，顺便说一句，我也用 span 标签屏蔽了超链接，所以是的。因此，如果有人可以请帮助我，这是我的乐队页面http://atfamusic.hostei.com/#（在 Firefox idky 中效果最好，仍然需要解决这个问题），所以没有太多关于它的内容。代码是（用于CSS）

#navigation { margin:0; padding:0; width:900px; height:50px;
              background-image:url(navigation-background.gif); }

#navigation li { margin:0; padding:0; list-style-type:none; display:inline; height:44px;
                 text-align:center; float:left; line-height:40px; }

#navigation a { display:block; height:44px; }
#navigation a:hover { background-image:url(navigation-background.gif); }

#nav-bio {width:81px; }
#nav-bio a:hover { background-position:85px bottom; }

#nav-photos { width:116px; }
#nav-photos a:hover { background-position:-166px bottom ; }

#nav-music { width:102px; }
#nav-music a:hover { background-position:-197px bottom ; }

#nav-videos { width:108px; }
#nav-videos a:hover { background-position:-278px bottom; }

#nav-external sites { width:202px; }
#nav-external sites a:hover { background-position:-556px bottom; }

#nav-merch { width:120px; }
#nav-merch a:hover { background-position:-1112px bottom; }

#navigation span { display:none; }

所以是的请帮助。哦，如果有人能弄清楚为什么标题在 Internet Explorer 中没有对齐，那就太好了！:)

PS如果愿意做额外的中心导航栏以及 \m/ 那会很棒。对不起，如果我很烂并且是新手：P

4

2 回答 2

1

嗨@xripper，下面的 HTML 和 CSS 将解决您的导航问题。我从 ul li a 中删除了标签，因为它们不是必需的，而是使用 css 缩进文本，这意味着屏幕阅读器等仍然可以访问 a。

<ul id="navigation">
    <li id="nav-bio"><a href="#">Bio</a></li>

    <li id="nav-photos"><a href="#">Photos</a></li>

    <li id="nav-music"><a href="#">Music</a></li>

    <li id="nav-videos"><a href="#">Videos</a></li>

    <li id="nav-externalsites"><a href="#">External Sites</a></li>

    <li id="nav-merch"><a href="#">Merch</a></li>
</ul>

并且以下 css 将修复您在导航上的精灵

ul#navigation {
    margin: 0 auto;
    padding: 0;
    width: 900px;
    height: 50px;
    background-image: url(navigation-background.gif);
    }

    ul#navigation li {
        margin: 0;
        padding: 0;
        list-style-type: none;
        display: inline;
        height: 50px;
        text-align: center;
        float: left;
        line-height: 40px;
        position: relative;
        }

        ul#navigation li a {
            display: block;
            height: 50px;
            text-indent: -999em;
            }

        ul#navigation li a:hover {
            background: url(navigation-background.gif) bottom left no-repeat;
            }

    ul#navigation li#nav-bio {
        width: 81px;
        margin-left: 84px;
        }

        ul#navigation li#nav-bio a:hover {
            background-position: -84px bottom;
            }

    ul#navigation li#nav-photos {
        width: 116px;
        }

        ul#navigation li#nav-photos a:hover {
            background-position: -165px bottom;
            }

    ul#navigation li#nav-music {
        width: 102px;
        }

        ul#navigation li#nav-music a:hover {
            background-position: -281px bottom;
            }

    ul#navigation li#nav-videos {
        width: 108px;
        }

        ul#navigation li#nav-videos a:hover {
            background-position: -383px bottom;
            }

    ul#navigation li#nav-externalsites {
        width: 202px;
        }

        ul#navigation li#nav-externalsites a:hover {
            background-position: -491px bottom;
            }

    ul#navigation li#nav-merch {
        width: 120px;
        }

        ul#navigation li#nav-merch a:hover {
            background-position: -693px bottom;
            }

我相信这将跨浏览器工作，但我目前无法访问 IE。让我知道它是否对您有用，如果没有，我会尝试再次提供帮助。

于 2012-05-06T11:01:41.783 回答
0 
`enter code here`plz use this css



For bio
#nav-bio {
    width: 166px;
}
#nav-bio a:hover {
    background-position: 0px 90%;
}

For Photos
#nav-photos a:hover {
    background-position: 734px 90%;
}

For music
#nav-music a:hover {
    background-position: -282px 90%;
}

For Videos
#nav-videos a:hover {
    background-position: -384px 90%;
}
For external(plz change the class name in html code)
#nav-external {
    width: 201px;
}
#nav-external a:hover {
    background-position: -492px 90%;
}

for merch
#nav-merch {
    width: 120px;
}
#nav-merch a:hover {
    background-position: -693px 90%;
}
于 2012-05-06T09:16:29.387 回答