Is there a way I can do without tables completely?

[Daphne Tregear]

Is anyone able to improve on this solution, and enable me to do
without tables completely?

http://www.cs.man.ac.uk/~daf/i-p-c-s...allery_old.php

uses a table to lay out the thumbnails and their captions. This a)
uses a table, b) wastes space when the window is large and c) overlaps
the RHS div when the window is small.

I use the same approach for

http://www.cs.man.ac.uk/~daf/i-p-c-s...sformation.php

which suffers the same fault and in addition tends to get the footer
painted over the middle of the page in Safari since you can't put the
height attribute on image buttons (presumably).

My best alternative is

http://www.cs.man.ac.uk/~daf/i-p-c-s...aq/gallery.php

which gets round problems b) and c) but uses a one-row table for each
button to keep its caption anchored to the image (I couldn't think of
any other way of doing it). In additon it looks terrible in Opera (I
tried version 8); even when there is plenty of space to fit in two or
more images in a row, Opera doesn't. The table caption is centred on
the containing div, not on the image button.

I anticipate having at least 100 thumbnails in the gallery. I'm trying
to keep things as fluid as possible so that people can use the text
size they like and the window size they like.

Does anyone have any suggestions, please?

--
Daf Tregear
Manchester, UK

[logic_earth]

Yes, you can do with out tables completely. But you can use tables for
what they were ment for 'Tubular Data' and as i see it a gallery can be
considered Tubular Data but that is just my thought.

[T S Skogvold]

On 23 May 2005 16:24:50 +0100, Daphne Tregear <da*@cs.man.ac.uk>
wrote:

Is anyone able to improve on this solution, and enable me to do
without tables completely?

http://www.cs.man.ac.uk/~daf/i-p-c-s...allery_old.php

Google is your friend. Have a look at for example <URL:
http://joshuaink.com/blog/206/css-photo-gallery-template> or <URL:
http://webdesign.about.com/cs/websitetemplates/p/blphotogallery.htm>.
--
Thomas

[Harlan Messinger]

logic_earth wrote:

Yes, you can do with out tables completely. But you can use tables for
what they were ment for 'Tubular Data' and as i see it a gallery can be
considered Tubular Data but that is just my thought.

Wouldn't you use the <TUBE> tag for that?

[Arne]

Once upon a time *T S Skogvold* wrote:

On 23 May 2005 16:24:50 +0100, Daphne Tregear <da*@cs.man.ac.uk>
wrote:

Is anyone able to improve on this solution, and enable me to do
without tables completely?

http://www.cs.man.ac.uk/~daf/i-p-c-s...allery_old.php

Google is your friend. Have a look at for example <URL:
http://joshuaink.com/blog/206/css-photo-gallery-template> or <URL:
http://webdesign.about.com/cs/websitetemplates/p/blphotogallery.htm>.

And http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/
A beautyfully made picture gallery, without tables.

--
/Arne

Top posters will be ignored. Quote the part you
are replying to, no more and no less! And don't
quote signatures, thank you.

[Blinky the Shark]

Arne wrote:

And http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/ A
beautyfully made picture gallery, without tables.

Concerning that photo of the mattresses, captioned "Bunks at loft for
slow ones": what...sleeping arrangements are determined by IQ? :)

--
Blinky Linux Registered User 297263
Killing all Usenet posts from Google Groups
Info: http://blinkynet.net/comp/uip5.html

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Blinky the Shark wrote:

Arne wrote:

And http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/ A
beautyfully made picture gallery, without tables.

And it would work much better, if the header image would have been done
differently. The it would work on 150px screen.
Concerning that photo of the mattresses, captioned "Bunks at loft for
slow ones": what...sleeping arrangements are determined by IQ? :)

EQ, more likely...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera:
https://secure.bmtmicro.com/opera/bu...tml?AID=882173

[Daphne Tregear]

>>>>> "Thomas" == T S Skogvold <th***************@gmail.com> writes:

Thomas> Google is your friend. Have a look at for example

Thank you for your response.

Thomas> http://joshuaink.com/blog/206/css-photo-gallery-template>

I need the captions on screen all the time. Personally I don't like
this solution.

Thomas> http://webdesign.about.com/cs/websit...otogallery.htm

Ah, this is more or less exactly the approach I tried to begin with,
and suffers from the same problem so I abandoned it. It starts out
displaying the captions and thumbnails fine, then on line 2 skips a
whole bunch of them leaving acres of white space. Looks a total mess
(Firefox & Mozilla on Solaris). Why is this?

