Hyperlinks not activating?

twilitegxa · October 21, 2010

Can anyone tell me why my hyperlinks aren't working? They are unclickable for some reason. Is one of my other div tags blocking them for some reason? I'm not experiencing this problem in any of the other div blocks. Here is my code for that section:


<div id="icons">
<a href="#"><img src="enewsletter_btn.png" alt="e-Newsletter" height="25px" /></a>
<a href="http://www.facebook.com/pages/Southern-Television-Film-Summit/120203984688166"><img src="Facebook_icon.png" alt="Facebook Icon" height="25px" width="25px"/></a>
<a href="https://twitter.com/STAFSummit"><img src="Twitter_icon.png" alt="Twitter Icon" height="25px" width="25px" /></a>
<a href="#"><img src="Linkedin_icon.png" alt="Linked In Icon" height="25px" width="25px" /></a>
<>

Here is the entire page:


<body id="home">
<div id="container">
<img src="stafs_logo.png" alt="Southern Television & Film Summit" height="200px" width="250px" />
<div id="banner">
placeholder for banner<>
<div id="info">
<br />February 25, 26, 27<br />
2011<br />
In Atlanta Motown<br />
Atlantic Station<br /><br />
<>
<div id="icons">
<a href="#"><img src="enewsletter_btn.png" alt="e-Newsletter" height="25px" /></a>
<a href="http://www.facebook.com/pages/Southern-Television-Film-Summit/120203984688166"><img src="Facebook_icon.png" alt="Facebook Icon" height="25px" width="25px"/></a>
<a href="https://twitter.com/STAFSummit"><img src="Twitter_icon.png" alt="Twitter Icon" height="25px" width="25px" /></a>
<a href="#"><img src="Linkedin_icon.png" alt="Linked In Icon" height="25px" width="25px" /></a>
<>
<div id="content">
<div id="nav">
<a href="STAFS.php" id="homenav">Home</a> | <a href="about.php" id="about">About</a> | <a href="sponsorship.php" id="sponsorship">Sponsorship</a> | <a href="attend.php" id="attend">Attend</a>
<>


<div id="placeholder1">
Placeholder 1<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut nisl a urna vestibulum vehicula. Praesent euismod facilisis ultrices. In hac habitasse platea dictumst. Aliquam ornare, velit id lobortis mollis, dui erat feugiat ipsum, vitae fringilla orci tortor eu nunc. Nulla commodo vulputate ante nec mollis. Etiam rutrum, elit et placerat semper, sem erat aliquam ante, non iaculis ligula diam in ipsum. Curabitur vitae dolor sit amet dui fringilla varius. Phasellus eu mauris non nunc commodo mollis. Integer dictum sodales felis, eget feugiat tellus aliquam eu. Praesent tincidunt pulvinar tellus quis pharetra. Donec porta urna in nisl viverra convallis id consequat sapien. Aenean in leo sit amet lorem vestibulum tempor vitae quis purus. Donec eu magna eu massa hendrerit condimentum. Donec molestie sapien id ante molestie ac molestie quam faucibus.<>
<div id="placeholder2">
Placeholder 2<br />
Nam a lorem augue. Quisque interdum venenatis sollicitudin. Vivamus ut metus sed risus fringilla suscipit eget et magna. In eu elit lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris gravida pellentesque justo at pharetra. Suspendisse odio risus, ullamcorper non scelerisque non, molestie tincidunt lacus. Aenean tempus libero sit amet tellus posuere accumsan. Nunc ornare odio eget magna commodo pharetra. Donec vel turpis ut risus rhoncus fermentum ac id nunc. Vestibulum metus turpis, tincidunt suscipit facilisis nec, mollis in nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim risus nec quam aliquet a dictum purus feugiat. Vivamus id nunc ipsum. Praesent in lectus id dolor tempor facilisis eu eu diam. Etiam quis elit nisl. Sed id urna lorem. Nullam facilisis, dui ut vestibulum vulputate, nunc neque interdum ipsum, vitae adipiscing augue est eu eros. Nullam laoreet, nunc id accumsan interdum, nulla erat pulvinar felis, vitae dictum erat quam id lectus. Suspendisse urna massa, commodo at luctus eu, gravida sed massa.
<>
<div id="placeholder3">
Placeholder 3<br />
Vestibulum auctor lorem elit. Curabitur id quam eu quam congue pellentesque. Aenean venenatis magna sed tortor tempus bibendum ut vitae dolor. In hac habitasse platea dictumst. Mauris in ligula sapien, congue vestibulum diam. Quisque id euismod elit. Nulla rhoncus pellentesque lacus, congue facilisis tellus faucibus vel. Nulla dictum iaculis leo in ullamcorper. Fusce pulvinar vulputate mi non posuere. Morbi et sapien massa, et porttitor justo. Praesent viverra tempus elit et cursus. Vestibulum lacinia orci a eros lobortis sodales. Aliquam accumsan faucibus quam, ac aliquam mi tempus ut. Aliquam in turpis odio, id dictum est. Pellentesque mauris nibh, pharetra vestibulum ornare non, tincidunt sit amet lacus. Curabitur dictum leo nunc. Quisque eu nisi vel diam vehicula vehicula ut vel elit. Mauris pellentesque aliquam tellus non dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<>
<>
<div id="placeholder4">
<div id="headline">
<u>Headline</u><br /><br />
<>
<div id="image">
<img src="#" height="100px" width="100px" alt="Image1" />
<>
<div id="story">
Nam a lorem augue. Quisque interdum venenatis sollicitudin. Vivamus ut metus sed risus fringilla suscipit eget et magna. In eu elit lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris gravida pellentesque justo at pharetra. Suspendisse odio risus, ullamcorper non scelerisque non, molestie tincidunt lacus. Aenean tempus libero sit amet tellus posuere accumsan. Nunc ornare odio eget magna commodo pharetra. Donec vel turpis ut risus rhoncus fermentum ac id nunc. Vestibulum metus turpis, tincidunt suscipit facilisis nec, mollis in nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim risus nec quam aliquet a dictum purus feugiat. Vivamus id nunc ipsum. Praesent in lectus id dolor tempor facilisis eu eu diam. Etiam quis elit nisl. Sed id urna lorem. Nullam facilisis, dui ut vestibulum vulputate, nunc neque interdum ipsum, vitae adipiscing augue est eu eros. Nullam laoreet, nunc id accumsan interdum, nulla erat pulvinar felis, vitae dictum erat quam id lectus. Suspendisse urna massa, commodo at luctus eu, gravida sed massa. <a href="#"> Read More...</a>
<>
<>
<>
<div id="feeds">
<div id="twitter">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('STAFSummit').start();
</script>
<>
<div id="facebook">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FSouthern-Television-Film-Summit%2F120203984688166&width=250&colorscheme=light&connections=0&stream=true&header=true&height=427" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:427px;" allowTransparency="true"></iframe>
<>
<div id="news">
news feed<>
<>
</body>

