Re: gallery (4 in a row) // carefull newbie
| From: | Matthew Weier O'Phinney | Date: | Tue, 28 Dec 2004 20:28:16 +0000 |
| Subject: | Re: gallery (4 in a row) // carefull newbie | ||
| References: | 1 | Groups: | php.general |
| Request: | Send a blank email to php-general+get-205273@lists.php.net to get a copy of this message | ||
* Mike Johnson <mike@smarterliving.com>:
> From: user@domain.invalid [mailto:user@domain.invalid]
> > I am making a gallery for my Homepage. Now, I want to make
> > little tumbnails of my work and make a table out of them.
> > So, to not put them all in a row, what whould make the site
> > unreadable, i have to put them in a little table, an i think
> > 4 in each row would be ok.
> >
> > I like to read out the pic's name etc. out of a mysql table.
> > But how do make the script to write a </tr> after it read
> > out 4 entries of a mysql table?
> >
> > Thanks in advance :)
>
> What I generally do is use the mod (%) operator to keep track of where
> it is.
<snip>
> The only problem is that at the end of the while() loop, if you want to
> have perfectly-formatted HTML, you need to figure out if it left off in
> the middle of a row and fill with N empty <td></td> tags.
>
> Also, if there's a better way to do this, I'm all ears. This is the way
> I've done it for years, but it /is/ a pain to do.
CSS and floats are your friend:
<style><!--
.gallery_image {
width: 200px;
float: left;
margin-right: 1em;
margin-bottom: 1em;
}
.clear {
clear: both;
margin: 0;
padding; 0;
height: 0;
}
--></style>
<!-- Loop over this, adding image sources and captions -->
<div class="gallery_image">
<img src="..." alt="..." /><br />
caption here...
</div>
<!-- End of loop -->
<div class="clear"> </div>
The beauty of this method is:
* As the browser window expands, more images are allowed per row
* No need to muck about with closing rows
* Separation of content from layout
The cons:
* If you have some images landscape, some portrait, you may get some
uneven spacing amongst rows. This can be solved by adding a height
attribute to the style, but if your captions are of variable length,
this could cause some strange display issues on longer captions.
--
Matthew Weier O'Phinney | mailto:matthew@garden.org
Webmaster and IT Specialist | http://www.garden.org
National Gardening Association | http://www.kidsgardening.com
802-863-5251 x156 | http://nationalgardenmonth.org