CODEWITHSUNDEEP
htmlcsscss-float
goddamnyouryan
goddamnyouryan

Reputation: 6896

having an anchors click area cover parent elements padding

I have a <ul> on my site with structure pretty much identical to this: http://jsfiddle.net/tRzPH/1/

The link is the portion with the blue border. What I am trying to get it to do is strech all the way to the green borders on the right and left, and to the orange borders on the top and bottom. But of course, maintaining the position of the actual text content.

I'm not sure how to go about doing this, especially because anchors are not supposed to be parent elements of list-items.

Any advice?

Upvotes: 0

Views: 226

Answers (1)

elclanrs
elclanrs

Reputation: 94101

If I understand correctly this is what you're trying to accomplish, right? You'll need a bit of jQuery http://jsfiddle.net/elclanrs/tJ3kv/

html:

<ul>
    <li><a href="#">
            <h2>item1</h2>
            <p>Lorem Ipsum Dolor Sit Amet</p>
        </a></li>
    <li><a href="#">
            <h2>item2</h2>
            <p>Lorem Ipsum Dolor Sit Amet</p>
        </a></li>
    <li><a href="#">
            <h2>item3</h2>
            <p>Lorem Ipsum Dolor Sit Amet</p>
        </a></li>
</ul>

css:

body { margin: 50px; }
ul {
    border: 1px solid orange;
    overflow: hidden;
    display: inline-block;
}

h2 {
    font-size: 24px;
    font-weight: bold;
}

li {
    float: left;
    width: 150px;
    border-right: 1px solid green;
}
li:last-child { border: 0; }
a {
    display: block;
    border: 1px solid blue;
    margin: 4px;
    padding: 1em;
    color: black;
    text-decoration: none;
}

jQ:

var getMaxHeight = function ($elms) {
    var maxheight = 0;
    $elms.each(function () {
        if ($(this).height() > maxheight) {
            maxheight = $(this).height();
        }
    });
    return maxheight;
};

var $elms = $('ul li a');
$elms.height(getMaxHeight($elms));

Upvotes: 1

Related Questions