The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

multiple elements within an anchor link?

  • # January 21, 2009 at 6:13 pm

    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? 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

    # January 21, 2009 at 6:31 pm

    This reply has been reported for inappropriate content.

    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 {

    and HTML something like:

    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!

    # January 21, 2009 at 10:43 pm

    This reply has been reported for inappropriate content.

    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:

    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:



    and jQuery

    # January 24, 2009 at 7:58 pm

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed