Wrapping things other than text or images

[Keith Thompson]

I checked the FAQ, but didn't find an answer to this question. I also
checked the O'Reilly HTML and CSS books, with a similar lack of
results, though I could have missed something in the CSS book.

If a web page contains a long block of text, browsers will word-wrap
it to the width of the browser window. Similarly, a series of images
(<img src="...">) without any other tags will wrap to the width of the
browser window. In both cases, if the browser supports it, resizing
the browser window may cause the text or images to be re-wrapped
automatically.

I'd like to do the same thing with a series of small tables. Each
table contains a small thumbnail image and a caption. Each table
should be displayed at a more or less fixed size; the number of tables
that can fit across the screen depends on the size of the browser
window. I want the number of tables displayed on each row to depend
on the size of the browser window, as if each table were an image.

I know how to make the tables stack vertically (leaving lots of white
space to the right), or horizontally (forcing the user to scroll right
to see them all), or with a fixed number of items per row, but I don't
know how to make the number of items per row depend on how many will
actually fit.

I'm assuming a table for each image and caption is the right approach,
but perhaps I should be using something else.

(I suppose I could generate a JPEG image containing the thumbnail and
caption, but that's ugly; I want the caption to be searchable text,
and generating the composite images is more trouble than it's worth.)

Is there an easy and elegant way to do this? Is there an ugly and
difficult way to do it?

--
Keith Thompson (The_Other_Keith) ks***@mib.org <http://www.ghoti.net/~kst>
San Diego Supercomputer Center <*> <http://www.sdsc.edu/~kst>
Schroedinger does Shakespeare: "To be *and* not to be"

[Neal]

On Sat, 17 Jan 2004 05:16:15 GMT, Keith Thompson <ks***@mib.org> wrote:

If a web page contains a long block of text, browsers will word-wrap
it to the width of the browser window. Similarly, a series of images
(<img src="...">) without any other tags will wrap to the width of the
browser window. ...
I'd like to do the same thing with a series of small tables.

You could try this. I have not tested it, but it ought to work.

<div id="tables">

<div class="container">
<table> ... </table>
</div>

<div class="container">
<table> ... </table>
</div>

etc... then close the tables div
</div>

Set width for #tables, and float .container left. What should happen is
the table-containers will float left until there is no more room, the next
one will drop below, and it all starts again.

[Neal]

On Sat, 17 Jan 2004 00:26:59 -0500, Neal <ne*****@spamrcn.com> wrote:

You could try this. I have not tested it, but it ought to work.

I have tested it. Works like a charm. I simplified the markup: <div
id="tables"><table class="container">...</table> repeat </div>.

Here's the CSS I used. Width percentages or units can be altered as needed.

#tables {
width: 100%;
margin: 0.5em;
}

..container {
float: left;
width: 20%;
margin: 0.5em;
padding: 0.5em;
}

[Jukka K. Korpela]

Keith Thompson <ks***@mib.org> wrote:

Each
table contains a small thumbnail image and a caption. Each table
should be displayed at a more or less fixed size; the number of
tables that can fit across the screen depends on the size of the
browser window.
You can use the align="left" attribute in <table> tags. In addition to
positioning the table on the left in the available space, it makes it
"floating", so that subsequent content appears, or "flows", on the
right of it, if there's room there.

After the sequence of tables, use <br clear="all"> to stop the effect.

Alternatively, you could use float: left for the table elements in CSS
and clear: both for the next element after them.
I'm assuming a table for each image and caption is the right
approach, but perhaps I should be using something else.

It's the best option in this case if you use HTML only, since there's
no adequate markup for an image caption in HTML as currently defined.
And such a table might even be said to be structural, although simple,
since the image and the caption belong logically together.

But if you use CSS, you could put the image and the caption just inside
a div element and apply float to the div elements. This would let you
make the image and the caption together be part of "link text", so that
the user can click on either of them:

<div class="pic">
<a href="..."><img alt="" src="..."><br>
Caption text</a>
</div>

You would set the width of the div elements in CSS, probably to equal
the image width, since by default div is occupies the available width
horizontally.

The drawback in this approach is that when CSS is not in use, the page
appears rather odd, effectively with the thumbnails and texts in one
column.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

[Brian]

Keith Thompson wrote:

If a web page contains a long block of text, browsers will
word-wrap it to the width of the browser window.

I'd like to do the same thing with a series of small tables.
Float the tables left or right. You may need to set a width, too. Set
the width in appropriate units (em for text, px for images).
Each table contains a small thumbnail image and a caption.

Are you using the tables for layout? It seems like a DIV is the
correct markup.

<div class="imageDiv">
<img>
<div>caption</div>
</div>

float .imageDiv instead of table.

--
Brian
follow the directions in my address to email me

[Stan Brown]

It seems "Jukka K. Korpela" wrote in
comp.infosystems.www.authoring.html in article
<Xn****************************@193.229.0.31>:

You can use the align="left" attribute in <table> tags.
Problem with that, IIRC, is that some versions of MSIE then left-
align the text of all cells within the table, including <th> header
cells.
But if you use CSS, you could put the image and the caption just inside
a div element and apply float to the div elements.

Much safer.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Lauri Raittila]

In article Stan Brown wrote:

It seems "Jukka K. Korpela" wrote in
comp.infosystems.www.authoring.html in article
<Xn****************************@193.229.0.31>:

You can use the align="left" attribute in <table> tags.

Problem with that, IIRC, is that some versions of MSIE then left-
align the text of all cells within the table, including <th> header
cells.

And Opera 7 goes crazy, unless you also use float...

--
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.

[Keith Thompson]

Brian <us*****@julietremblay.com.invalid-remove-this-part> writes:

Keith Thompson wrote:

If a web page contains a long block of text, browsers will
word-wrap it to the width of the browser window.
I'd like to do the same thing with a series of small tables.

Float the tables left or right. You may need to set a width, too. Set
the width in appropriate units (em for text, px for images).

I seem to have understated my level of ignorance. How do I do that?
Is it a CSS thing?

(I own a copy of the O'Reilly CSS book, but I won't have access to it
for the next week or so; fortunately, I'm in no particularly hurry to
get this done.)

--
Keith Thompson (The_Other_Keith) ks***@mib.org <http://www.ghoti.net/~kst>
San Diego Supercomputer Center <*> <http://www.sdsc.edu/~kst>
Schroedinger does Shakespeare: "To be *and* not to be"

[Keith Thompson]

Keith Thompson <ks***@mib.org> writes:

Brian <us*****@julietremblay.com.invalid-remove-this-part> writes:

Keith Thompson wrote:

If a web page contains a long block of text, browsers will
word-wrap it to the width of the browser window.
I'd like to do the same thing with a series of small tables.

Float the tables left or right. You may need to set a width, too. Set
the width in appropriate units (em for text, px for images).

I seem to have understated my level of ignorance. How do I do that?
Is it a CSS thing?

Ok, I think I've got it now. Brian's response was enough to let me do
a bit of Googling, which turned up a tutorial on floating an image
thumbnail gallery:

<http://css.maxdesign.com.au/floatutorial/tutorial0401.htm>

Thanks.

--
Keith Thompson (The_Other_Keith) ks***@mib.org <http://www.ghoti.net/~kst>
San Diego Supercomputer Center <*> <http://www.sdsc.edu/~kst>
Schroedinger does Shakespeare: "To be *and* not to be"