dcsimg
www.webdeveloper.com
Results 1 to 7 of 7

Thread: Formatting images and descriptions

  1. #1
    Join Date
    Aug 2004
    Location
    England
    Posts
    96

    Formatting images and descriptions

    I'm querying a database for image information (ie the image path, image title, image description) and want to display then together, how is the best way?

    All images are 200px wide so i would like them displayed in rows with the accompanying title underneath (using as many lines as required but each line being no longer than the 200px width of the image, if that makes sense), until the end of the container is hit and then continue on the next line, so to speak.

    I thought of being naughty and using a table but due to different screen resoultions you can never predict how many would be on a row. Any thoughts??

    Rich

  2. #2
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    You can't predict how many will be on a row using a table, how's that? If you display three images in a table row, then you'll only get three images in that row. I'd approach it with a table personally. And then style the image description inside the able.

  3. #3
    Join Date
    Aug 2004
    Location
    England
    Posts
    96
    Sorry, what i meant was that as the size of the container is set by the width of the window you are view the page in you won't be able to predict how many images will fit on a row. Does that make sense? So in other words if you adjust the size of the browser window the images would change rows to suit ( ie in a wide window you may get 6 in a row and then you make the window narrow and only 2 would fit).

    Also, i'd quite like them centred, so if there is only one image it would be in the centre of the container. I had a simlar query about centring buttons and someone suggested margin: 0 auto; yet this didn't seem to do much.

    Rich

  4. #4
    Join Date
    Aug 2004
    Location
    England
    Posts
    96
    I've also tried using something like:
    HTML Code:
    echo '<div class="box"><a class="link" href="http://www.mywebsite.com/'.$image_path.'"><img class="image" src="'.$thumb_path.'" alt="'.$image_title.'" /></a><br />'.$image_title.'</div>';
    But <div>'s stack on top of each other, not next to each other. Is there a way to <div>'s (or something more suitable) sit side by side on a 'row'?

  5. #5
    Join Date
    Mar 2005
    Location
    Idaho, USA
    Posts
    209
    Have you tried floating the <div>s?

  6. #6
    Join Date
    Aug 2004
    Location
    England
    Posts
    96
    I have indeed but that causes the container where they 'sit' to shrink to much smaller than the images and i loose the formatting.

    Rich

  7. #7
    Join Date
    Aug 2004
    Location
    England
    Posts
    96
    Help anyone?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles