Absolute position is a feature of the CSS2 specification that is supported by all of web browsers. If you posit an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact pixel you specify. In this tutorial, we will use some tricks to create a fancy link block that make our links more attractive.

The final result of our work will be as same as the demo below. Check it out or download it.

Write your link block elements in HTML code

We will create the HTML code first. Our link block will include: a link tag, a title of a link, link description, and an image.

Our HTML will be:

    <ul id="subscribe">
      <li>
        <a class="linkblock"href="http://feeds2.feedburner.com/prlamnguyen"title="Full RSS Feed"></a>
        <img src="images/feed.png"alt="Full RSS Feed" />
        <h4>Full RSS Feed</h4>
        <p>Subscribe to our RSS Feed with full posts for your enjoyment.</p>
      </li>
      <li>
        <a class="linkblock"href="http://feedburner.google.com/fb/a/mailverify?uri=prlamnguyen&amp;loc=en_U"title="E-Mail Delivery"></a>
        <img src="images/email.png"alt="E-Mail Delivery">
        <h4>E-Mail Delivery</h4>
        <p>We will send full blog posts to your inbox each time new posts plublished.</p>
      </li>
    </ul>

Before applying CSS code, let’s see how our link block would be

Applying CSS code

And this is our CSS code

For the List of links:

#subscribe {
    list-style: none;
    margin: 0px;
}
#subscribe li {
    padding: 10px;
    position: relative;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 5px;
    margin-left: 0;
    height: 64px;

}

For the Title of the links:

#subscribe li h4 {
    margin: 0 0 0 45px;
    font-size: 24px;
    line-height: 26px;
    color: #333333;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    display: block;
    clear: none;
    border: none;
}

We need to set margin left 45px for the title to display image in this space. Remember to set clear is none because the image will be displayed in the left side.

CSS for the description:

#subscribe li p {
    margin: 0 0 0 45px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: -0.02em;
    clear: none;
}

The same as the title, you should remember to set clear is none.

Add CSS code for image:

#subscribe li img {
    float: left;
    position: relative;
    padding: 0px;
    margin: 0px 10px 0px 0px;
}

Now, we will review our HTML code. Because there is no element inside the link tag, we have to write CSS code that will make the link spreads whole block. If you want to do this, the only way is set position of this link as absolute and the placement should be set to 0 of all sides.

#subscribe li a.linkblock {
    background: none;
    border: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 50;
}

Remember to set z-index for the link to make sure it is always on top. If not, the link block will not work.

The following CSS code is used for changing background of link block when the mouse is over.

#subscribe li:hover {
    background-color: #F5F5F5;
}

It’s doesn’t work on IE6 if without using whatever:hover. However, I think the day when IE6 goes to hell almost come.