1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Display images inline with captions in?

Discussion in 'PHP & Perl' started by FatherCarbon, Nov 26, 2008.

  1. FatherCarbon

    FatherCarbon Registered Member

    Joined:
    Sep 30, 2008
    Messages:
    96
    Likes Received:
    63
    Occupation:
    Chemist and Web Developer/Marketer
    Location:
    Everywhere!
    I've searched and searched and tried and tried, but I just can't get this to work:

    I want images displayed in a row, with a caption underneath each one.

    [ ] [ ] [ ] [ ] [ ]
    c1 c2 c3 c4 c5

    Something like that. ASCII art ftw!

    This should probably be in the HTML section, as PHP won't be involved with the actual display, but the app will be in PHP.
     
  2. justthinking

    justthinking BANNED BANNED

    Joined:
    Aug 13, 2008
    Messages:
    475
    Likes Received:
    463
    The easiest way would be to put create a table and put the images in it.

    Something like:

    table border="1">
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>

    You would definitely want to enhance it using .css, but I hope it helps.
     
    • Thanks Thanks x 1
    Last edited: Nov 26, 2008
  3. FatherCarbon

    FatherCarbon Registered Member

    Joined:
    Sep 30, 2008
    Messages:
    96
    Likes Received:
    63
    Occupation:
    Chemist and Web Developer/Marketer
    Location:
    Everywhere!
    I hate tables, I'd much rather use divs :(
    But if it works, it works! :D
     
  4. drdankmendez

    drdankmendez Junior Member

    Joined:
    May 30, 2008
    Messages:
    194
    Likes Received:
    316
    Location:
    In front of my computer
    Well you could use divs like this:

    Code:
    <div style="float:left" align="center">
    	<img src="yourimage.jpg" />
    	<br />
    	Your Caption
    </div>
    <div style="float:left" align="center">
    	<img src="yourimage.jpg" />
    	<br />
    	Your Caption
    </div>
    <div style="float:left" align="center">
    	<img src="yourimage.jpg" />
    	<br />
    	Your Caption
    </div>
    <div style="float:left" align="center">
    	<img src="yourimage.jpg" />
    	<br />
    	Your Caption
    </div>