Home/ Questions/Q 6599907
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T18:33:09+00:00

I have created an unordered list inside a div which is absolutely positioned. When

  • 0

I have created an unordered list inside a div which is absolutely positioned. When I add an href inside of the li items, it’s not working.

For example: <li><a href="index.html">Home</a></li> is still not clickable.

Here is the CSS (the nav is the wrapping div):

#nav
{
    background:#666666;
    position:absolute;
    top: 270px;
    left:150px;
    height:40px;
}
#nav ul li 
{
    position:relative;
    top:-8px;
    left: -15px;
    display:inline;
    padding: 0 33px;
    font-size:14px;
    border-right: 2px solid #333333;    
    margin:auto;
    color: #efefef;
}

Here’s the full code. I also figured out that some other element is overlapping, but don’t know what to do.

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>Good Brothers Film Entertainment</title>
            <link rel="stylesheet" href="css/default.css" type="text/css"/>
        </head>
        <body>
            <div id="container">
              <div id="header">
                <img src="images/logo2.png" id="logo2"/>
                <img src="images/logo.png"/>         
              </div>

              <div id="nav">
               <ul>
                 <li><span>H</span>OME</li>
                 <li><span>S</span>ERVICES</li>
                 <li><span>R</span>EELS</li>
                 <li><span>G</span>ALLERY</li>
                 <li><span>A</span>BOUT US</li>
                 <li><span>C</span>ONTACTS</li>
                 <li><span>A</span>FFILIATES</li>
               </ul>
              </div>
             </div>
              <img src="images/inner-background.png" id="inner-background" />
            <p id="welcome">~<span>W</span>ELCOME~</p> 
            <img src="images/good-brother.png" id="good-brother"/>
            <img src="images/working-together.png" class="work-together" />
            <img src="images/and.png" class="work-together" />
            <img src="images/exceeding-limits.png" class="work-together" />
            <img src="images/men.png" class="men" />
            <img src="images/men-shadow.png" class="men" />
            <img src="images/footer.png" id="footer" />
            <div id="video">
              <!--  <iframe width="560" height="315" src="http://www.youtube.com/embed/V0LQnQSrC-g" frameborder="0" allowfullscreen></iframe> -->
            </div>
        </body>
    </html>

The CSS
body,html{margin:0;border:0;padding:0;}

#container
{
   width:1360px;
   height:1024px;
   background:url(../images/background.png);
}

#logo2
{
  position:absolute;    
}

#nav
{
    background:#666666;
    position:absolute;
    top: 270px;
    left:150px;
    height:40px;
}
#nav ul li 
{
    position:relative;
    top:-8px;
    left: -15px;
    display:inline;
    padding: 0 33px;
    font-size:14px;
    border-right: 2px solid #333333;    
    margin:auto;
    color: #efefef;
}
#nav li span
{
    font-size: 21px;
}
#nav li:last-child
{
    border:none;
}
#inner-background
{
    position:absolute;
    top: 0px;
}
#welcome
{
    color:#ffffff;
    top:300px;
    left:300px;
    font-weight:bold;
    font-size:24px;
    position:absolute;
}
#welcome span
{
    font-size: 28px;
}
#good-brother
{
  top:1px;
  position:absolute;    
}
.work-together
{
    top: -5px;
    position:absolute;
}
#video
{
 top: 400px;
 left:600px;
 height:315px;
 width:560px;
 background: #eeeeee;
 position: absolute;

}
.men,#footer
{
    top:1px;
     position: absolute;    
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Still work with the complete code, but with no images.

    I suspect that your problem is the #footer image
    (I can confirm it is if the image is over 300 pixel high!)

    Here’s why : 

    .men,#footer
{
    top:1px;
     position: absolute;    
}

    Since this image is defined after, it’s put on top. It’s either that image or another one big enough to cover your header.

    This css declaration could help find if an image is the culprit : 

    img {border:3px solid red !important;}

    If you have firebug or other similar developpement tool, right click on your link and do inspect element : if you have an element over it, it should be selected.

    Note : if you dont have firebug or something similar… Get one asap.

    • 0