开发者

What's going on with this space between my images? PHP/HTML

So, currently i'm programming my own website. The design is way not finished yet, so don't blame me for that xD Well, I've got a very small problem with a gap which is not supposed to be where it is (red square in the picture below). Do you know how it comes/came there?

Thanks in advance!

What's going on with this space between my images? PHP/HTML

My Code: (the while loop is there the pictures are displayed)

JustBasti's website

Home

    <a href='index.php?mod=news'>News</a>
    <a href='index.php?mod=allnews'>All News</a>
    <a href='index.php?mod=gallery'>Gallery</a>
    <a href='index.php?开发者_StackOverflow中文版mod=guestbook'>Guestbook</a>
    <a href='index.php?mod=admin'>Administrator</a><table>
<tr>

    <td>Nam liber tempor</td>
</tr>
<tr>
    <td>Saturday, 11th Jun 2011, 7:00 pm</td>
</tr>
    <tr>
        <td><a href='albums/110611190045 - Nam liber tempor/aus.png' rel='lightbox[testalbum]'
        title='aus.png'><img src='albums/110611190045 - Nam liber tempor/thumbs/aus.png' /> </a>

    </td>
            <td><a href='albums/110611190045 - Nam liber tempor/airport.png' rel='lightbox[testalbum]'
        title='airport.png'><img src='albums/110611190045 - Nam liber tempor/thumbs/airport.png' /> </a>
    </td>
            <td><a href='albums/110611190045 - Nam liber tempor/fam.png' rel='lightbox[testalbum]'
        title='fam.png'><img src='albums/110611190045 - Nam liber tempor/thumbs/fam.png' /> </a>
    </td>
            <td><a href='albums/110611190045 - Nam liber tempor/way.png' rel='lightbox[testalbum]'
        title='way.png'><img src='albums/110611190045 - Nam liber tempor/thumbs/way.png' /> </a>
    </td>

        </tr>

while ($photos = mysql_fetch_array($photo)){
    $url_thumb = $photos['url_thumb'];
    $url = $photos['url'];
    $title = $photos['title'];
    ?>
    <td><a href='<? echo $url; ?>' rel='lightbox[testalbum]'
        title='<? echo $title; ?>'><img src='<? echo $url_thumb; ?>' /> </a>
    </td>
    <?
}

The website is not online yet. I didnt use any CSS. I just coded in php and html.


You have to add colspan=3 or so (or as long as the table goes) for your first 3 rows:

  • the navigation bar
  • the latin quote
  • and the date

Personally I wouldn't even put them in the table, but that's me. Anyway your problem stems from the 3 rows I mentioned being stuck in a cell and forcing the width of the first column to be bigger than the image.


Most of the time problems like this depends on spaces in HTML. Try to delete all the spaces of you code, such as:

<a> </a> --> <a></a>

And you'll see the spaces will disappear.


If you are using Firefox, try plugin Firebug and right-click on the empty space, choose "edit", on its left panel it will show you all margins, paddings etc. \If using Chrome, you dont need to install anything as by default similar addon its already there. Eventually another great plugin for FF is WebDeveloper, in its menu go for "select">"select element" and click on your empty space.

Also you should use:

<tr>
    <td colspan="4">Nam liber tempor</td>
</tr>
<tr>
    <td colspan="4">Saturday, 11th Jun 2011, 7:00 pm</td>
</tr>

if you haven't got it in your CSS already

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