--
Daf Tregear
Manchester, UK

[Justin Sane]

> http://www.cs.man.ac.uk/~daf/i-p-c-s...sformation.php

On 800x600, the cards overlap the right column. This is the problem of
tableless layouts :(

--
Thanks,

Justin.
http://www.auriance.com - http://www.auriance.net

[Daphne Tregear]

>>>>> "Justin" == Justin Sane <[e-mail]> writes:

http://www.cs.man.ac.uk/~daf/i-p-c-s...sformation.php

Justin> On 800x600, the cards overlap the right column.

I believe I pointed that out in my original post. Hence, partly, my
quest for a solution that didn't involve one large table.

Justin> This is the problem of tableless layouts :(

No -- that gallery (transformation.php) is done in one large table.

What's less acceptable is that the footer is rendered before the
thumbsnails have been completely loaded and hence gets superimposed
over the gallery in many browsers.

--
Daf Tregear
Manchester, UK

[Beauregard T. Shagnasty]

Justin Sane wrote:

http://www.cs.man.ac.uk/~daf/i-p-c-s...sformation.php

On 800x600, the cards overlap the right column. This is the problem of
tableless layouts :(

Tableless? The reason the cards overlap is because they are in a table!

Sure, the overall page layout is "tableless." It's Ben Meadowcroft's
three-column template. Now, if you stick a table in there, with four
cells per row, it has to go somewhere...

Here's one I did with no tables, and no overlap.
http://www.fingerlakesbmw.org/visual/flmgshow.php

Images are in a list.

--
-bts
-This space intentionally left blank.

[kchayka]

Daphne Tregear wrote:

>> "Thomas" == T S Skogvold <th***************@gmail.com> writes:

Thomas> http://webdesign.about.com/cs/websit...otogallery.htm

It starts out
displaying the captions and thumbnails fine, then on line 2 skips a
whole bunch of them leaving acres of white space. Looks a total mess
(Firefox & Mozilla on Solaris). Why is this?

FYI, the browser and platform are irrelevant. The reason it doesn't wrap
like you'd want is because of the variable height on each floated
image/caption div.

Floating left doesn't clear to the left edge of the container when
"wrapping" happens, it clears the div to its immediate left and will
float as far left as it can at that point. If there is a longer div in
the way before the float hits the left edge of the container, that's
where it stops, providing there is sufficient width at that point for
the float.

If you use floats, the only way to prevent it is to set an explicit
height on the div, which is tricky when both images and text are
involved. If you set height in px, a large text size can have ugly
overflow results. If you set height in ems, a small text size may make
it too small to hold the image. If you use either unit and also set a
min-height, you may well have the same kind of wrapping as before.

One option is to set div height in ems and also scale the image in ems.
This will maintain the ratio, but browsers generally do a poor job of
resizing graphics. If you don't care much about the quality of the
thumbs, this usually works OK.

Of course, if you only have thumbs, no captions, the whole thing is way
simpler. :) Set the float height in px and be done with it. Center the
images vertically if you like.

BTW, would you mind changing the way your newsreader handles quoted
replies to something closer to normal conventions? It really messes up
attributions, among other things.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Daphne Tregear]

>>>>> "kchayka" == kchayka <us****@c-net.us> writes:

kchayka> FYI, the browser and platform are irrelevant. The reason
kchayka> it doesn't wrap like you'd want is because of the
kchayka> variable height on each floated image/caption div.

Ah, I see, thank you. Because I tend to use a large font it knocks the
captions onto 2 lines, hence increasing the size of the div. Take the
font size down and the problem disappears. I want people to use
whatever font size they find comfortable.

kchayka> If you use floats, the only way to prevent it is to set
kchayka> an explicit height on the div, which is tricky when both
kchayka> images and text are involved. If you set height in px, a
kchayka> large text size can have ugly overflow results. If you
kchayka> set height in ems, a small text size may make it too
kchayka> small to hold the image. If you use either unit and also
kchayka> set a min-height, you may well have the same kind of
kchayka> wrapping as before.

Using a table for each image and caption is beginning to look
extremely attractive ;->. Eric Meyer (More Eric Meyer on CSS) makes
each caption a list of one item essentially, which seems just as
bizarre.

kchayka> One option is to set div height in ems and also scale the
kchayka> image in ems. This will maintain the ratio, but browsers
kchayka> generally do a poor job of resizing graphics. If you
kchayka> don't care much about the quality of the thumbs, this
kchayka> usually works OK.

I do care about the images -- they are the whole point of the
page. The thumbnails should be as clear as possible; readers won't
necessarily know their packs by the correct name, or there may not be
one.

kchayka> Of course, if you only have thumbs, no captions, the
kchayka> whole thing is way simpler. :) Set the float height in px
kchayka> and be done with it. Center the images vertically if you
kchayka> like.

