473,545 Members | 2,812 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Wrapping things other than text or images

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_Keit h) 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"
Jul 20 '05 #1
8 2610
On Sat, 17 Jan 2004 05:16:15 GMT, Keith Thompson <ks***@mib.or g> 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="containe r">
<table> ... </table>
</div>

<div class="containe r">
<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.
Jul 20 '05 #2
On Sat, 17 Jan 2004 00:26:59 -0500, Neal <ne*****@spamrc n.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"><ta ble class="containe r">...</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;
}
Jul 20 '05 #3
Keith Thompson <ks***@mib.or g> 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

Jul 20 '05 #4
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

Jul 20 '05 #5
It seems "Jukka K. Korpela" wrote in
comp.infosystem s.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/
Jul 20 '05 #6
In article Stan Brown wrote:
It seems "Jukka K. Korpela" wrote in
comp.infosystem s.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.

Jul 20 '05 #7
Brian <us*****@juliet remblay.com.inv alid-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_Keit h) 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"
Jul 20 '05 #8
Keith Thompson <ks***@mib.or g> writes:
Brian <us*****@juliet remblay.com.inv alid-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.c om.au/floatutorial/tutorial0401.ht m>

Thanks.

--
Keith Thompson (The_Other_Keit h) 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"
Jul 20 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
3826
by: Roy Smith | last post by:
I've got a C library with about 50 calls in it that I want to wrap in Python. I know I could use some tool like SWIG, but that will give me a too-literal translation; I want to make some modifications along the way to make the interface more Pythonic. For example, all of these functions return an error code (typically just errno passed...
2
13918
by: Suzanne Boyle | last post by:
I have the following code in a webpage: <p><img src="images/clydesdale.gif" width="100" height="41" style="float: left;" /> <strong>Test</strong><br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo...
10
2311
by: Douglas G | last post by:
I've tried various ideas on this problem, but I don't see word wrapping. Can you point out what is wrong? It's a K&R exercise, and I'm still new to programming. Other pointers would be helpful too. #include "header.h" /* does the wordwrapping */ void fold(char buffer, int len) {
9
3705
by: edski | last post by:
Using a technique I found here: http://www.vertexwerks.com/tests/sidebox/ I created these "dialogue" boxes: http://www.ebph.org/test.htm In IE6, the text does not wrap correctly around the image, which is floated right. Any ideas / suggestions?
4
2585
by: Shark | last post by:
Hi, I have the following code: <div id="navAlpha"><div id="mainImage"><img src="/All/10001/main.jpg"></div> <div id="mainInfo"> // a list apart's mountain top <dl id="red"><dt>nick: astronomer</dt><dd> R: 800</dd><dd> P: 875</dd></dl></div> <div style='clear: both;'>&nbsp;</div></div>
4
4424
by: avi | last post by:
Hello, I am trying to vertically center text in a background image, I found a solution on this site that sets the line-height to the height of the background image. This works just fine, except when the text is too long that it wraps. div.module h2{ width:178px; width:"182px"; height:28px; font-family:"Avenir Black", verdana, geneva,...
6
5161
by: Greg Esres | last post by:
I have some text lines to print that are much longer than the width of the paper, maybe as much as 6 times. For a given page, I'd like everything that doesn't fit to print on a second page, and whatever doesn't fit there to go on a third page, etc, so that I can piece together the final output by laying the pages side by side. Things that...
1
1436
by: Star258 | last post by:
I have a few paragraphs on my site and an ul that I’ve set up with a css background image. I wanted the image separate from the main background and still have the ability to type on it. Is there a way to get the text to wrap around the ul and the image? Or a better way to set it up in the first place? Right now I can only see how to have text...
1
4324
by: DevInCode | last post by:
I'm trying to get text to wrap around a round image. Wrapping around a square image is no problem. The image I am using is obviously square, but its transparent in such away that it looks round (ie a picture of a wheel). My idea was to cut the image into slices then have them display on top of one another. But they don't stack, they just go...
0
7502
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7946
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7457
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
6026
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5360
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5078
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3491
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
1921
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
0
744
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.