1

I'm trying to make a div containing an image clickable. I have tried all the techniques on Hyperlinking an image using CSS (and acknowledge that it shouldn't really be done in css), and also looked elsewhere for any clues.

At first I thought it was because I hadn't set the size of the div to that of the image, but I still cannot get this to work.

Any ideas would be appreciated. the page where I'm trying this out is here: http://..., i.e., attempting to make the lighthouse graphic clickable (using any technique).

Community
  • 1
  • 1
peedurrr
  • 187
  • 16

2 Answers2

0

JavaScript solution

Use an onclick attribute on div.

<div onclick='something()'>content</div>

and add script in JavaScript.

<script>
function something(){
  //code...
  //open other webpage:
  window.location = "http://example.com";
}
</script>
Shashank
  • 2,010
  • 2
  • 18
  • 38
Kacper
  • 111
  • 1
  • 13
0

You just have to change the padding-left for margin-left on the div with id="pagetext" in the style attribute, and everything shall work.

<div id="pagetext" class="animated bounceInDown" style="width: 50%; margin-left: 25%; padding-top: 10px; text-align: center;">
<div class="line"></div>
    <p style="line-height: 20px; margin-top: 10px; margin-bottom: 0px; text-align: justify;"></p>
    <br>
    <br>
    <p style="line-height: 20px; margin-top: 10px; margin-bottom: 0px; text-align: justify;"></p>
    <br>
    <br>
    <p style="line-height: 20px; margin-top: 10px; margin-bottom: 0px; text-align: justify;"></p>
    <br>
    <br>
    <p style="line-height: 20px; margin-top: 10px; margin-bottom: 10px; text-align: justify;"></p>
    <div class="line"></div></div>
peedurrr
  • 187
  • 16
Radu Lozovanu
  • 167
  • 4
  • 17
  • Well, I don't know how I would have ever have figured that out!Thank you so much. I'm still in the dark as to the 'why' if you feel like explaining? Thanks again! – peedurrr Mar 29 '16 at 13:56
  • I just see that the `padding` is moving the `div` but still keep the space for it, the `margin` is moving the `div` but free the space for other properties and setting. (Padding move but keep the layer on layer", Margin move but move with it the layer too). I hope the explaining is good :) – Radu Lozovanu Mar 29 '16 at 14:04