Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    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.

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    924
    Thanks
    76
    Thanked 29 Times in 29 Posts
    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.

  • Users who have thanked LearningCoder for this post:

    JrBcnChz (12-04-2012)

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •