Question

我对网页设计还很陌生，但对它的理解非常好。只是，当涉及到数学时，我完全迷失了O.O.我为导航栏做的几乎就是我创建了一个精灵，现在我正在使用精灵的两个不同的部分，以便能够创建悬停在其上的链接的效果。哦，还有超链接涉及btw，我用span标签阻止了所以是的。所以，如果有人可以请帮助我这里是我的乐队页面http://atfamusic.hostei.com/#（最好的火狐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; }

所以是的，请帮忙。哦，如果有人能弄明白为什么标题在互联网浏览器中没有对齐那就太棒了！：）

P.S。如果愿意做额外的中心导航栏\ m /那将是很棒的。抱歉，如果我吮吸并成为新手：P

Answer 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。让我知道它是否适合你，如果没有，我会再次尝试帮助。

Answer 2

`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%;
}

我需要一些帮助在css中对齐我的导航栏

2 个答案: