Ask the CSS Guy

Great tip... I will use this with certainty

Thanks Guy!

this site has an example of what you may be trying to do:

http://hd.se/

didn't try to see how its done myself, but i'd assume javascript is used there.

Veerle uses this in the approved section of her site.

http://veerle.duoh.com/

Couldn't you just use

<a href="#">
<strong>Headline</strong>
Text text text
</a>

?

It just seems to me to be a bit over the top to use all that javascript...

If I may propose an alternate solution...

HTML:

<div>

<h2><a href="#">About Us</a></h2>

<p><a href="#">How my life story 

became a Hallmark movie.</a></p>

</div>

CSS:

div {

  width: 200px;

  height: 4em;

  padding: 0;

  border: solid 1px #999;

}

h2 { 

  width: 190px;

  height: 1em;	

  margin: 0;

  padding: 0 5px;

  position: relative;

}

p {

  width: 190px;

  height: 3em;

  margin: 0;

  padding: 0 5px;

  color: #333;

}

h2 a {

  color: #B84300;

  position: absolute;

  display: block;

  top: 0;

  left: 0;

  width: 190px;

  height: 3em;

  padding: 0 5px;

  text-decoration: none;

}

div p a {

  color: #333;

  text-decoration: none;

}

div:hover {

  background-color: #999;

}

It would still need JavaScript for IE6 due to the lack of :hover pseudo-element support on a div (Possibly similar to Suckerfish Dropdowns), but it's not necessary for IE 7 or Firefox. (Sorry, can't test it in Safari right now...)

I guess you could also argue it's a little fragile because you need to know the final height of the box at design time in order to style the h2 a, but I suppose you could fix that with some javascript.

What about:

About Us

How my life story became a Hallmark movie.

Set the a tag to display block with height and width dimensions, the span to display:none, and position the a tag absolutely over the text, making your button. I think that'll degrade nicely too.

Just a thought.

Oops. Too early in the morning. I meant this:

<h2>About Us</h2>
<p>How my life story became a Hallmark movie.</p>
<a href=""><span>Check it out!</span></a>

@CSS Guy:

My original thought did not have the div, I put a border on the top and sides of the h2 and the bottom and sides of the p, but when you changed the background-color of the "h2 a:hover" it covered the p. I thought the p, being lower in the document would naturally have a higher z-index than the a, but I was forgetting the fact that the a was absolutely positioned, so it would always be above the p, unless the p was absolutely positioned.

So I tried absolutely positioning the "p a" but in order to do that the p needed to be relatively positioned, which naturally put it higher than the "h2 a", so the "h2 a:hover" no longer fired when hovering over the "p a".

On a different train of thought I also considered the adjacent-sibling-selector to trigger the background change on the p (i.e. h2 a:hover + p) but without a previous-adjacent-sibling-selector I couldn't change the background of the h2. Of course even if it did exist, the + selector doesn't work in IE 6 anyway so Javascript would still be necessary.

Oh well...just a little on my train of thought if you were interested... :)

Great tip, but what about the status bar text?

I'm very much not-JS (somehow my brain just won't understand it), but I'm pro-show-where-the-user-is-going, so a way of showing the url in the status bar, would be very much appreciated.

Thanks, CSS Guy, very interesting way of going about this.

Here's my own perversion of your example, just using CSS and an unordered list, since it's really just a menu. Could be cleaned up, and it's not as pretty without styles, but it makes sense.

Hi,

As you proposed I use definition lists to achieve the same effect, examples can be seen here:

http://www.ncpta.org.uk/events/100806/100175/ncpta_regional_events/

Another example using an image:

http://html.eval.poptech.coop/compact/news.html

I have been considering adding in the status bar text as well to aid usability, following the comments I think its the right thing to do.

ben

@Eric: With accessibility in mind, linking the story summary isn't great. I believe only the headline should be linked. Otherwise screen readers, in "read page links" mode are reading two links where only one is needed. So...

<div class="linkbox">
  <h2><a href="#">About Us</a></h2>
  <p>How my life story became a Hallmark movie.</p>
</div>

Also better than the original code, which would have screen readers repeating "read more" for each link box, with no context (also not good for SEO).

Firefox reports that in your example that it has 9 javascript errors. I am using this firefox addon: https://addons.mozilla.org/en-US/firefox/addon/249

Thanks for the interesting project. I played around with floating the a element as an absolutely positioned div, over the top of the box and using alpha transparent pngs as the hover colors. (spacer gifs anyone?) It works in current browsers but is probably even more hacky than the JavaScript solution you came up with.

Then I thought of making the link display block for the whole area of the div, giving it a top padding and an equal minus margin. That sort of works. I put the headline and text in a definition list. The box changes background color over about 70-80% of the area. By making all the elements links. It fires everywhere but flickers. It's also too fragile for a production environment with too many custom sizings.

