Hyperlink issue

HTML & CSS
1

Hello,

I’m having the following issue that I hope someone can help me with. I have external links and social media images on one line. The external links are not “hyperlinking” when I put the social media images on the same line. They only link when the images are not there. Below is my code:

HTML

<div class="topheader">
<ul id="top">
<li><a href="#">header 1</a><li>
<li><a href="#">header 2</a></li>
<li><a href="#">header 3</a></li></ul></div>
<div class="social">
<img src="/images/rss.png">
<img src="/images/twitter.png">
<img src="/images/facebook.png">

CSS

.topheader { position: relative; z-index: 50; width: 962px; margin: 0 auto 20px; background-color: #e2e1e1; }
#top li {display: inline; list-style-type: none; padding: 10px 10px 0 20px;   }
#top li a { color: #000; }
#top li a:hover { color: #b7b7b7; }
.social { position: relative; z-index: 50; margin: -60px auto 20px; padding-left: 1100px; }

Any help is appreciated. Thanks.

Amanda

2

I think this markup will be better for your needs.

HTML

<div class="topheader">
<ul id="top">
<li><a href="#"><img src="/images/rss.png"></a><li>
<li><a href="#"><img src="/images/twitter.png"></a></li>
<li><a href="#"><img src="/images/facebook.png"></a></li></ul></div>
</ul>
3

Thanks for the reply. I don’t think you understood what I meant. Attached is an image of the issue. The divs are separate because they are separate. Header 1, header 2 and header 3 are supposed to be a link but when the social images are on the same line based on the coding I provided, you can’t click on the link.

4

Actually I figured this out on my own. Thanks for your help!

5