Grow your CSS skills. Land your dream job.

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?

    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

    # January 21, 2009 at 6:31 pm

    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:

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

    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

    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:

    Code:
    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:

    Code:
    Title

    Description

    and jQuery

    Code:
    $(“.clickable”).click(function(){
    window.location($(this).attr(“rel”));
    };
    # 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.

*May or may not contain any actual "CSS" or "Tricks".