CODEWITHSUNDEEP
phphtmlcss
tycoon
tycoon

Reputation: 7

css display images horizontally

I am trying to display images vertically 5 per row using php and I have achieved it. I am also using a div and this seems to be creating a problem. Images are displayed horizontally, but there seems to be a huge space between each image.

Heres the php code:

<table width="500" border="0" cellpadding="2" cellspacing="3">
    <tr>
    <?php
    // get the images for the new videos

    $query = "SELECT * FROM videos";
    $result = mysql_query($query);
    $numimages = 0;
    while ($row = mysql_fetch_assoc($result)) {
        extract($row);
        // extract youtube id

        preg_match('/[\\?\\&]v=([^\\?\\&]+)/', $video_link,$matches);
        // $matches[ 1 ] should contain the youtube id
    ?>
        <td valign="top">
            <div id="videogallery">
                <a rel="#voverlay" href="http://www.youtube.com/v/<?php echo $matches[ 1 ];?>?autoplay=1&amp;rel=0&amp;enablejsapi=1&amp;playerapiid=ytplayer" title="<?php echo $video_title;?>">
                    <img src="http://img.youtube.com/vi/<?php echo $matches[ 1 ];?>/default.jpg" alt="<?php echo $video_title;?>" class="border_black" />
                </a>
            </div> 
        </td>
        <?php 
        $numimages++;
        if ($numimages%3 == 0) 
            echo "</tr><tr>";
    }
    ?>
    </tr>
</table>

This is the css:

    #videogallery {
    width:500px;
    zoom:1;
}
#videogallery span{
    display:block;
}
#videogallery a{
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
    position:relative;
    vertical-align:top;
    margin:3px;
    width:160px;
    font:12px/18px "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
    font-weight:normal;
    color:#333333;
    text-decoration:none;
    text-align:center;
    opacity:0.87;
}
#videogallery a img{
    display:block;
    border:none;
    margin:0;
}
#videogallery a:hover{
    opacity:1;
}

Upvotes: 0

Views: 2061

Answers (4)

Spudley
Spudley

Reputation: 168685

90% of that code is completely redundant.

You don't need the tables (in fact, it's considered very poor practice to use them for layout like this these days), and you don't need the wrapper <div> elements around your images.

Your <a> tags are already styled with display:inline-block;, so actually they should already line up horizontally without any of that stuff. Just put them next to each other, without all the extra junk, and they'll line up quite happily for you. You can use margin and padding to put any extra spacing between them that you do require.

All you need beyond that is a single wrapper <div> around the whole lot to enforce a fixed width for the whole block, so that they wrap onto new lines at the right points.

Hope that helps.

Upvotes: 2

Prashant Bhate
Prashant Bhate

Reputation: 11087

you may avoid <table> alltogether by using div and css float see this http://css.maxdesign.com.au/floatutorial/tutorial0407.htm

See http://jsfiddle.net/ZfyRb/

Upvotes: 0

Arjan
Arjan

Reputation: 9874

I have noticed a few things. First, ids must be unique in html, but they are not in your document. You create <div id="videogallery"> in a loop, so that id appears multiple times. You should change the id into a class (or remove the div completely).

Also #videogallery is set to have a width of 500 pixels, which is also the width of the containing table. If you plan to have 5 images next to each other, the width of a div (or an image) should not exceed 100 px. Reducing the width should already help you to reduce the gap between images.

It's generally not a good idea to use tables for layout, it should be possible to get the same effect without tables. That gives you more flexibility. (Determining the number of images per row should be a layout issue, not a code issue.)

Upvotes: 3

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146440

there seems to be a huge space between each gap.

Do you mean a 7 pixel gap?

<table width="500" border="0" cellpadding="2" cellspacing="3">

Upvotes: 0

Related Questions