If I needed to produce this effect, (hopefully not, I'm not a fan) I think I would prefer your original idea of using spans to style the text and wrap the entire area in the link.

What about declaring the box h2 and p as inline elements in the style sheet? Would that make wrapping the entire thing in the a tag kosher?

@michael: declaring <h2> and <p> as inline within the style sheet would not force it to validate. Validation is just not going happen if you wrap an <a> around any tag that is set to display:block; by default.

Thanks JD. I've never tried to declare h2 to display inline then wrap the <a> around the block level element. Just curious.

For me the answer seems to make the <a> display block and set the width and height equal to the enclosing element then attach the hover effect to a pseudo element made of the surrounding block. It should work in maybe 30-40% of the browsers out now and could still be styled to look decent in older ones. A majority of visitors should see the effect within the year as IE 7 rolls out. It might be necessary to add links to all the text to get the whole thing to fire reliably but every presented solution is cludgy.

I came up with an alternative for this technique that uses a list to create the block hover effect (based on Veerle's idea). It works pretty well and doesn't require JavaScript.

I came up with an alternative for this technique that uses a list to create the block hover effect (based on Veerle's idea). It works pretty well and doesn't require JavaScript.

It is as simple as make the a tag display as a block.

Here is the CSS:

a.boxHover {
    display: block;
    color: #333333;
    text-decoration: none;
    padding: 10px;
    border: 1px solid #660000;
    background-color: #dddddd;
  }
  a:hover.boxHover {
    background-color: #ffcccc;
  }

And here is the markup:

<a class="boxHover" href="#" rel="nofollow">
   <h2>About</h2>
   <p>How my life story became a Hallmark movie.</p>
</a>

It is a little buggy with IE about the hover area, which I think it could have a workaround with more CSS for the inside tags. But it is still semantically good marked up and no JS needed.

Clever. I really like this. Have you come up with a way to do this with 2 or 3 side-by-side boxes as in your graphic?

From a stupid-user perspective, this is annoying. Why? When I right-click on it, I don't get the option to "Open in a New Tab." I do that all the time, opening new tabs as I read a page, then switching to those tabs once I'm done here. This system doesn't allow that. Looks cool, but now I hate you a little bit.

The Block Hover effect posted by Christian Watson doesn't require javascript AND it allows opening in a tab, making it the superior solution, I'd say.

Is the example used in this post a good illustration of structure because I think, semantically speaking, the example should be treated as a menu list. Correct me if I'm wrong: the example looks like a menu list. So shouldn't it be treated more like this:

unorderd list > list item > link > title & description

With this in mind, isn't it still valid to wrap all the contents up into an anchor tag and use span tags? I don't think this is spaninitis; I still think this is valid and spanerific!

It seems to me that it doesn't add contextual value to make links have or contain header value. However, the opposite is valid to me: it makes a lot of sense to add a link inside a header tag. But I wouldn't apply an anchor to both the header *and* the paragraph that might proceed it. I would only add it to the header as a method to get to another document.

Howz about just:

a.blah {
display: block;
width: somefin;
color: #somefin;
text-decoration: none;
}

a.blah strong {
display: block;
font-weight: bold;
color: #somfin;
}

Simpler the better.

Here's my attempt at this:
My attempt at CSS Link Boxes

It uses pure CSS and XHTML; it's semantic and works. The problem comes with IE6, for which the hover effect and the whole box-link won't work. Instead, I used a small image (an arrow) to show the link. You can see the example here:
Demo of my CSS Link Boxes

I was messing around with this effect trying to get it work without knowing of this website and I did not get it work the way I wanted (just used html and css no javascript), thanks for showing me a way of doing it.

I originally wanted the idea for my blog page were the box with the intro text would change colour when hovered. Seeing I could not get it to work, I used a different effect.

So thanks for this and showing me were I went wrong and right :)

what will the effect of using em / strong / span tags have w.r.t. to SEO? I've heard that search engines give a certain priority to h tags, so it'd be nice to keep them rather than styling a "lesser" tags ...

Hmmm...I like the effect, but am undecided how this should be implemented with respect to semantics. The purpose is to link to another page. As far as I'm concerned a link consists of inline text (usually title of the destination page) or image or a combination of both.

This technique tries to redefine/extend a link to a more complex structure with a descriptive title (hx) and additional details (p) or a destination resource (dt) and it's definition (dd). Or it could be extended in a microformat style. Take the link (a) and extend it with inline elements like so:
<a>
<strong class="title">Title for the destination page/resource</strong>
<span class="description">This page talks about...</span>
<span class="format">(pdf)</>
<a>

I kind of like the microformat idea. Seems most semantic since (hx) to me feels like it belongs to a page section and not a link.

As you proposed I use definition lists to achieve the same effect, examples can be seen here:

http://www.ncpta.org.uk/events/100806/100175/ncpta_regional_events/

While I prefer either Cliff's or Christian's versions since they use no JS code, I did notice that Cliff's version has issues with the IE-Disappearing Bug. I'm sure it's correctable, but for the out-of-the-box people might consider Christian's example.

I'm about to implement this on a site right now, so thanks to all for the work and continued improvements!

Is there anyway to keep the same block linkbox effect, but have the overall box display as an inline element with text wrapping around the outside?

I liked this css codes but codes must develope a lil bit