CODEWITHSUNDEEP
javascripthtmlcsswebclickable-image
lysergic
lysergic

Reputation: 21

Excessive clickable area below image

I have no idea why below every thumbnail of my gallery is clickable space. If I use float:left on pcs div, then excessive clickable area dissapears, but background dissapears too. I can't find answer anywhere. I'm a newbie in web design. Your help is very welcome.

HTML

<body background="hexagons.jpg" style="background-attachment: fixed;">


<div id="rect">
<script>
 var obj = document.getElementById("rect");
 obj.style.width = screen.availWidth / 1.2509 + 'px';
 obj.style.left = screen.availWidth / 10.50769 + 'px';
</script>
  <div id="logo">
    <img src="em.jpg" width=100% height=100%>
  </div>
  <div id="menu">
   <ul>
     <a href="index.html"><li>Pradžia</li></a>
     <a href="Galerija.html"><li>Galerija</li></a>
   </ul>
  </div>
<div id="pcs" style="background-image: url(metal.jpg); background-size:100% 100%;  height:auto">
<a class="fancybox" href="galerija/atlikti_darbai_1.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_1.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_2.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_2.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_3.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_3.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_4.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_4.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_5.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_5.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_6.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_6.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_7.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_7.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_8.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_8.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_9.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_9.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_10.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_10.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_11.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_11.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_12.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_12.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_13.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_13.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_14.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_14.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_15.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_15.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_16.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_16.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_17.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_17.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_18.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_18.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_19.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_19.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_20.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_20.jpg"></a>  
<a class="fancybox" href="galerija/atlikti_darbai_21.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_21.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_22.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_22.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_23.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_23.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_24.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_24.jpg"></a>
 </div>

<script>
 var obj = document.getElementsByClassName("pic");
 var size = obj.length;
 var wdth = (parseInt(document.getElementById("rect").style.width) - 800) / 8;
 for(var i = 0; i < size; i++)
 {
     obj[i].style.margin = wdth - 2 +'px';
 };
</script>
</div>
<script type="text/javascript">
  $(document).ready(function() {
    $(".fancybox").fancybox();
  });
</script>    
</body>

</html>

CSS

#rect
{
    margin: 0px;
    padding: 0px;
    position:absolute;
    top:0%; left:130px;
    width:1092px;height:100%;
}

#logo
{
    background-image: url(em.jpg);
    background-repeat:no-repeat;
    background-size: 100% 100%;
    height:247px;
    margin:0px;
    padding:0px;
}

#menu ul
{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    padding-top: -20px;
    padding-bottom: 0px;
}

#menu ul a
{
    margin: 0px;
    padding: 0px;
    float: left;
    display: inline;
    width: 50%;
    background-image: url(h_b1.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position:relative;
    text-align: center;

}

#menu ul a li
{
    margin: 0px;
    padding: 0px;
    font-size: 18px;
    color: #300;
}

#vertical_div
{
    margin:3px;
    width:3px;
    background-color:silver;
}

#text
{
    width: 600px;
}

.pic
{
display:inline;
}

Upvotes: 0

Views: 141

Answers (1)

Shivam
Shivam

Reputation: 2248

Welcome to the world of Web Design @lysergic.

Browsers by default can cause unwanted margin/padding to elements in your HTML. To fix this, you can use a CSS reset.

Or a very quick fix, place this at the top of your css document:

* {
   margin:0;
   padding:0;
}

The * is a universal selector, which will target all the elements on your page and set a margin and padding of 0.

Upvotes: 2

Related Questions