html grid displaying wrong while fetching data from database

Question

i have a photo grid section which looks like below:

here i have used plaing html to display images, using

tag for each image.

now i have added some php, sql code so that images will be displayed from database, so i did the following code:

.clear:before,
.category:before,
.clear:after,
.category:after {
  content: " ";
  display: table;
}

.clear:after,
.category:after {
  clear: both;
}

#categories .categories-post-grid {
  overflow: hidden
}

#categories .categories-post-grid .category {
  position: relative
}

#categories .categories-post-grid ul,
#categories .categories-post-grid li {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0
}

#categories .categories-post-grid .category .category-post-container {
  overflow: hidden;
  background: #efefef;
  position: relative
}

#categories .categories-post-grid .category ul {
  width: 100%;
  float: left
}

#categories .categories-post-grid .category ul:before,
#categories .categories-post-grid .category ul:after {
  content: " ";
  display: table
}

#categories .categories-post-grid .category ul:after {
  clear: both
}

#categories .categories-post-grid .category li {
  cursor: pointer;
  background: #1d1d1d;
  background-size: cover !important;
  background-position: center center;
  float: left;
  padding-bottom: 19%;
  width: 19%;
  box-sizing: border-box;
  border: solid 0px #fff;
  border-top: none;
  border-right: none;
  position: relative;
  margin: 0.5%
}

#categories .categories-post-grid .category li:nth-child(odd) {
  background: #ccc
}

#categories .categories-post-grid .category li:first-child {
  border-left: none
}

#categories .categories-post-grid .category li.bigger {
  width: 39%;
  padding-bottom: 39%;
  float: left
}

#categories .categories-post-grid .category li a.square-link-cover {
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 555;
  border: none !important;
  background: rgba(0, 0, 0, 0);
}

#categories .categories-post-grid .category li .post-meta {
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
  -ms-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
}

#categories .categories-post-grid .category li .post-meta .post-titles {
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  width: 100%;
  margin: 0px auto;
  padding: 20px 0;
  z-index: 999999;
  -webkit-transition: all 340ms cubic-bezier(0.42, 0, 0.585, 1);
  -webkit-transition: all 340ms cubic-bezier(0.42, 0, 0.585, 1.23);
  -moz-transition: all 340ms cubic-bezier(0.42, 0, 0.585, 1.23);
  -ms-transition: all 340ms cubic-bezier(0.42, 0, 0.585, 1.23);
  -o-transition: all 340ms cubic-bezier(0.42, 0, 0.585, 1.23);
  transition: all 340ms cubic-bezier(0.42, 0, 0.585, 1.23)
}

.cattext {
  text-align: center;
}

.cattext span {
  color: #F2136E;
}

.sip {
  z-index: 1;
  width: 90%;
  margin: 0px auto;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 2px;
  line-height: normal;
  -webkit-transition: opacity 340ms cubic-bezier(0.42, 0, 0.585, 1);
  -webkit-transition: opacity 340ms cubic-bezier(0.42, 0, 0.585, 1.23);
  -moz-transition: opacity 340ms cubic-bezier(0.42, 0, 0.585, 1.23);
  -ms-transition: opacity 340ms cubic-bezier(0.42, 0, 0.585, 1.23);
  -o-transition: opacity 340ms cubic-bezier(0.42, 0, 0.585, 1.23);
  transition: opacity 340ms cubic-bezier(0.42, 0, 0.585, 1.23)
}

.sip a {
  text-decoration: none;
  color: #046175;
  border: none;
}

.sip a:hover {
  color: #0e93b0;
}

<h1 class="cattext">Create Your <span>Own Invitation</span> Card</h1>
<?php
            require('db_config.php');


            $sql = "SELECT * FROM image_gallery limit 10";
            $images = $mysqli->query($sql);


            while($image = $images->fetch_assoc()){


            ?>
  <div id="categories">
    <div class="category-post-container clear">
      <div class="categories-post-grid">
        <div class="category" id="category-nature">
          <div class="category-post-container root-category clear">
            <ul>
              <li class="" style="background-image: url('uploads/<?php echo $image['image']  ?>')">
                <div class="post-meta">
                  <a class="square-link-cover" href="https://cee.exposure.co/rome"></a>
                  <div class="post-titles">
                    <h2 class="sip">
                      <a href="https://cee.exposure.co/rome">
                        <?php echo $image['title']  ?>
                      </a>
                    </h2>

                  </div>
                </div>
              </li>

            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <?php }?>

but this gives me something like below:

that is image is listing one below another. I have lost my grid display when adding sql and php. can anyone please tell me what is wrong here. thanks in advance

It maybe unrelated, but you can't have duplicate ids, looking in your while loop, you'll get multiple element with categories id. I'd suggest you either append a unique value such as id to it e.g. categories-1, categories-2 or change categories to class — threeFatCat
– threeFatCat, Commented Jan 9, 2020 at 7:01
@threeFatCat can you check if the answer i accepted is fine , i mean will it produce duplicate id's — Seep Sooo
– Seep Sooo, Commented Jan 9, 2020 at 7:02
yeah, the while should have wrap the li instead of the whole categories wrapper, which I overlooked. That should do. — threeFatCat
– threeFatCat, Commented Jan 9, 2020 at 7:10

Simone Rossaini · Accepted Answer · 2020-01-09 06:57:29Z

You use while from <div id="categories"> so for all image you will create a div with categories, you simple change your code for create just a <li> in the while like:

<div id="categories">
    <div class="category-post-container clear">
      <div class="categories-post-grid">
        <div class="category" id="category-nature">
          <div class="category-post-container root-category clear">
            <ul>
<?php while($image = $images->fetch_assoc()){ ?>
              <li class="" style="background-image: url('uploads/<?php echo $image['image']  ?>')">
                <div class="post-meta">
                  <a class="square-link-cover" href="https://cee.exposure.co/rome"></a>
                  <div class="post-titles">
                    <h2 class="sip">
                      <a href="https://cee.exposure.co/rome">
                        <?php echo $image['title']  ?>
                      </a>
                    </h2>

                  </div>
                </div>
              </li>
  <?php }?>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

Collectives™ on Stack Overflow

html grid displaying wrong while fetching data from database

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related