Question

我不知道导航栏及其链接发生了什么。它们没有显示（Safari 6.0.5）。我试图调整我的标题和导航容器的高度和位置。我知道答案就在我面前，但是我看不到它。我的网络搜索没有找到任何想法。谢谢你的帮助。

<!DOCTYPE html>         
<html>
<head>
    <meta charset="utf-8">

    <title>MS Office Skills</title>

    <link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="container">

        <div id="header">
            <img class="pctr" src="images/lily-pads.jpg" alt="Admin extraordinaire" />         
            <!-- another img class MAY GO HERE. but for now, nothing -->   
        </div><!--/#header-->

    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Our Services</a></li>
            <li><a href="#">Read Our Blog</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div><!--/#nav--> 
   </div><!--/#container-->


</body>
</html>

/* BODY AND CONTAINER
---------------------------------*/
body { 
    font-size: 76%;
    <!--    background-image: url(../images/black.jpg); -->

<!--    background-image: url(../../CGT136as/week-07hw/website/images/bg-strip-body.jpg); -->
        background-repeat: repeat-x;
        padding: 0px;
        margin: 0px;
}

#container { 
    overflow: hidden;
    width: 100%;
    margin: 0 auto 0 auto;
}

/* HEADER AREA
---------------------------------*/
#header {
position: absolute;       
         left:0; 
    width: 100%;     
    height: 190px;
    padding: 0px;
    margin: 0px;
    background-color: #0d0d0d;
}

.pctr {
    position: relative;
        top: 0px;   <!-- 30px; -->
        left: 0px;   <!-- 0px; -->
    z-index: 20;
}

/* MAIN NAVIGATION
---------------------------------*/
#nav {
    float: left; 
    width: 900px;
    height: 53px;
    padding: 0px;
    margin: 0px;
}

#nav ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

#nav ul li {
    float: left; 
    line-height: 53px;
    padding: 0 50px 0 0;
}

#nav ul li a {
    font-family: arial, helvetica, sans-serif;
        font-size: 1.4em;
        font-weight: bold;
        color: #fff;
    text-decoration: none;
}

#nav ul li a:hover {
    color: #ff0;
    border-bottom: 2px dotted #fff;
}

Answer 1

您的标题Div最终位于导航div的顶部（您可以通过将标题的背景设置为透明来查看它）。向标头div添加z-index: -1规则。

或者将position: absolute;规则应用于容器div（这可能是你想要的）。

导航栏及其链接未显示

1 个答案: