CSS Absolute Positioning: Create A Fancy Link Block
Spread it!
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&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.
44 User Comments
Trackbacks/Pingbacks
-
-
30. Oct, 2009
[...] This post was mentioned on Twitter by Piervincenzo Madeo and Lam Nguyen, Web Design News. Web Design News said: CSS Absolute Positioning: Create A Fancy Link Block http://bit.ly/3bZ3N5 [...]
-
-
30. Oct, 2009
Social comments and analytics for this post…
This post was mentioned on Twitter by prlamnguyen: My New Post: CSS Absolute Positioning: Create A Fancy Link Block http://bit.ly/4FjSE3...
-
-
31. Oct, 2009
[...] CSS Absolute Positioning: Create A Fancy Link Block By Lam Nguyen, October 30th, 2009 Site: AEXT [...]
-
-
01. Nov, 2009
CSS Absolute Positioning: Create A Fancy Link Block…
Use some tricks to create a fancy link block that make our links more attractive….
-
-
01. Nov, 2009
[...] CSS Absolute Positioning: Create A Fancy Link Block By Lam Nguyen, October 30th, 2009 Site: AEXT [...]
-
-
01. Nov, 2009
[...] CSS Absolute Positioning: Create A Fancy Link Block [...]
-
-
01. Nov, 2009
[...] CSS Absolute Positioning: Create A Fancy Link Block [...]
-
-
02. Nov, 2009
[...] Read the original article [...]
-
-
03. Nov, 2009
[...] CSS Absolute Positioning: Create A Fancy Link Block [...]
-
-
02. Dec, 2009
[...] CSS Absolute Positioning: Create A Fancy Link BlockAbsolute positioning is a well-known CSS technique supported by all web browsers. If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact position you specify. In this tutorial, you’ll use absolute positioning to create a fancy link block. [...]
-
-
02. Dec, 2009
[...] CSS Absolute Positioning: Create A Fancy Link BlockAbsolute positioning is a well-known CSS technique supported by all web browsers. If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact position you specify. In this tutorial, you’ll use absolute positioning to create a fancy link block. [...]
-
-
02. Dec, 2009
[...] CSS Absolute Positioning: Create A Fancy Link Block Absolute positioning is a well-known CSS technique supported by all web browsers. If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact position you specify. In this tutorial, you’ll use absolute positioning to create a fancy link block. [...]
-
-
02. Dec, 2009
[...] CSS Absolute Positioning: Create A Fancy Link BlockAbsolute positioning is a well-known CSS technique supported by all web browsers. If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact position you specify. In this tutorial, you’ll use absolute positioning to create a fancy link block. [...]
-
-
03. Dec, 2009
[...] CSS Absolute Positioning: Create A Fancy Link BlockAbsolute positioning is a well-known CSS technique supported by all web browsers. If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact position you specify. In this tutorial, you’ll use absolute positioning to create a fancy link block. [...]
-
-
04. Dec, 2009
[...] CSS Absolute Positioning: Create A Fancy Link Block [...]
-
-
06. Dec, 2009
[...] CSS Absolute Positioning: Create A Fancy Link Block Absolute positioning is a well-known CSS technique supported by all web browsers. If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact position you specify. In this tutorial, you’ll use absolute positioning to create a fancy link block. [...]
-
-
07. Dec, 2009
[...] CSS Absolute Positioning: Create A Fancy Link Block Absolute positioning is a well-known CSS technique supported by all web browsers. If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact position you specify. In this tutorial, you’ll use absolute positioning to create a fancy link block. [...]
-
-
08. Dec, 2009
[...] CSS Absolute Positioning: Create A Fancy Link Block Absolute positioning is a well-known CSS technique supported by all web browsers. If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact position you specify. In this tutorial, you’ll use absolute positioning to create a fancy link block. [...]
-
-
09. Dec, 2009
[...] CSS Absolute Positioning: Create A Fancy Link Block Absolute positioning is a well-known CSS technique supported by all web browsers. If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact position you specify. In this tutorial, you’ll use absolute positioning to create a fancy link block. [...]
-
-
08. Jan, 2010
[...] Create A Fancy Link Block [...]
-
-
09. Jan, 2010
[...] CSS Absolute Positioning: Create A Fancy Link Block Absolute positioning is a well-known CSS technique supported by all web browsers. If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact position you specify. In this tutorial, you’ll use absolute positioning to create a fancy link block. [...]
-
-
10. Jan, 2010
[...] Posicionamento absoluto usando CSS [...]
-
-
28. Jan, 2010
[...] 23. Хайрцаг хэлбэртэй холбоос [...]
-
-
24. Feb, 2010
[...] CSS Absolute Positioning: Create A Fancy Link Block Absolute positioning is a well-known CSS technique supported by all web browsers. If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact position you specify. In this tutorial, you’ll use absolute positioning to create a fancy link block. [...]
Leave a Reply
About AEXT.NET
AEXT is a design magazine that publishes all things web design. Articles here are published by web professionals for web professionals featuring tutorials, collections, and resources.
thanks for this post.
I wrote an article covering absolute positioning a while back, can’t recall exactly when… but yours covers a different angle, which is great.
A brilliant and yet simple tutorial but with one tiny flaw – while the method makes the entire link block clickable, the text within the link block will not be selectable by the caret because it’s hidden behind the top-most transparent linkblock layer.
In the past I’d use this method to create linkblocks but now there’s jQuery (I believe Prototyle, MooTools have similar functionalities) to create linkblocks
but of course, one major disadvantage is that it will not work if users turn Javascript off. An example will be:
$("#subscribe li").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
Nonetheless, it’s still very simple to implement! Current lists merely have to be appended with the linkblock layer and voila, you’re done!
@Tedy: I love all of comments like yours. That will help the author so much. The jQuery code you provided is so great. It doesn’t need the link tag has to be spread whole of block. Furthermore, when IE6 doesn’t support the hover event of li tag, jQuery can do.
Thanks for the comment.
Funny enough I left a ‘d’ outta my name
Don’t mention! This method is really simple and sometimes I wonder why I actually went great lengths to find the jQuery code that make linkblocks clickable. Oh and I’ve got it from WebDesignerWall’s jQuery Demo.
One thing I loathe is that some people turn JS off. It’s not their fault but sometimes they don’t realize that they’re going to miss out just so much of great user experience made possible by JS libraries only.
If I’m not wrong, the <a> element is no longer treated as an inline element and can be used to contain linkblocks in HTML5.
Great tutorial, thanks a lot.
@Tedy: I think your argument is valid, but what is the use of selecting the text in this case? I think using javascript for the sole purpose of having a link block is overkill, especially when you can do the same with plain css.
I think it will be better that you use shorthand for the margin stuff ,it save space. Nice tutorial btw.
Your site looks a lot like nettuts !
Great technique, would definitely come in useful. For those new to CSS positioning, check out http://helpcss.com/wiki/Positioning
Nice tutorial for creating link block. Very clear CSS code and well defined . Thanks for sharing this nice post.
Great tutorial! I’ll definitely use this on my site. I’m fairly new with programming though, so is there any explanation for the validation errors (or a way to fix them)?
http://validator.w3.org/check?uri=http%3A%2F%2Faext.net%2Fexample%2Fcss-fancy-link-block%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
@chris The second image element lacks an ‘/’ as in . Add it and the validator will tell you there is 0 error left.
I am not getting the same effect in IE, please could you let me know the fix for IE.
@Kaartz
Yes, this is really bizarre in IE6
No ul, li, div, p, or anything else works fine with the :hover css function.
But you can still can make it works by using whatever:hover. Do the google search with this such term
great tutorials
thank you
Great post.
Thanks a lot !
Very nice tutorial, unfortunately z-index doesn’t work properly in IE. So, this technique is not really useful. Yet
This does not work with IE 7 or 8 either, FF is fine.
Nice postings , Keep more posting