Dissecting My Site: Part 2

When I determined how much content I wanted to deliver up front, I knew it would be a challenge to differentiate each section at first glance and to present it all in a way that wasn’t overwhelming or seem cluttered. This is where the use of colour comes into play. I love pink, and pink and black is the hottest combo ever. So pink represents this guy right here – whether it be the body of a post or a comment I’ve left. Green is “external” or off-site links and blue represents user feedback.

Once I had the colours all picked out, I adapted my mock to reflect them, sat back and said to myself “Holy hell, that’s ugly!” And indeed, it was. So much colour splashed all over. It just looked horrible. After removing the colour from everything but the headings, I knew I was onto something. That’s when I thought of only showing the coloured underlines on an area that’s in focus. I’ve seen similar treatments on a few sites (I believe the first time I saw this sort of thing was on the previous version Shaun Inman’s site.), but none quite like this. In all other cases, the effect was on the paragraph that was in focus, where as mine highlights the entire block of content.

For the rest of this example, I’ll be referring to the container on individual posts which holds the full blog post. It’s identified as ‘blog’ in the XHTML and CSS and has an accompanied class named ‘content’ (‘content’ is in a nested div on archive pages to ensure that each entry has the highlight effect instead of all of them at once). Pretty creative with naming conventions, I am. But hey, isn’t that the point of semantic markup?

First thing’s first – I setup link classes as I normally would.

.content p a:link, .content p a:visited, .content p a:active {
  color: #FFFFFF;
  text-decoration: none;
  border-bottom: 1px solid #666666;
}

.content p a:hover {
  color: #000000;
  text-decoration: none;
  border-bottom: 1px solid #d4366a;
  background-color: #d4366a;    
}

As you can probably make out – that covers the ordinary white links with grey underline which changes to a black link with a pink background on hover. You might be wondering why I left the bottom border on the hover state – if you set the border on the hover state to

border: 0;

the background will appear above the inactive link border making it look 1px less in height.

Now, to make those underlines highlight when the mouse enters the content area. By adding a hover state to

.content

, we can change how the links will appear when the mouse is over the given area.

.content:hover a:link, .content:hover a:visited, .content:hover a:active {
  color: #FFFFFF;
  text-decoration: none;
  border-bottom: 1px solid #d4366a;
}

And to finish it off – the link hover state when

.content

is in focus…

.content:hover a:hover {
  color: #000000;
  text-decoration: none;
  border-bottom: 1px solid #d4366a;
  background-color: #d4366a;
}

By now, you might have made the connection that you shouldn’t need to have standard

a:hover

link class since technically, that state will never been seen.

.content:hover a:hover

takes it’s place. But, because of an ultra sucky browser that will rename unnamed, we do have to have that class. Why? Because this browser isn’t capable of rendering

:hover

on anything… except

a:hover

. And as such, IE users don’t see the fancy

.content:hover

link classes. Do I care? Hell no! That’s what they get for using a sucky browser! 😛

So, why did I apply the

:hover

classes on the container (

.content

) instead of the

.content p

link classes? As I mentioned previously, I wanted all of the links in the focused area to be highlighted. If I had applied them to

.content p:hover a...

, only the paragraph which is in focus would be highlighted. Also, by applying the

:hover

states to

.content

, the headings (as seen on archive pages) and meta links (tags, categories, etc.) are also highlighted.

There you have it. Pretty simple stuff – just took a little imagination to get it to behave the way I wanted it to.

What’s in store for Part 3? You’ll have to check back to find out…