link is not working on the div

Question

<div class="gallery-cell">
  <div class="highslide-gallery">
    <a id="thumb2" href="imgs/SteakHouse/1.jpg" class="highslide" onclick="return hs.expand(this, { captionId: 'steak-caption', slideshowGroup:2 } )">
      <div id="txt">
        <h4><b>STEAK HOUSE<br>RESTAURANT</b></h4>
        <br>
        <!--- Delete this after adding Address --->
        <p class="address">
          <!-- Address -->
        </p>
        <p class="city">Jeddah</p>
      </div>
    </a>
    <div class="hidden-container">
      <a href="imgs/SteakHouse/2.jpg" class="highslide" onclick="return hs.expand(this, { captionId: 'steak-caption', thumbnailId: 'thumb2', slideshowGroup:2 })"></a>
      <a href="imgs/SteakHouse/3.jpg" class="highslide" onclick="return hs.expand(this, { captionId: 'steak-caption', thumbnailId: 'thumb2', slideshowGroup:2 })"></a>
      <a href="imgs/SteakHouse/4.jpg" class="highslide" onclick="return hs.expand(this, { captionId: 'steak-caption', thumbnailId: 'thumb2', slideshowGroup:2 })"></a>
      <a href="imgs/SteakHouse/5.jpg" class="highslide" onclick="return hs.expand(this, { captionId: 'steak-caption', thumbnailId: 'thumb2', slideshowGroup:2 })"></a>
    </div>
    <div class="highslide-caption" id="steak-caption">
      Name:
      <br><b>Steak House Restaurant</b>
      <br> Location:
      <br><b>Jeddah</b>
      <br>
      <!--Total Built Area:<br><b>495 M<sup>2</sup>/Unit</b>  <br>-->
      <!--Lot Area:<br><b>352 M<sup>2</sup>/Lot</b>           <br>-->
      <!--Year:<br><b>2012</b>                                <br><br>-->
    </div>
  </div>
</div>

The <a> element is the parent of the class "txt" and when I try to make <a> the parent of the entire "gallery-cell" class it doesn't work! I want the entire cell to be clickable, not just the text.

If you want, take a look at this website to test it out: http://urbanphenomena.net/

You need to add display:block for 'a' tag in css.Check this http://stackoverflow.com/questions/5320404/wrap-link-a-around-div — shubham agrawal, Mar 30 '17 at 12:56

Surya Raj M · Accepted Answer · 2017-03-31T03:28:37.280

Actually, adding a div inside anchor tag is a wrong method.

So you can add the anchor tag as the first child of the "gallery-cell" div

<div class="gallery-cell">
    <a id="thumb2" href="imgs/SteakHouse/1.jpg" class="highslide"></a>
    <div class="highslide-gallery">
    </div>
</div>

Then give position relative to the "gallery-cell" and position absolute to the tag. You can use following style

.gallery-cell {
   position: relative;
}

a#thumb2 {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
}

Through this you can make entire cell to be clickable

score 0 · Answer 2 · answered Mar 30 '17 at 12:58

0

Since element is inline by default and div is block, you need to define element as block either. (block element in inline element is not valid)

answered Mar 30 '17 at 12:58

Regina Williamson

23
2

score -1 · Answer 3 · answered Mar 30 '17 at 12:57

-1

Add This CSS

.highslide-gallery {
    height: 100%;
    width: 100%;
}
.highslide {
    display: block;
    height: 100%;
    outline: medium none;
    width: 100%;
}

answered Mar 30 '17 at 12:57

Lalji Tadhani

14,041
3
23
40

link is not working on the div

3 Answers3