3

No matter what I tried it doesn't work correctly.

Basically I have a list of images that fill up my entire div's width and height. Now I just want to add some captions right underneath each images. everything I tried either made the images all verticle in one line, etc.

Any kind of help I can get on this is greatly appreciated!

<div id="index-gallery" style="float:left; padding:5px; margin:10px 0 0 0;">
     <? $ires3 = mysql_query("select `id`,`mp4`,`cover` from `d2pxhd`.`videos` WHERE `duration`>'0' AND `active`='1' AND `suspended`='0' AND `add_date`<now() ORDER BY `add_date` DESC limit 24",$db);
         while ($img3 = mysql_fetch_assoc($ires3)) {  ?>     
          <a href="/?play=<?=base64_encode(preg_replace('/\s+/', '', $img3['id']));?>&start=1">
          <img style="margin:20px 2px;" width="118" height="100" border="0" src="<?=$img3['cover']."002.jpg";?>"></a>

   SUBTITLE HERE!!!

        <? } ?>
  </div>
2
  • 1
    Did you try to put the outer div inside the while loop?
    – m.spyratos
    Apr 14, 2013 at 8:26
  • yes I have... do you have any recommendations on what i can do? maybe I can try whatever you have in mind.
    – thevoipman
    Apr 14, 2013 at 8:28

2 Answers 2

4

Try this...

HTML/PHP

<div id="index-gallery">
  <?php $ires3 = mysql_query("select `id`,`mp4`,`cover` from `d2pxhd`.`videos` WHERE `duration`>'0' AND `active`='1' AND `suspended`='0' AND `add_date`<now() ORDER BY `add_date` DESC limit 24",$db);
    while ($img3 = mysql_fetch_assoc($ires3)) : ?>

      <div class="img-box">
        <a href="/?play=<?=base64_encode(preg_replace('/\s+/', '', $img3['id']));?>&start=1">
          <img style="margin:20px 2px;" width="118" height="100" border="0" src="<?=$img3['cover']."002.jpg";?>">
        </a>
        <p>SUBTITLE HERE!!!</p>
      </div>

    <?php endwhile; ?>

  <div class="clear-both"></div>

</div>

CSS

#index-gallery {
  width:100%;
}

.img-box {
  float:left;
  padding:5px;
  margin:10px 0 0 0;
}

.img-box a, .img-box img {
  display:block;
}

.clear-both {
  clear:both;
}

Fixed Number of Columns in Each Row (for more consistence formatting)

<?php $cols = 4; ?>

<div id="index-gallery">
  <?php $ires3 = mysql_query("select `id`,`mp4`,`cover` from `d2pxhd`.`videos` WHERE `duration`>'0' AND `active`='1' AND `suspended`='0' AND `add_date`<now() ORDER BY `add_date` DESC limit 24",$db); ?>

   <?php while ($img3 = mysql_fetch_assoc($ires3)) : ?>

     <?php for($i=1; $i <= $cols; $i++) : ?>

        <div class="img-box">
          <a href="/?play=<?=base64_encode(preg_replace('/\s+/', '', $img3['id']));?>&start=1">
            <img style="margin:20px 2px;" width="118" height="100" border="0" src="<?=$img3['cover']."002.jpg";?>">
          </a>
          <p>SUBTITLE HERE!!!</p>
        </div>

        <?php if($i == $cols) : ?>
          <div class="clear-both"></div>
        <?php $i=1; endif; ?>

      <?php endfor; ?>

    <?php endwhile; ?>

  <div class="clear-both"></div>

</div>
7
  • this 90% work - for some reason the first row is not lined up properly, but everything after that lines up very well...
    – thevoipman
    Apr 14, 2013 at 8:36
  • Do you know how many images each row will have? Is it a fixed number?
    – m.spyratos
    Apr 14, 2013 at 8:38
  • Also, do you have a url so I can see it live?
    – m.spyratos
    Apr 14, 2013 at 8:40
  • yes, it is a fixed number, and i do not have any public url atm... thanks for your help btw
    – thevoipman
    Apr 14, 2013 at 8:58
  • No problem! Just be careful when the subtitle takes up two lines instead of only one.
    – m.spyratos
    Apr 14, 2013 at 9:02
3

Check this out.

JSFIDDLE EXAMPLE

HTML

<div id="index-gallery">
    <div class="item">
        <img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/>
        <p>My Caption here</p>
    </div>

    <div class="item">
        <img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/>
        <p>My Caption here</p>
    </div>

    <div class="item">
        <img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/>
        <p>My Caption here</p>
    </div>

    <div class="item">
        <img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/>
        <p>My Caption here</p>
    </div>
</div>

CSS

.item{
    width:200px;
    text-align:center;
    display:block;
    background-color: #ededed;
    border: 1px solid black;
    margin-right: 10px;
    margin-bottom: 10px;
    float:left;
}

#index-gallery{
    width:465px;
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.