0

ナビゲーション バーとそのリンクに何が起こったのかわかりません。それらは表示されません (Safari 6.0.5)。ヘッダーとナビゲーション コンテナーの高さと位置を調整しようとしました。答えは目の前にあるとわかっているのに見えない。Web 検索でアイデアが見つかりませんでした。ご協力ありがとうございました。

<!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;
}
4

1 に答える 1

0

ヘッダー Div がナビゲーション div の上に表示されます (ヘッダーの背景を透明に設定することで表示できます)。z-index: -1ヘッダー div にルールを追加します。

または、position: absolute;代わりにコンテナ div にルールを適用します (これはおそらくあなたが望んでいたことです)。

于 2013-10-19T18:11:27.880 に答える