Reputation: 1621
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
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
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>
I think you can give the complete code of your HTML and CSS file.
(I mean the nav
code and div
code)
Upvotes: 1
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