CodingForums.com - Can't get JUST the img to be clickable. The whole Div is clickable?

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Can't get JUST the img to be clickable. The whole Div is clickable? (http://www.codingforums.com/showthread.php?t=283491)

Can't get JUST the img to be clickable. The whole Div is clickable?

I want just the image to be clickable, not the whole div. The image only takes up half of the width of the page, but the whole width of the page within the height of the image is clickable. In HTML I have:

Code:

<div style="padding: 25px">

        <h2>Look at this idiot!</h2>

        <a href="/page/football.html">

        <img class="post_img" src="/images/football.jpg" />

        </a>

</div>

The img class "post_img" looks like this in CSS:

Code:

img.post_img {

        display: block;

        margin-left: auto;

        margin-right: auto;

}

I just want the image to be centered and clickable, and only the image be clickable, not the space around it.

Thanks!!

Can you post a URL, the way its set up should only have the image clickable.
If i can see the site live i can better help you.

Ok I had a play around and it seemed to be something to do with setting your img to display: block;. Naturally it's an inline element. When I deleted that style rule, it got rid of the extra clickable space around the image. To get it working how you wanted, I had to give your <div> a style of text-align: center;. (This centers ALL children of that div) so I set your <h2> to text-align: left;.

It isn't pretty, but it depends how far along in writing your page you are which will determine how easy this is to change/implement.

The usual centering of an image setting a width and a margin of auto doesn't seem to work, which I've never seen before :s

Anyway, here is the code, give it a test and see what you think.

HTML:

Code:

<div id="content">

        <h2>Look at this idiot!</h2>

        <a href="/page/football.html">

        <img id="football_img" alt="image of football" src="phpwp.jpg" />

        </a>

</div>

CSS:

Code:

#content

{

        width: 50%;

        text-align: center;

        border: 1px solid black;

        height: 500px;

        padding: 2.5%;

}

        

#content h2

{

        text-align: left;

}

        

football_img

{

        width: 300px;

}

It could be other styles affecting the centering. Are there any other styles which apply to the div?

Regards,

LC.

if you set it to display block without specifying a width most browsers are going to give the element a width of auto

so give img.post_img a set width if thats what you want.

@learningcoder, thank you for your detailed response, I thought it might have something to do with the display:block

@daninma, straight forward and to the point, i like it! i hadn't known that display:block and width: were such good friends, I'm learning this on my own as i go!