CODEWITHSUNDEEP
htmlcss
HoneyWine
HoneyWine

Reputation: 187

How to put image tiles properly without colum gap or row gap in between using only CSS?

I'm new to HTML and CSS. For one of my projects, I need to put 16 images into a 4x4 grid of tiles on a webpage. These tiles cannot have gaps between them, and they need to stretch to fill the browser from side to side. They also should only scroll vertically. We are only allowed to use JavaScript or JQuery so I can only use HTML and CSS.

I wrote 4 div elements, each represents a row; inside each div, a span element holds 4 images - that's how I made the 4x4 grid. A code snippet looks like this:

/* One row in a div*/
<div class="map">
    <span>
        <img src="map_images/1.png">
        <img src="map_images/2.png">
        <img src="map_images/3.png">
        <img src="map_images/4.png">
    </span>
</div>

I also wrote a navigation bar that should float above the background images in the upper right corner:

/* 4 div elements of 4 rows before this code*/
<div id="nav">
    <div><a href="foo.html">Foo</a></div>
    <div><a href="boo.html">Boo</a></div>
</div>

For the above code, my stylesheet looks like this:

.map{
    margin:0;
    padding:0;
}

#nav {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}

However, I've encountered several problems at this point.

First, I still have column gaps and row gaps between all 16 images. No matter what values I set map margin and padding to, nothing changes. I even tried negative values, still nothing changed. Can someone tell me how to go about this problem, eliminating all gaps?

Secondly, I googled and learned that z-index can be used to make div float above background; however, this is no working here and it seems that div #nav stays in the upper right corner as a separate div that does take up space, instead of floating above. Any suggestions on this?

Upvotes: 1

Views: 1263

Answers (3)

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9457

I think you are looking for something like this? See fiddle http://jsfiddle.net/DIRTY_SMITH/q12bh4se/4/

Snippet :

    body {

      margin: 0px;

    }

    div {

      width: 50%;

      float: left;

    }

    img {

      width: 50%;

      float: left;

    }

    .top-left {

      z-index: 9999;

      position: absolute;

      top: 0;

      left: 0;

      color: white;

    }

    .top-right {

      z-index: 9999;

      position: absolute;

      top: 0;

      right: 0;

      color: white;

    }
 <h1 class="top-left">Top Left</h1>
<h1 class="top-right">Top Right</h1>
<div class="row-1-col-1">
  <img src="http://lorempixel.com/g/200/200/">
  <img src="http://lorempixel.com/200/200/sports/">
  <img src="http://lorempixel.com/200/200/sports/1/">
  <img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-1-col-2">
  <img src="http://lorempixel.com/g/200/200/">
  <img src="http://lorempixel.com/200/200/sports/">
  <img src="http://lorempixel.com/200/200/sports/1/">
  <img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-2-col-3">
  <img src="http://lorempixel.com/g/200/200/">
  <img src="http://lorempixel.com/200/200/sports/">
  <img src="http://lorempixel.com/200/200/sports/1/">
  <img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-3-col-3">
  <img src="http://lorempixel.com/g/200/200/">
  <img src="http://lorempixel.com/200/200/sports/">
  <img src="http://lorempixel.com/200/200/sports/1/">
  <img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>

Upvotes: 2

Dave
Dave

Reputation: 10924

Float left and set the width to 25%. Also I show below how to create a floating menu using the :hover pseudo-class. 

.map div img {
  width: 25%;
  float:left;
  display: inline-block;
}

#nav {
  width: 50px;
  background-color: grey;
}

#nav ul {
  margin: 0;
  padding: 0;
  width: 50px;
  background-color: grey;
  position: absolute;
  display:none;
}

#nav:hover ul, #nav ul:hover {
  display:block;
}
<div id="nav">
  Menu
  <ul>
    <li><a href="foo.html">Foo</a></li>
    <li><a href="boo.html">Boo</a></li>
  </ul>
</div>
<div class="map">
  <div class="row">
    <img src="http://lorempixel.com/100/100/">
    <img src="http://lorempixel.com/100/100/">
    <img src="http://lorempixel.com/100/100/">
    <img src="http://lorempixel.com/100/100/">
  </div>
  <div class="row">
    <img src="http://lorempixel.com/100/100/">
    <img src="http://lorempixel.com/100/100/">
    <img src="http://lorempixel.com/100/100/">
    <img src="http://lorempixel.com/100/100/">
  </div>
  <div class="row">
    <img src="http://lorempixel.com/100/100/">
    <img src="http://lorempixel.com/100/100/">
    <img src="http://lorempixel.com/100/100/">
    <img src="http://lorempixel.com/100/100/">
  </div>
  <div class="row">
    <img src="http://lorempixel.com/100/100/">
    <img src="http://lorempixel.com/100/100/">
    <img src="http://lorempixel.com/100/100/">
    <img src="http://lorempixel.com/100/100/">
  </div>
</div>

Upvotes: 2

JRulle
JRulle

Reputation: 7568

All I had to do was set float: left and width: 25% on the images in CSS

.map img{
    float: left;
    width: 25%;
}

DEMO

Upvotes: 1

Related Questions