Not an option.

kchayka> BTW, would you mind changing the way your newsreader
kchayka> handles quoted replies to something closer to normal
kchayka> conventions? It really messes up attributions, among
kchayka> other things.

Please expand "normal conventions". I use whatever the latest version
of emacs gives me as default, and have done for the last 18 years... I
have no preconceived notion of how quoting is done and just deal with
whatever comes my way.

--
Daf Tregear
Manchester, UK

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, kchayka wrote:

If you use floats, the only way to prevent it is to set an explicit
height on the div, which is tricky when both images and text are
involved. If you set height in px, a large text size can have ugly
overflow results. If you set height in ems, a small text size may make
it too small to hold the image. If you use either unit and also set a
min-height, you may well have the same kind of wrapping as before.
Setting height of image in px and text in ems is best approach. There is
no need to set height of div containing them.

Width is bigger problem, especially with text, as browsers use different
wrapping algorithms, and MacIE needs width to do any floating. Especially
setting it for both works for other browsers. Biggest problems you have
you have long captions, as either you need lots of empty space in case
someone needs big font size, or you get text in spilled out...
Of course, if you only have thumbs, no captions, the whole thing is way
simpler. :) Set the float height in px and be done with it. Center the
images vertically if you like.

I never float images if I don't have captions (or change of captions), as
I don't much care if images make straight lines. And I prefer images
centered as well...

Just but images after one another, and you get nice and flexible gallery
that works nicely. On every browser.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera:
https://secure.bmtmicro.com/opera/bu...tml?AID=882173

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Daphne Tregear wrote:

Using a table for each image and caption is beginning to look
extremely attractive ;->. Eric Meyer (More Eric Meyer on CSS) makes
each caption a list of one item essentially, which seems just as
bizarre.

As bizarre? I think it is more bizarre... List with one item makes no
sence, table with 2 cells make some sence. (but I might have understood
wrongly, as I haven't read MEMOCSS)

Unfortunately, tables won't solve this problem. Makes it less problem
maybe, but not solution.

Real solution is display:inline-block or display:inline-table, but it
won't work on Gecko. There is -moz-inline-block or something like that,
but it won't solve this problem, or at least I didn't find out how to use
it.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera:
https://secure.bmtmicro.com/opera/bu...tml?AID=882173

[Daphne Tregear]

>>>>> "Lauri" == Lauri Raittila <la***@raittila.cjb.net> writes:

Lauri> Just but images after one another, and you get nice and
Lauri> flexible gallery that works nicely. On every browser.

So, all I have to do is make the caption _part of the image
itself_. Problem solved ;->

--
Daf Tregear
Manchester, UK

[kchayka]

Lauri Raittila wrote:

in comp.infosystems.www.authoring.stylesheets, kchayka wrote:

If you use floats, the only way to prevent it is to set an explicit
height on the div,

Setting height of image in px and text in ems is best approach. There is
no need to set height of div containing them.

Don't know why I didn't think of that before. Of course it makes perfect
sense now. :)

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Justin Sane]

Em Tue, 24 May 2005 10:45:49 -0300, Beauregard T. Shagnasty
<a.*********@example.invalid> escreveu:

Here's one I did with no tables, and no overlap.
http://www.fingerlakesbmw.org/visual/flmgshow.php

It would overlap if there were a right column and larger images.
Here's my web site:
http://auriance.net/faq/index.php?si...=37&artlang=pt
Thanks,

Justin.
http://www.auriance.com - http://www.auriance.net

[Beauregard T. Shagnasty]

Justin Sane wrote:

Em Tue, 24 May 2005 10:45:49 -0300, Beauregard T. Shagnasty
<a.*********@example.invalid> escreveu:

Here's one I did with no tables, and no overlap.
http://www.fingerlakesbmw.org/visual/flmgshow.php
It would overlap if there were a right column and larger images.

Well, you must Plan Ahead. If there are large images, perhaps a
three-column layout is not suitable.
Here's my web site:
http://auriance.net/faq/index.php?si...=37&artlang=pt

...as yours. <g> I would reduce the image width a bit and not use a
third column on that page. I'd probably make the left column a bit
narrower as well. Your images aren't really thumbnails either, and
aren't suited for side-by-side display.

