Positioning my images

HTML & CSS
1

Hi,

i am building an photo gallery website, and right now i am struggling to position my images in such a way that the images are all vertically aligned. Here is an example link to show you, http://andrew-norman.com/, as you can clearly see the book images are aligned vertically, and they don’t look out of place regardless of how much text description they have. While given mine, http://yfrog.com/f/bgimagesitej/ the images are all bunched up together.

I tried a number of things such as dealing with the aligment and margin seeing if it works but i could not get the ideal result.




.imageswrapper
{
    margin: 0;
    border: 1px solid #330066;
    margin-left:auto;
    margin-right:auto;
    /** height: 1200px; **/
    /** width: 900px; **/
    overflow: hidden;
    text-align: center;
    float: left;
}


.thumb
{
    /** margin: 3px; **/
    /** margin-left:auto;
    margin-right:auto;    **/

    border: 1px solid #ff8000;
    padding: 0px;
    height: auto; 
    text-align: center;
    float: left;
}

.thumb img
{
   display: inline;
    margin: 5px;
    border: 1px solid red;
    padding: 0px;
 
}

.thumbdesc
{
    text-align: center;
     border: 1px solid black;
     padding: 5px;
}
....





      <div class="imageswrapper">
                <?php 
                 if( isset($images) )
                {
                    $step = 3; // Columns
                   // Big for loop represents 1 whole image
                   for($i = 0; $i < count($images); $i+=$step)
                   {
                      
                      for($j = 0; $j < $step; $j++)
                      {
                            
                          if(isset($images[$i+$j]) )
                         {    echo '<div class="thumb">'; 
                            echo '<img src="./images/'.$images[$i+$j]['Filename'].'" width="150" height="100" >';    
                            
                            
                            echo '<div class="thumbdesc">';
                            echo '<b>Description:</b>'.$images[$i+$j]['Description'];
                            echo '</div>';
                            echo '</div>';
                            
                         }
                      }
                      
                   }           
                }
                ?>      
                </div>

Hope that is clear for you guys.

Thanks

2

Nah, not at all. A gallery like this is quite emphatically a list of items, so is best marked up as a list. All of the best examples of how to do this sort of thing (see links below) use lists. Tabular data relates items in rows and columns, which is not the case here at all.

Here are some nice examples of what you are trying to do:

http://css-lab.com/demos/image-display/image-caption.html

http://css-lab.com/demos/image-display/inline-block-caption.html

http://www.pmob.co.uk/temp/caption20.htm

http://gtwebdev.com/workshop/layout/inline-block-gallery.php

http://css-lab.com/demos/image-display/float-hang.html

See if any of those links help, and come back if you have any more questions.

Also the div is short for divider, and should be used as a divider. Please correct me if I’m wrong.

div = division, and is a handy element for grouping other elements, but it isn’t as meaningful as something like a list item.

3

Thanks all for the assist, i think what i will do is try to do what varlik said and adjust my divs, although if i can’t seem to get it, i’ll probably post up another thread to help assist or if not, i’ll change it to table format, but i’ll just have to see.

p.s thanks ralph.m for the links i think i will try to use them to help me perhaps change them slightly to lists instead of tables.

4

Maybe we just disagree on this but I would say that what nvidia123 is trying to achieve is in fact tabular data?

Also the div is short for divider, and should be used as a divider. Please correct me if I’m wrong.

5

Hi

Instead of using a <div> tag rather create a table and align the columns center
<table>
<tr><td align=“center”>image and text here</td>…</tr>
.
.
.
<tr><td align=“center”>image and text here</td>…</tr>
</table>

if you have less columns in your last row than required you can padd it with empty columns
<td></td>

6

Semantically, what nvidia123 is doing is a list of images with a caption. The way he has done it is fine but if it was me I would have them in an unordered list, with each image and caption contained in the <li> element.

Tabular data is data that would make sense if stored in a database or spreadsheet. It has rows and columns that you can use to cross-reference. Have a look at this about.com article for one of the better definitions I have came across.

div is short for division, not divider. It is a generic block-level container used to group together related content.

7

Tables are not designed for layout. Tables are for describing tabular data. The purpose of HTML is not to define how a document is displayed, it is to define the structure of a document. CSS is designed for layout.

Nvidia123, your markup is fine, using tables for layout became bad practice years ago. Try setting the width on your container element (imageswrapper) then set the width on the thumb elements to a quarter of the containers width. You might have to play around with the margins and padding.

If you use Firefox as your browser then install the Firebug plug-in. It lets you view and change the HTML and CSS values in real time.

Hope this helps.

Thomas

8

Hi

You will have to set the min-width and max-width attributes in your css for your div, to make sure it’s always the same width. but many browsers (IE) will just ignore it and stretch your div to display all the text in one line.

I don’t really understand why div’s would be better since tables were really designed for this type of layout. Div tags are used to keep larger sections of a page that should be separate, apart. eg. your menu and content would each be in it’s own divs. they act as dividers and not as a layout.

9

Do you know if i can still do it with divs? I only ask because i initialy created it using tables actualy and then changed to divs as somebody told me that having it as divs is better for the css side and something to do with it being more modula data, something like that anyway. Plus for me, it was a bit of a challenge with regards to my for-loop changing to divs, if that makes sense.