And here is my CSS just in case it's part of the problem:


#container {
width: 1000px;
padding-left: 25px;
}


#feeds {
padding-left: 25px;
position: relative;
top: -150px;
}


#banner {
position: relative;
top: -200px;
left: 270px;
border: dotted black 2px;
height: 150px;
}


#content {
position: relative;
top: -250px;


}


#info {
color: #ffffff;
background: #0086bf;
width: 250px;
text-align: center;
font-size: 26px;
border-top-left-radius:30px 30px;
border-top-right-radius: 30px 30px;
border-bottom-left-radius: 30px 30px;
border-bottom-right-radius: 30px 30px;
top: -150px;
position: relative;
}


#twitter {
width: 250px;
height: 200px;
position: relative;
top: -800px;
}


#facebook {
width: 250px;
height: 200px;
position: relative;
top: -580px;
}


#news {
width: 250px;
height: 200px;
border: dotted black 2px;
position: relative;
top: -340px;
}


#nav {
color: #ffffff;
background: #0086bf;
text-align: center;
position: relative;
left: 270px;
top: -150px;
font-size: 26px;
border-top: black solid 2px;
border-bottom: black solid 2px;
}


#icons {
text-align: center;
width: 250px;
top: -125px;
position: relative;
}


#placeholder1 {
position: relative;
left: 270px;
top: -125px;
border: dotted black 2px;
height: 200px;
}


#placeholder2 {
position: relative;
left: 270px;
top: -105px;
border: dotted black 2px;
height: 200px;
}


#placeholder3 {
position: relative;
left: 270px;
top: -85px;
border: dotted black 2px;
height: 200px;
}


#placeholder4 {
position: relative;
left: 270px;
top: -315px;
border: dotted black 2px;
height: 200px;
}


#story {
position: relative;
top: -100px;
left: 110px;
width: 850px;
}


#nav a:link {color: #ffffff; text-decoration: none;}
#nav a:active {color: #0081bb;}
#nav a:visited {color: #ffffff;}
#nav a:hover {text-decoration: none; color: #ff9900;}


body#home a#homenav,
body#about a#aboutnav,
body#sponsorship a#sponsorshipnav,
body#attend a#attendnav {
color: navy;
text-decoration: none;
}

Can anyone help, please?

haku · October 21, 2010

Taking a quick glance at your CSS (and I mean very quick), I can see that you are using a lot of relative positioning. You have most likely positioned an invisible element over top of the links that aren't working.

You can test this by trying to select the text inside the link - can you? If not, then there is an element over top.

twilitegxa · October 22, 2010

Thank you. I did have another div element covering it. I re-adjusted my divs and now it's working perfectly. Thanks for the help!

Sign In

Hyperlinks not activating?

Recommended Posts

twilitegxa

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

twilitegxa

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information