Forums

jmfisher

I want to have an image, heading, and description all contained within one clickable link(without using a script).
Originally, I accomplished this using <h5> tags for the heading and <p> tags for the description. Everything worked exactly as I wanted, but it would not validate because apparently you can't put <h> and <p> tags within <a> tags.
Then I tried it just by wrapping the heading text in bold and italic tags and using tags to give it a different size and color than the description text. The color and size tags were also invalid.

Any ideas of how I could accomplish this?

http://www.dratpackproductions.com is the site in question.

I left it coded with the <h5> and <p> tags to show the desired effect.

Thanks for any help or advice

TheDoc

You should be able to accomplish this with an unordered list.

Set up each <li> to have the width and height of your box.

Your CSS would look something like:

.classname li a {
     float:left;
     width:200px;
     height:100px;
}

and HTML something like:

<ul>
<li class=\"classname\"><a><img alt=\"\" class=\"yourfloatleftclass\" src=\"images/image.jpg\" />Your info here, blah blah blah.</a></li>
</ul>

That is all extremely very loosely done, just trying to give you an idea. I see you are already using <li>'s for your menu, so you should have a relatively good grasp of what I'm trying to suggest. Perhaps someone with more time can explain it better!

chriscoyier

You are right you can't put an <h5> in an <a>, that's a block level element in an inline element which is bad mojo.

If you care less about the tags you use, you could do something like this:

<a href=\"#\">
   <span class=\"title>Title</span>
   <span class=\"description\">text text text text text</span>
</a>

This IS valid, and then you can style up the inards accordingly:

a span { display: block; }
a span.title {  font-size: 24px; }

If the tags you use is very important, you could bust out some javascipt for a similar effect:

<div class=\"clickable\" rel=\"http://location.com\">
  <h5>Title</h5>
  <p>Description</p>
</div>

and jQuery

$(\".clickable\").click(function(){
   window.location($(this).attr(\"rel\"));
};

Aaron B

Jmfisher, what you're talking about is actually possible in HTML 5, and some modern browsers will let it work, but not quite with the best/consistent results. Eric Meyer talks about a similar situation in a recent article. The options Chris suggests are the best options for you to use right now, until it gets supported better. Wish they'd hurry up with HTML 5 and CSS3 already.

treehouse : what would you like to learn today?

Forums

multiple elements within an anchor link?