Image link hides link below it

Question

I have an issue with an overlapping image link, that hides another link below it.

<div id="header-first">
        <div id="logo">
          <a title="Αρχική" href="/">
            <img alt="Αρχική" src="/sites/default/files/acquia_marina_logo.png">
          </a>
        </div>
</div>

The problem is that there is a link below this code, and the image partialy overlaps it. How can I keep the position of the image, but stop it from "hiding" the link below it? In essense I would like the "linkable" block to be shorter, keeping the image the same.

rephrasing the question:

Can an image link have a linked area that is not exactly above the image it contains?

Answer 1

Perhaps:

#logo {
    margin-bottom:npx; /* where n = pixel value */
}

Answer 2

i dont know if you are using floats, but that could have an affect on it too. You could throw a clear div below the a tag

Answer 3

So basically, you want the link to be on top of the image where it overlaps, correct? There are a few ways to address that:

1.CSS - absolute position the #logo - which takes it out of the flow of the document and anything following it in the html will be on top of it. Absolutely positioning is its own beast however, so research and learn about it if you aren't familiar with it.

#logo { position:absolute; top:0px; left:0px; } //make the parent div {position:absolute} to contain the absolute div

2.Make sure that the link comes after the logo in the html and give it a negative top margin to pull it up over the image.

.link_css {margin-top:-10px; }

3.CSS z-index. This option requires the browser to know where each item is (usually through css positioning) to work properly.

#logo {z-index:0}
.link_css {z-index:1}

Just some concepts, but it is tough to recommend any of them without knowing more about your code. hunter has a point: it would be nice to see your CSS