Ever seen on some site whole content area with images etc as just one link? Usually there’s some hover for the background and they are mostly on the sidebars left or right or let’s on the footer. This tutorial will show you how to do that with CSS, and tell you something more about display:block; option.

In this simple example I will go with <li> for it, because I think it’s used more, but also you can apply this for <div>.

<ul>
<li>
<a href=”#”><img src=”someimage.gif” border=”0″ />
<h2>Some Headline</h2>
<p>Some text will go here</p>

…

</a>
</li>
</ul>

So just put everything in <a> tag, and it will all be a link of course but there will be many blank spaces for mouse and it won’t show a link for that, so let’s apply some CSS to it.

ul {
list-style:none;
}

li a {
display: block;
height:100%;
}

li a:hover {
background:#ccc;
}

And also you can add display:block; to all elements between <a>.
li h2 { display: block; }

display: block;

display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).
And it works for: IE 6, IE 7, Firefox 2.0, Safari 3.0 Win, Opera 9.5b, iCab 3.0, Konqueror 3.5.7

Tags: