CODEWITHSUNDEEP
htmlcssword-wrap
Hevnlymom
Hevnlymom

Reputation: 79

Is there a way to make a name wrap when the information is coming from mysql on a php site?

I am building a large site. I decided to make it using a database. However, now that I am started, I am finding that the names of the pics are too large. Is there a way to make them wrap under the picture so they aren't so long? I am using PHPmyAdmin for the database and PHP in Dreamweaver CS5.5 for the coding.

Here is a picture to show you the current names.

Here is a picture to show you the current names.

I need it to do like this one.

I need it to do like this one.

Here is the current code:

  <?php do { ?>
  <ul>
  <li><a href="details.php?recordID=<?php echo $row_Master['Master_ID']; ?>"><img src="img/<?php 
echo $row_Master['Img']; ?>"/>
<br>
<?php echo $row_Master['Name']; ?></a></li>
  </ul>
  <?php } while ($row_Master = mysqli_fetch_assoc($Master)); ?>
  </div>
  <?php
mysqli_free_result($Master);
?>

Upvotes: 1

Views: 67

Answers (1)

fiter
fiter

Reputation: 773

You have to change your markup a bit. Add some class to <ul> element (like 'items' or as you wish) and put a name inside of <span> element:

<?php do { ?>
  <ul class="items">
    <li>
     <a href="details.php?recordID=<?php echo $row_Master['Master_ID']; ?>">
       <img src="img/<?php echo $row_Master['Img']; ?>"/>
       <span><?php echo $row_Master['Name']; ?></span>
     </a>
   </li>
  </ul>
<?php } while ($row_Master = mysqli_fetch_assoc($Master)); ?>

And add some styles: 

<style>
    .items {
        display: flex;
        flex-wrap: wrap;
    }
    .items li {
        width: 100px; /* set your item width here */
        margin: 10px;
    }
    .items li a {
        display: flex;
        flex-direction: column;
    }
    .items li a img {
        max-width: 100%;
    }
    .items li a span {
        text-align: center;
    }
</style>

Here is a result example for you:

.div {
  width: 600px;
}

.items {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.items li {
  width: 100px; /* set your item width here */
  margin: 10px;
}
.items li a {
  display: flex;
  flex-direction: column;
}
.items li a img {
  max-width: 100%;
}
.items li a span {
  text-align: center;
}
<div class="div">
  <ul class="items">
    <li>
      <a href="#">
        <img src="https://via.placeholder.com/100" alt="">
        <span>title example</span>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="https://via.placeholder.com/100" alt="">
        <span>the photo large title example</span>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="https://via.placeholder.com/100" alt="">
        <span>the photo large title example</span>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="https://via.placeholder.com/100" alt="">
        <span>the photo large title example</span>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="https://via.placeholder.com/100" alt="">
        <span>the photo large title example</span>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="https://via.placeholder.com/100" alt="">
        <span>the photo large title example</span>
      </a>
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions