Tables for picture gallery...?
Mary
page of a picture gallery of thumbnails?
I am trying not to use tables for positioning of everything else, but
it seems easier to lay out 20 or so pictures with a table. I would
still use CSS layout, not a table, on the pages with the larger images
that the thumbnail links to.
Actually, I'm using a program to generate the thumbnails and links and
it sets up the table for me (and that still needs some tweeking IMO).
Should I try to then convert the tables to pure CSS layout?
I don't have the page up yet to look at. Just doing some preliminary
thinking about it.
Thanks for any opinions on this.
Mary
--
Email not quite valid.
Please remove preconceived notions
before communicating privately.
David Dorward
> I was wondering what the thinking is on using tables for the index
> page of a picture gallery of thumbnails?
How do the rows and columns relate to each other? (i.e. - don't do it)
> I am trying not to use tables for positioning of everything else, but
> it seems easier to lay out 20 or so pictures with a table. I would
> still use CSS layout, not a table, on the pages with the larger images
> that the thumbnail links to.
Floated divs with captions and images inside them.
http://realworldstyle.com/thumb_float.html
--
David Dorward http://david.us-lot.org/
Redesign in progress: http://stone.thecoreworlds.net/
Microsoft announces IE is dead (so upgrade):
http://minutillo.com/steve/weblog/2003/5/30/microsoft-announces-ie-is-dead
François de Dardel
> Floated divs with captions and images inside them.
>
> http://realworldstyle.com/thumb_float.html
Your demonstration is quite convincing. My site has many such thumbnails
tables, and I might consider to change to your CSS strategy. There is
one detail however that does not satisfy me completely: the caption is
not really centered under the pict, it is slightly on the right. Why?
(Viewed with Netscape 7 and Safari on a Macintosh)
--
François de Dardel
--
http://mapage.noos.fr/dardelf/
Utilisez mon adresse sur noos seulement
Use only my noos e-mail
m
possibly from Mary <mbo...@preconceivednotionsrcn.com>, as follows:
>I was wondering what the thinking is on using tables for the index
>page of a picture gallery of thumbnails?
>
>I am trying not to use tables for positioning of everything else, but
>it seems easier to lay out 20 or so pictures with a table. I would
>still use CSS layout, not a table, on the pages with the larger images
>that the thumbnail links to.
>
>Actually, I'm using a program to generate the thumbnails and links and
>it sets up the table for me (and that still needs some tweeking IMO).
>Should I try to then convert the tables to pure CSS layout?
If each row of your table consists of a picture, then a description
of that picture to its right
(or vice versa), then you are using true tabular data.
You are associating information across rows. This is how the image
pages of rstoutart.com are done, for instance.
But you don't want to use a table just to keep a bunch of pictures and
descriptions in line. Nested <div>s or absolutely located <div>s
are a better fit and degrade better.
I'm not a real fan of most programs that generate pages of thumbnails
except on the rare occasions when every image needs exactly the same
treatment. Nothing can substitute, so far, for the human eye. I have
a resource at http://www.mbstevens.com/howtothumb/
that may be helpful.
Cheers,
m
David Dorward
> David Dorward wrote:
>
>> Floated divs with captions and images inside them.
>>
>> http://realworldstyle.com/thumb_float.html
>
> Your demonstration is quite convincing.
Mark Newhouse's demo, not mine.
> My site has many such thumbnails
> tables, and I might consider to change to your CSS strategy. There is
> one detail however that does not satisfy me completely: the caption is
> not really centered under the pict, it is slightly on the right. Why?
Looks like the image has a left margin, but the text is centred. If the
image was centred too it probably wouldn't be an issue.
Mary
<dor...@yahoo.com> wrote:
> Mary wrote:
> > I was wondering what the thinking is on using tables for the index
> > page of a picture gallery of thumbnails?
> How do the rows and columns relate to each other? (i.e. - don't do it)
<Nod>
<snip more stuff I said>
> Floated divs with captions and images inside them.
> http://realworldstyle.com/thumb_float.html
Thanks for the link, David! I believe I had looked at it a while back
and discarded this as "too difficult" or "too complicated". Live and
learn!
In a few minutes I was able to make myself a little sample from my own
pix using the example layout on that page as a start.
Interestingly enough the page claims that "This layout method will not
work with Netscape 4" but for me it degraded gracefully which is good
enough for my use!
Again, thanks!
Mary
m <dropallx_...@xmbstevens.comx> wrote:
> If each row of your table consists of a picture, then a description
> of that picture to its right
> (or vice versa), then you are using true tabular data.
> You are associating information across rows. This is how the image
> pages of rstoutart.com are done, for instance.
Thanks. Now I see when the use might be justified.
> But you don't want to use a table just to keep a bunch of pictures and
> descriptions in line.
<snip>
> Nothing can substitute, so far, for the human eye. I have
> a resource at http://www.mbstevens.com/howtothumb/
> that may be helpful.
Yes, most useful for making the thumbnails *and* linking. Thanks so
much! Been meaning to dip into perl...
I appreciate what I'm learning here, whether I ask the question or
someone else does.
Nick Theodorakis
<mbo...@preconceivednotionsrcn.com> wrote:
>I was wondering what the thinking is on using tables for the index
>page of a picture gallery of thumbnails?
>
>I am trying not to use tables for positioning of everything else, but
>it seems easier to lay out 20 or so pictures with a table. I would
>still use CSS layout, not a table, on the pages with the larger images
>that the thumbnail links to.
>
Do you have captions to go with those thumbs, or are they just <img>
links? If they are just images, you can put them all in one wrapper,
e.g.:
<p>
<img src= ...><img src= ...><img src= ...><img src= ...> etc. ...
</p>
and they will wrap naturally to the viewport without any fuss at all.
Then, if you want, you can suggest a margin for the images and the
container, and maybe slap on a "text-align: center" too.
Nick
--
Nick Theodorakis
nicholas_t...@urmc.rochester.edu
Leif K-Brooks
rows are aligned, and that won't happen if the captions are different
lengths. Any way to do that without tables?
Sid Ismail
<eurleif.No...@ec.REMOVE.ritters.biz> wrote:
> Great! One question from me, it looks a better if images on different
> rows are aligned, and that won't happen if the captions are different
> lengths. Any way to do that without tables?
Use tables.
<tr>
<td valign=top><img... ><br>caption</td>
<td... same
Sid
Headless
>Do you have captions to go with those thumbs,
If captions are needed then it's also worth considering converting them
to title's (who generally show up as a tooltip when hovering over the
image/link).
>or are they just <img>
>links? If they are just images, you can put them all in one wrapper,
>e.g.:
>
><p>
><img src= ...><img src= ...><img src= ...><img src= ...> etc. ...
></p>
If a wrapper is needed at all, I'd suggest <div>, not <p>.
Headless
Lauri Raittila
wrote:
> On Sun, 15 Jun 2003 01:10:04 -0400, Leif K-Brooks
> <eurleif.No...@ec.REMOVE.ritters.biz> wrote:
>
> > Great! One question from me, it looks a better if images on different
> > rows are aligned, and that won't happen if the captions are different
> > lengths.
I would say use CSS table stuff (http://www.w3.org/TR/CSS2/tables.html)
Display:inline-table;vertical-align:top; would do exactly what you want,
but only works on Opera 6+ (not that I have tested on O7 or M>1)
Or allocate enaugh space to every caption to fit the longest caption in
it, using em unit.
> Any way to do that without tables?
> Use tables.
Hm. Useful reply?
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
Sid Ismail
wrote:
> > > Great! One question from me, it looks a better if images on different
> > > rows are aligned, and that won't happen if the captions are different
> > > lengths.
>
> I would say use CSS table stuff (http://www.w3.org/TR/CSS2/tables.html)
> Display:inline-table;vertical-align:top; would do exactly what you want,
> but only works on Opera 6+ (not that I have tested on O7 or M>1)
>
> Or allocate enaugh space to every caption to fit the longest caption in
> it, using em unit.
Oh, shoot. Why worry about browser compatibility with strange CSS routines
if a properly structured table works in all browsers??
Sid
Lauri Raittila
wrote:
> Why worry about browser compatibility with strange CSS routines
> if a properly structured table works in all browsers??
[Tableless method was asked. I suppose OP knew tabled version]
It is not possible to make fluid image callery whith a table. And it is
not possible with tables either the way I understood OP meaned, if
staying fluid.
Try using image galleries made by tables using window (canvas) smaller
than 600px or even 800px, and you understand why that is not nice. I
usually either look all images using space key, or just look the ones I
need not to scroll for. OTOH, with fluid image gallery, you can make some
use of fullscreen 1600*1200 screen (especially if you need that big to
see linked images, you already have that big window).
It is possible to make tabled version with fixed rows/cols, and then make
it fluid for Opera, if you bother. Of course CSS will be possible to make
so that it will degrade well.
Nick Theodorakis
wrote:
[...]
>If a wrapper is needed at all, I'd suggest <div>, not <p>.
>
What?! And risk invoking the wrath of Karl? ;-)
Mary
Lauri Raittila <la...@raittila.cjb.net> wrote:
> In article <pbjoevovbhnbue2jl...@4ax.com>, Sid Ismail
> wrote:
>
> > Use tables.
>
> Hm. Useful reply?
I am finding the *discussion* useful. Thanks. ;)
(Not going to use tables, though)
rf
"Mary" <mbo...@preconceivednotionsrcn.com> wrote in message
news:bcfoa6$rt3$1...@bob.news.rcn.net...
> I was wondering what the thinking is on using tables for the index
> page of a picture gallery of thumbnails?
>
> I am trying not to use tables for positioning of everything else, but
> it seems easier to lay out 20 or so pictures with a table. I would
> still use CSS layout, not a table, on the pages with the larger images
> that the thumbnail links to.
You may with to have a look at http://www.cueword.com.au/mulubinba/
CSS for the thumbnail pages at
view-source:http://www.cueword.com.au/mulubinba/m.css
> Actually, I'm using a program to generate the thumbnails and links and
> it sets up the table for me (and that still needs some tweeking IMO).
> Should I try to then convert the tables to pure CSS layout?
The entire site above is generated by a program, thumbnails and all.
Cheers
Richard.
Karl Smith
> On Sun, 15 Jun 2003 13:19:23 +0100, Headless <invalid...@dna.ie>
> wrote:
>
> [...]
>
> >If a wrapper is needed at all, I'd suggest <div>, not <p>.
>
> What?! And risk invoking the wrath of Karl? ;-)
I think Headless is fairly safe, Nick, since Karl doesn't read this newsgroup.
Headless
>>If a wrapper is needed at all, I'd suggest <div>, not <p>.
>
>What?! And risk invoking the wrath of Karl? ;-)
Sorry, you've lost me.
Karl who? (Core|Smith), and why would his wrath be triggered by it?
Headless
William Tasso
Headless
>>> What?! And risk invoking the wrath of Karl? ;-)
>>
>> Sorry, you've lost me.
>>
>> Karl who? (Core|Smith), and why would his wrath be triggered by it?
>
>maybe he meant wraith
Sounded like a Startrek reference to me (The Wrath of Kahn).
Startrek's "Kahn" was a genetically engineered super human experiment
gone wonky, to say that about Karl (Core|Smith) is a bit harsh me thinks
;-)
Headless
Dylan Parry
> Startrek's "Kahn" was a genetically engineered super human experiment gone
> wonky, to say that about Karl (Core|Smith) is a bit harsh me thinks ;-)
Have you seen Karl's photo? He looks pretty scary to me!! (it's Khan btw).
--
Dylan Parry - http://www.DylanParry.com
Not playing any music, but savouring the silence.
Nick Theodorakis
wrote:
Well, he should, then. I hear he is looking for a place to discuss
web-related issues without worrying if he is authoring for the world
wide web (and despite the name of this ng, non-html questions are
somewhat tolerated here).
Nick
--
Nick Theodorakis
nicholas_t...@urmc.rochester.edu
"Trolls were abroad, no longer dull-witted,
but cunning and armed with dreadful weapons."
Nick Theodorakis
wrote:
Google CIWAH and CIWAS for the phrase "yucky div soup" and all will
become clear.
Basically, there is a running argument about the proper markup for
small blocks. Some (the "little <div>-ers") think that small generic
blocks should be marked up as <div>, whereas other (the "big
<div>-ers") feel that <div> is appropriate only for large document
divisions, and that small blocks should be marked up as <p>.
Nick
--
Nick Theodorakis
nicholas_t...@urmc.rochester.edu
William Tasso
> On Mon, 16 Jun 2003 18:02:00 +0100, Headless <invalid...@dna.ie>
> wrote:
>
>> nicholas_t...@urmc.rochester.edu (Nick Theodorakis) wrote:
>>
>>>> If a wrapper is needed at all, I'd suggest <div>, not <p>.
>>>
>>> What?! And risk invoking the wrath of Karl? ;-)
>>
>> Sorry, you've lost me.
>>
>> Karl who? (Core|Smith), and why would his wrath be triggered by it?
>
> Google CIWAH and CIWAS for the phrase "yucky div soup" and all will
> become clear.
>
> Basically, there is a running argument about the proper markup for
> small blocks. Some (the "little <div>-ers") think that small generic
> blocks should be marked up as <div>, whereas other (the "big
> <div>-ers") feel that <div> is appropriate only for large document
> divisions, and that small blocks should be marked up as <p>.
>
I imagine the distinction between 'big' and 'small' has been well
documented.
Headless
>>>>If a wrapper is needed at all, I'd suggest <div>, not <p>.
>>>
>>>What?! And risk invoking the wrath of Karl? ;-)
>>
>>Sorry, you've lost me.
>>
>>Karl who? (Core|Smith), and why would his wrath be triggered by it?
>
>Google CIWAH and CIWAS for the phrase "yucky div soup" and all will
>become clear.
>
>Basically, there is a running argument about the proper markup for
>small blocks. Some (the "little <div>-ers") think that small generic
>blocks should be marked up as <div>, whereas other (the "big
><div>-ers") feel that <div> is appropriate only for large document
>divisions, and that small blocks should be marked up as <p>.
Imo paragraph's are for text, images alone do not form a paragraph as
you suggested.
Headless
Nick Theodorakis
wrote:
[...]
>Imo paragraph's are for text, images alone do not form a paragraph as
>you suggested.
>
That's a valid argument, too, imo. I just haven't made up my mind yet.
Karl Smith
> Headless wrote:
>
> [...]
>
> >Imo paragraph's are for text, images alone do not form a paragraph as
> >you suggested.
Then, as the CIWAHians say, "Your alt-text isn't good enough."
If these "images" are really just graphics with nothing meaningful to
say then move them to the stylesheet where they belong. Then you can
put them in any kind of markup you like.
> That's a valid argument, too, imo...
>
> Nick
Why, thankyou Nick.
:-)
Jacqui or Pete
invalid...@dna.ie says...
> nicholas_t...@urmc.rochester.edu (Nick Theodorakis) wrote:
>
> >>>>If a wrapper is needed at all, I'd suggest <div>, not <p>.
> >>>
> Imo paragraph's are for text, images alone do not form a paragraph as
> you suggested.
Unless you're writing ransom notes: http://porjes.com/imgtxt.html