CODEWITHSUNDEEP
csscss-position
indrajith
indrajith

Reputation: 13

Anchor tag not working inside absolutely positioned div

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

Upvotes: 1

Views: 9440

Answers (2)

Leslie K. Nielsen
Leslie K. Nielsen

Reputation: 41

Depending on your layout, you can use z-index set to a high enough value allowing the anchor tags to overcome the overlapping element.

Upvotes: 4

Kraz
Kraz

Reputation: 7090

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.

Upvotes: 1

Related Questions