keepthepeach
keepthepeach

Reputation: 1621

Trying to put img in a tag in CSS

I have a really newbie CSS issue. I want to put an img in a and make img element clickable on its whole surface.

Here is my code :

<header class="mobile">
    <div class="click-nav">
        <div class="nav">
            <a href="" class="clicker"><img src="..."></a>
            <ul>
               <li>...</li>
            </ul>
        <div>
    </div>

    <div id="logo">
        <a href="#/index"><img src="..."></a>
    </div>
    .
    .
    .

What drives me mad is that it perfectly works for my logo div but not for my nav div.

I tried to fix it by setting a to :block (or inline-block) with height and width values. I tried to set img width to 100%... I even tried to cheat with inline-height attribute... But nothing works !

When looking the inspector, I can underline my a tag and I even see his clickable surface growing when size values are set but I still can't click it on chrome or partially in other browsers.

About my CSS: I reset my CSS and didn't add any rules to a links and parents div don't are just have absolute position. Any tip is welcome, thanks.

Upvotes: 0

Views: 2340

Answers (3)

keepthepeach
keepthepeach

Reputation: 1621

Ok, thanks for all you replies. My problem was I set my header to display:inline -for some reasons- so my a inherited

Upvotes: 0

Chen-Tai
Chen-Tai

Reputation: 3473

I am not sure why you have this problem.
I test for the nav and div tag, but both work well

<nav class="logo">
   <a href="#/index"><img src="http://goo.gl/FyWYfQ"></a>
</div>
<div class="logo">
   <a href="#/index"><img src="http://goo.gl/FyWYfQ"></a>
</div>

jsfiddle

I think you can give the complete code of your HTML and CSS file. (I mean the nav code and div code)

Upvotes: 1

Lolieta
Lolieta

Reputation: 37

try this:

<div class="nav">
            <a href="" class="clicker"><img src="..."></a>
</div>

and if it didn't work try this:

<a href="" class="clicker"><img src="..."></a>

Upvotes: 0

Related Questions