--
-bts
-This space intentionally left blank.

[Daphne Tregear]

>>>>> "Lauri" == Lauri Raittila <la***@raittila.cjb.net> writes:

Lauri> Of course, if you only have thumbs, no captions, the whole
Lauri> thing is way simpler. :) Set the float height in px and be done
Lauri> with it. Center the images vertically if you like.

Lauri> I never float images if I don't have captions (or change of
Lauri> captions), as I don't much care if images make straight
Lauri> lines. And I prefer images centered as well...

Lauri> Just but images after one another, and you get nice and
Lauri> flexible gallery that works nicely. On every browser.

OK, bear with me here while I understand exactly what's going on. In
http://www.cs.man.ac.uk/~daf/i-p-c-s...sformation.php I have
no captions, just have a succession of forms (displaying inline) with
image butttons. It's a bit untidy but almost bearable.

In Opera the images spill into the RHS margin. All the other browsers
don't suffer this. What's happening here?

Firefox plonks the footer wherever it feels like, despite my having a
clear: both after the forms. How do I stop it doing this?

If I want to centre each of the image buttons, how would I do this? I
tried wrapping a div round each form but all that succeeded in doing
was forcing each onto a new line.

All of the examples people have kindly provided use images which are
links. I'm using forms, which each browser styles for itself. A form
with an image button seems natural to me. Have I got to rewrite
everything using img and links? :-(

--
Daf Tregear
Manchester, UK

[Daphne Tregear]

>>>>> "Beauregard" == Beauregard T Shagnasty
<a.*********@example.invalid> writes:

Beauregard> Here's one I did with no tables, and no overlap.
Beauregard> http://www.fingerlakesbmw.org/visual/flmgshow.php

Thank you, Beauregard. I used your scheme and it works:
http://www.cs.man.ac.uk/~daf/i-p-c-s...lery_trial.php

I'll have to rework the thumbnails so they are all the same height.

One fly in the ointment: Netscape 7.1 on Windows. I haven't downloaded
Netscape 8 so that might suffer the same fault. It displays no
thumbnails and no captions. Not a sausage.

--
Daf Tregear
Manchester, UK

[Beauregard T. Shagnasty]

Daphne Tregear wrote:

>> "Beauregard" == Beauregard T Shagnasty

<a.*********@example.invalid> writes:

Beauregard> Here's one I did with no tables, and no overlap.
Beauregard> http://www.fingerlakesbmw.org/visual/flmgshow.php

Thank you, Beauregard. I used your scheme and it works:
http://www.cs.man.ac.uk/~daf/i-p-c-s...lery_trial.php

I'll have to rework the thumbnails so they are all the same height.

One fly in the ointment: Netscape 7.1 on Windows. I haven't
downloaded Netscape 8 so that might suffer the same fault. It
displays no thumbnails and no captions. Not a sausage.

Hmm. How odd. I have an old Netscrape 7.01 still installed, where my
page works and yours doesn't. I don't see an immediate answer.

Please supply sausage with grilled peppers and onions...

--
-bts
-This space intentionally left blank.

[Daphne Tregear]

>>>>> "Beauregard" == Beauregard T Shagnasty <a.*********@example.invalid> writes:

Beauregard> Hmm. How odd. I have an old Netscrape 7.01 still
Beauregard> installed, where my page works and yours doesn't. I
Beauregard> don't see an immediate answer.

It works under Netscape 8. Go figure.

Enough already! ;->

--
Daf Tregear
Manchester, UK

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Daphne Tregear wrote:

>> "Lauri" == Lauri Raittila <la***@raittila.cjb.net> writes:

Lauri> Just but images after one another, and you get nice and
Lauri> flexible gallery that works nicely. On every browser.

So, all I have to do is make the caption _part of the image
itself_. Problem solved ;->

Solves problem but creates bigger problem - how will people change text
size then?

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera:
https://secure.bmtmicro.com/opera/bu...tml?AID=882173

[kchayka]

Daphne Tregear wrote:

http://www.cs.man.ac.uk/~daf/i-p-c-s...lery_trial.php

One fly in the ointment: Netscape 7.1 on Windows. I haven't downloaded
Netscape 8 so that might suffer the same fault. It displays no
thumbnails and no captions. Not a sausage.

You have put the "spacer" div that clears the floats outside of the
"thumbs" div. It needs to go inside.

Considering all the overflow:hidden properties used, I'm surprised
Firefox doesn't do the same as NS7.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.