Blogging Tips

It’s a fairly common trick used nowadays, a block of text with a title and some other information that acts as a link while the only thing that looks like a link in the block is the title. It doesn’t require any fancy tricks even, but it’s probably not the most semantic bit of code.

Check out the demo here.

The key is simply wrapping the entire block in the link, and then styling the rest of the content to not look like a link.

<li>
<a href="http://www.bloggingtips.com/" >Reduce your code.
<span>12 Jul 2008</span>

<p>Complex designs are quite often a mess of div’s and span’s, it’s not surprising some people are sticking to tables, but unless they have a time machine tables are not the answer, remember it’s CSS or die!</p>

</a>

</li>

You can then style the span and the paragraph elements.

[sourcecode language='css']
.h-links ul {
list-style-type: none;
width:450px;
margin:0; padding:0;
}

.h-links li {
border-bottom:1px dotted #777;
}

.h-links span{
font-size:0.75em;
color:#777;
font-weight:normal;
}

.h-links p{
margin:5px 0 0 0; padding:0;
color:#000;
font-weight:normal;
}

.h-links li a {
color: #CC0033;
text-decoration: none;
font-weight:600;
display:block;
padding: 15px 15px 15px 10px;
}

.h-links li:hover{
background: #eee;
}
[/sourcecode]

When you hover over the block, it will highlight and you’ll be able to click anywhere in the block.
Grab the full code example and play around with it yourself.