Question

Excuse me while I detach from reality.. I have a summary div which contains a small heading, a little bit of text, maybe an image. I’d like the whole summary div to be a link, something like this:

<div class="summary">
  <a href="#">
    <h4>Small Heading</h4>
    <p>Small amount of text</p>
  </a>
</div>

I’d then style the href to look like a nice box, change the H4 and P on :hover, etc etc. But putting an href there makes browsers angry.

Can anyone suggest a way of achieving the same effect without resorting to Javascript? Is that even possible?

Many thanks!

Answer 1

A pure CSS solution would be to do this:

<a href="#">
  <span class="header4">Small Heading</span>
  <span class="paragraph">Small amount of text</span>
</a>

Then change the A to a block element, and style the spans according to how you want the header and paragraph to look:

<style>
a {
 display: block;
}

span.header4 {
 display: block;
 font-size: 24px;
 font-weight: bold;
 margin: 0 0 10px 0;
}

span.paragraph {
 display: block;
 margin: 0 0 10px 0;     
}
</style>

HTML/CSS purist will won’t like it, though!