Navigation bar and its links are not showing

StackOverflow https://stackoverflow.com/questions/19468992

  •  01-07-2022
  •  | 
  •  

Question

I don't know what happened to my navigation bar and its links. They do not show (Safari 6.0.5). I have tried to adjust the height and position of my header and nav containers. I know the answer is righht there in front of me but I don't see it. I haven't found any ideas on my web searches. Thank you for your help.

<!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;
}
Was it helpful?

Solution

Your Header Div is ending up on top of the navigation div (You can see it by setting your header's background to be transparent). Either add a z-index: -1 rule to the header div.

Or apply the position: absolute; rule to the container div instead (Which is probably what you wanted).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top