CODEWITHSUNDEEP
htmlcss
Jason
Jason

Reputation: 209

Why is img clickable space encompassing whole div?

I have a really simple question (and I even know the reason of why it's happening) but I cannot get it to translate into my code. A brainfart I'm sure, but one I can't seem to shake so I need some help on.

I have an image within an anchor that I wanted centered on my screen. I only want the image clickable, but the whole div is currently clickable and it points to my image. I'm sure it's because a elements are inherently inline, and my image is set to a block (fr centering purposes) and therefore the whole div becomes clickable for the image. But nothing will allow me to alter my code to keep it centered and only have the img clickable rather than the whole div. I tried setting the margin in the , and the display in the float (among other things) with no luck. Any idea where my problem is occuring? Thanks!

HTML:

<div class ="resume">
         <p><h2>View Resume:</h2></p>
           <a href="assets/res.pdf" class="fancybox fancybox.iframe" title="My Resume"><img src="assets/res_preview2.jpg" /></a><br>
</div>

CSS:

.resume img{
   display: block;
   margin: 15px auto;
   box-shadow: 2px 2px 18px #232323;
}


.resume h2{
    font-size: 2em;
    font-weight: 700;
    text-align: center;
    display: block;
}

NOTE: Using fancybox for a PDF to use as an iframe - the problem is with the jpg.

Upvotes: 1

Views: 83

Answers (3)

jeteon
jeteon

Reputation: 3719

The problem that you're encountering is happening because the of the display: block style on the img. Simply making this display: inline-block as some of the answers suggests would remove the centering which you want.

The simplest solution, since it seems you're centering the heading too, is to remove the display: block styling entirely from the image and just add 

.resume {
     text-align: center;
}

to your CSS. You can see this in this CodePen. Text center on the parent element basically centers all child elements that behave like a text (inline-block etc).

If you really want to center just the image and there is other stuff in the div.resume that should not be centered then you would need to add a div element around the anchor and then apply a centred text style on that element like so:

HTML:

<div class ="resume">
    <h2>View Resume:</h2>
    <div class="text-center">        
        <a href="assets/res.pdf" class="fancybox fancybox.iframe" title="My Resume">
            <img src="assets/res_preview2.jpg" />
        </a>
    <br>
</div>

CSS:

.resume img{
   margin: 15px auto;
   box-shadow: 2px 2px 18px #232323;
}

.resume h2{
    font-size: 2em;
    font-weight: 700;
    text-align: center;
    display: block;
}

.text-center {
    text-align: center;
}

A div has a display: block style on it by default so it spans the width of its containing element. Leaving the display style off the img then allows it to behave like an inline element which gets centred just like ordinary text without having to span the width of the containing element.

Btw, you shouldn't put header (e.g. h2) elements inside a paragraph element. Strictly speaking, its not proper HTML so when you use it the browser (trying to correct you) will turn it into this:

<p></p>
<h2>View Resume:</h2>
<p></p>

See this SO answer.

Upvotes: 2

Jason
Jason

Reputation: 52523

You probably need to set your a tag to be block or inline-block, as it is containing a block-level element (you're setting your image to be a block).

 .resume a {
    display: inline-block;
 }

Upvotes: 2

user3758480
user3758480

Reputation: 67

display: inline-block; might work for you and possibly .resume img a { so it calls the anchor.

Upvotes: 1

Related Questions