Free line breaking

[Klaus Cammin]

Following problem: I have a webpage with many little images, (see
http://www.klaca.de switch to English, then 'Compacted View').

These are implemented simply as sequence of <A HREF=..><IMG SRC=...></A> and
show a very desirable behavior: when the window size is altered, the images
automatically are nicely regrouped to fit into the new size. And that is
independent from screen size or browser type, AFAIK.

Now in the normal sight of my page the images are somewhat bigger and they
have a text underline. The line breaking property is lost and furthermore
because I use Tables (which is IMHO the best way to put the text right
beneath the image), I'm confined to a fixed column number.

How can I achieve the same line breaking behaviour as with the images alone,
but now with the subtext added? I.e. image and text should be viewed as unit,
and the browser should always break them together to the next line.

I tried many things with tables, but until now failed badly.
Using the text as an image is not an option, because these are often changed.

Please help!


Viele Grüße
Klaus

 

[Els]

Following problem: I have a webpage with many little images, (see
http://www.klaca.de switch to English, then 'Compacted View').

Why don't you just say http://home.pages.at/klaca/engstart.htm and
then to click 'compacted view', or even better:
http://home.pages.at/klaca/ENGFLGS.HTM

Saves us the time to find it, especially since you forgot to mention
the "click here to proceed" link first, as I spent at least 10 seconds
not finding a 'compacted view' link...

These are implemented simply as sequence of <A HREF=..><IMG SRC=...></A> and
show a very desirable behavior: when the window size is altered, the images
automatically are nicely regrouped to fit into the new size. And that is
independent from screen size or browser type, AFAIK.

Now in the normal sight of my page the images are somewhat bigger and they
have a text underline. The line breaking property is lost and furthermore
because I use Tables (which is IMHO the best way to put the text right
beneath the image), I'm confined to a fixed column number.

There is no need to make it a table.

How can I achieve the same line breaking behaviour as with the images alone,
but now with the subtext added? I.e. image and text should be viewed as unit,
and the browser should always break them together to the next line.

I tried many things with tables, but until now failed badly.
Using the text as an image is not an option, because these are often changed.

Feel free to check out my code:
http://locusmeus.com/test/thumbswithcaptionslist.html (uses 2-celled
tables)
http://locusmeus.com/test/thumbswithcaptionslistcentered.html (uses no
tables at all)

Obviously, the second example can be made to be left-aligned instead
of centered as well.

 

[Jonathan N. Little]

Following problem: I have a webpage with many little images, (see
http://www.klaca.de switch to English, then 'Compacted View').

These are implemented simply as sequence of <A HREF=..><IMG SRC=...></A> and
show a very desirable behavior: when the window size is altered, the images
automatically are nicely regrouped to fit into the new size. And that is
independent from screen size or browser type, AFAIK.

Now in the normal sight of my page the images are somewhat bigger and they
have a text underline. The line breaking property is lost and furthermore
because I use Tables (which is IMHO the best way to put the text right
beneath the image), I'm confined to a fixed column number.

Not necessarily. Can be done quite effectively with no table. Have show
examples numerous times in this NG.

How can I achieve the same line breaking behaviour as with the images alone,
but now with the subtext added? I.e. image and text should be viewed as unit,
and the browser should always break them together to the next line.

How about a URL of what you are trying to do, and then we can give you
possible solutions.

I tried many things with tables, but until now failed badly.
Using the text as an image is not an option, because these are often changed.

Please help!

 

[Jonathan N. Little]

Following problem: I have a webpage with many little images, (see
http://www.klaca.de switch to English, then 'Compacted View').

Sorry missed the URL, anyway here is a table-less way, advange is the
view port is reduced the number of "columns" changes to full the
available space!

CSS:

/* adjust to taste */
..flags DIV { float: left; margin: .5em; padding: .5em; width: 5em; }
..flags DIV A { display: block; }
..flags DIV A IMG { border: 0; }
/* clear float so sections stay together */
H2 { clear: left; }


HTML

<h2>
<a href="http://home.pages.at/klaca/ENGFLGS4.HTM">&lt;== R-Z</a>
Letters
<a href="http://home.pages.at/klaca/ENGFLGS2.HTM">A-E ==&gt;</a>
</h2>

<div class="flags">
<div>
<a href="http://home.pages.at/klaca/AFGHANIS/ENGLAND.HTM">
<img src="http://home.pages.at/klaca/LAENDER/AFGHANIS.GIF"
title="Afghanistan" width="60"></a>
<a
href="http://home.pages.at/klaca/AFGHANIS/ENGLAND.HTM">Afghanistan</a>
</div>

<div>
<a href="http://home.pages.at/klaca/ALBANIA/ENGLAND.HTM">
<img src="http://home.pages.at/klaca/LAENDER/ALBANIA.GIF"
title="Albania" width="60"></a>
<a href="http://home.pages.at/klaca/ALBANIA/ENGLAND.HTM">Albania</a>
</div>

<div>
<a href="http://home.pages.at/klaca/ALGERIA/ENGLAND.HTM">
<img src="http://home.pages.at/klaca/LAENDER/ALGERIA.GIF"
title="Algeria" width="60"></a>
<a href="http://home.pages.at/klaca/ALGERIA/ENGLAND.HTM">Algeria</a>
</div>

<div>
<a href="http://home.pages.at/klaca/ANDORRA/ENGLAND.HTM">
<img src="http://home.pages.at/klaca/LAENDER/ANDORRA.GIF"
title="Andorra" width="60"></a>
<a href="http://home.pages.at/klaca/ANDORRA/ENGLAND.HTM">Andorra</a>
</div>

<div>
<a href="http://home.pages.at/klaca/ANGOLA/ENGLAND.HTM">
<img src="http://home.pages.at/klaca/LAENDER/ANGOLA.GIF"
title="Angola" width="60"></a>
<a href="http://home.pages.at/klaca/ANGOLA/ENGLAND.HTM">Angola</a>
</div>

<div>
<a href="http://home.pages.at/klaca/ANGOLA/ENGLAND.HTM">
<img src="http://home.pages.at/klaca/LAENDER/ANTI_AND.GIF"
title="Antigua and Barbuda" width="60"></a>
<a href="http://home.pages.at/klaca/ANGOLA/ENGLAND.HTM">Antigua and
Barbuda</a>
</div>

...rest of your section flags ...


</div>

<h2>Your nest section ... </h2>


Simpler markup, more flexible for user and easier for you to maintain...

 

[dorayme]

http://locusmeus.com/test/thumbswithcaptionslistcentered.html

In my Safari, the thumb cap "what's it called" wraps and the
"called" which is on the next line is cut off horizontally.

Taking out height:2em; from your

span.caption{
display:block;
height:2em;

and

putting in padding-bottom:10px; into

span.caption a

fixed it but perhaps buggers up something else?

 

[Jim Moe]

Following problem: I have a webpage with many little images, (see
http://www.klaca.de switch to English, then 'Compacted View').

How can I achieve the same line breaking behaviour as with the images alone,
but now with the subtext added? I.e. image and text should be viewed as unit,
and the browser should always break them together to the next line.

See
<http://www.spartanicus.utvinternet.ie/centered_image_gallery_with_captions.htm>.

 

[Els]

In my Safari, the thumb cap "what's it called" wraps and the
"called" which is on the next line is cut off horizontally.

Taking out height:2em; from your

span.caption{
display:block;
height:2em;

and

putting in padding-bottom:10px; into

span.caption a

fixed it but perhaps buggers up something else?

Probably ;-)

When you see the wrapped bits being cut off - don't the last letters
of longer words with the other thumbs get cut off too?

Anyway, the padding is not needed (afaics, using Firefox), just take
out the height:2em; on both "span.caption" and "span.caption a". When
I do this in Firefox, things start looking 'unbalanced', but wrapped
text remains visible.

This is not a problem of course, unless you would float them to the
left instead of have them as inline boxes.

I've made a test without the height:2em (and without the 10px padding)
and with more text, to ensure wrapping in all browsers. Can you check
what it looks like in Safari please?
http://locusmeus.com/test/thumbswraptest.html

I also discovered a weird thing with these thumbnail pages in IE, but
I'll make a separate post about that.

 

[dorayme]

When you see the wrapped bits being cut off - don't the last letters
of longer words with the other thumbs get cut off too?

No...

at http://locusmeus.com/test/thumbswithcaptionslistcentered.html

I just saw the one I mentioned ... The bit I saw had some thumbs
with very short names like Yellow, there were no long names, I
looked at your source.
....

I've made a test without the height:2em (and without the 10px padding)
and with more text, to ensure wrapping in all browsers. Can you check
what it looks like in Safari please?
http://locusmeus.com/test/thumbswraptest.html

http://members.optusnet.com.au/droovies/pics/elsThumbs.jpg

is what I now see in Safari.

btw... If I had to say which, in some intelligence test, I would
say Ernie was odd man out of the little collection. But these
judgements are what get me into the just below average
intelligence range...

 

[Els]

No...

at http://locusmeus.com/test/thumbswithcaptionslistcentered.html

I just saw the one I mentioned ... The bit I saw had some thumbs
with very short names like Yellow, there were no long names, I
looked at your source.
...


http://members.optusnet.com.au/droovies/pics/elsThumbs.jpg

is what I now see in Safari.

Ah okay, I see your 10px padding need
In Opera it's worse - any image that is on the same row as the taller
one, gets a large gap below the text to make the box the same height.
I think the best is just to avoid wrapping, or make sure that you know
how many lines it will wrap to, and just set an appropriate height for
that.

btw... If I had to say which, in some intelligence test, I would
say Ernie was odd man out of the little collection. But these
judgements are what get me into the just below average
intelligence range...

No, I'd say you're right. He's the only one that isn't alive or at
least 3-dimensional. Consider your intelligence compatible with mine
;-)

 

[Sally Thompson]

No...

at http://locusmeus.com/test/thumbswithcaptionslistcentered.html

I just saw the one I mentioned ... The bit I saw had some thumbs
with very short names like Yellow, there were no long names, I
looked at your source.
...


http://members.optusnet.com.au/droovies/pics/elsThumbs.jpg

is what I now see in Safari.

I see the same in Safari, Camino and Firefox (on the Mac), but in Opera on
the Mac I see this:
<http://www.sallysweb.co.uk/Picture-1.jpg>

(Sorry about mixed case, was in a hurry)

 

[Els]

[http://locusmeus.com/test/thumbswraptest.html]

http://members.optusnet.com.au/droovies/pics/elsThumbs.jpg

is what I now see in Safari.

I see the same in Safari, Camino and Firefox (on the Mac), but in Opera on
the Mac I see this:
<http://www.sallysweb.co.uk/Picture-1.jpg>

(Sorry about mixed case, was in a hurry)

Eew...
Which version of Opera is that?

And do you see the same effect in the earlier version:
http://locusmeus.com/test/thumbswithcaptionslistcentered.html
?

 

[Klaus Cammin]

Hi Els,

Why don't you just say http://home.pages.at/klaca/engstart.htm and
then to click 'compacted view', or even better:
http://home.pages.at/klaca/ENGFLGS.HTM

Oh sorry, you're right, I should have done this.
Just hacked the post quickly.

Feel free to check out my code:
http://locusmeus.com/test/thumbswithcaptionslist.html
(uses 2-celled table)
http://locusmeus.com/test/thumbswithcaptionslistcentered.html
(uses no tables at all)

That looks great and so do the other propositions.
Thank you all for them.

I guess now I have enough material for testing to see which is the
speediest and easiest to maintain alternative. Jonathan's idea also looks
great in that respect, thanks to him also.

I was well aware that I'd wind up with CSS style declarations, but could
not quite figure out how to accomplish it. As far as I can see, the
decisive issue here are the display declarations.


Viele Grüße
Klaus

 

[Els]

That looks great and so do the other propositions.
Thank you all for them.

Don't forget to read the rest of this thread, and also the stuff
following another thread (started by me your time 10.37), in which is
shown that different browsers may give different results, especially
when not all captions are of the same length.

 

[Sally Thompson]

On Wed, 12 Jul 2006 10:12:12 +0100, dorayme wrote
(in article
<[email protected]>):
[http://locusmeus.com/test/thumbswraptest.html]

http://members.optusnet.com.au/droovies/pics/elsThumbs.jpg

is what I now see in Safari.

I see the same in Safari, Camino and Firefox (on the Mac), but in Opera on
the Mac I see this:
<http://www.sallysweb.co.uk/Picture-1.jpg>

Eew...
Which version of Opera is that?

Version 9.00 (sorry for delay, have been out all day).

And do you see the same effect in the earlier version:
http://locusmeus.com/test/thumbswithcaptionslistcentered.html
?

Not quite - the images line up at the top but the alternate captions are
still missing:

<http://www.sallysweb.co.uk/elsearliertest.jpg>

Sometimes I wish I had only one browser and lived in blissful ignorance <g>

 

[Els]

On Wed, 12 Jul 2006 10:12:12 +0100, dorayme wrote
(in article
<[email protected]>):
[http://locusmeus.com/test/thumbswraptest.html]

http://members.optusnet.com.au/droovies/pics/elsThumbs.jpg

is what I now see in Safari.

I see the same in Safari, Camino and Firefox (on the Mac), but in Opera on
the Mac I see this:
<http://www.sallysweb.co.uk/Picture-1.jpg>

Eew...
Which version of Opera is that?

Version 9.00

Good - I can download that one and see what it does - much easier to
work with a browser directly, than changing things while others send
you screenshots

(sorry for delay, have been out all day).

Don't be sorry - be glad you're one of the lucky ones who still manage
to find Usenet's fire exit sometimes

Not quite - the images line up at the top but the alternate captions are
still missing:

<http://www.sallysweb.co.uk/elsearliertest.jpg>

I'm intrigued by the alternate thing - I so hope it does that on
Windows Opera 9 too! ;-)

Sometimes I wish I had only one browser and lived in blissful ignorance <g>

Nah, that would be boring!

 

[Sally Thompson]

Sally Thompson wrote:
On Wed, 12 Jul 2006 10:12:12 +0100, dorayme wrote
(in article
<[email protected]>):

[http://locusmeus.com/test/thumbswraptest.html]

http://members.optusnet.com.au/droovies/pics/elsThumbs.jpg

is what I now see in Safari.

I see the same in Safari, Camino and Firefox (on the Mac), but in Opera
on
the Mac I see this:
<http://www.sallysweb.co.uk/Picture-1.jpg>

Eew...
Which version of Opera is that?

Version 9.00

Good - I can download that one and see what it does - much easier to
work with a browser directly, than changing things while others send
you screenshots

Not quite - the images line up at the top but the alternate captions
are
still missing:

<http://www.sallysweb.co.uk/elsearliertest.jpg>

I'm intrigued by the alternate thing - I so hope it does that on
Windows Opera 9 too! ;-)

Would be interested to know. Can't get my ancient Windows laptop online at
the moment, since I haven't grasped the finer points of getting it to point
to the wireless network I now have. I haven't bothered too hard, but must
look into it soon.

Nah, that would be boring!

 

[dorayme]

Ah okay, I see your 10px padding need
In Opera it's worse - any image that is on the same row as the taller
one, gets a large gap below the text to make the box the same height.
I think the best is just to avoid wrapping, or make sure that you know
how many lines it will wrap to, and just set an appropriate height for
that.

As it happens, I did try some no nbsp; in the captions just to
follow a thought I had...but they did not have the desired
effect... (like it did not stop the wrapping!). I tried this in
my FF "edit css" thing...

No, I'd say you're right. He's the only one that isn't alive or at
least 3-dimensional. Consider your intelligence compatible with mine
;-)

No I absolutely insist on a lower intelligence! In the tests
where you are supposed to continue a series (say of numbers)
according to a pattern, I would continue in whatever way I
fancied and always cited a pattern to suit. It was never the
boring old fart patterns the makers of the tests had in mind.

 

[dorayme]

<http://www.sallysweb.co.uk/Picture-1.jpg>

(Sorry about mixed case, was in a hurry)

Eew...[/QUOTE]

That is exactly the sound I made! I am not kidding.

 

[Els]

Good - I can download that one and see what it does - much easier to
work with a browser directly, than changing things while others send
you screenshots

[snip]

I'm intrigued by the alternate thing - I so hope it does that on
Windows Opera 9 too! ;-)

Would be interested to know. Can't get my ancient Windows laptop online at
the moment, since I haven't grasped the finer points of getting it to point
to the wireless network I now have. I haven't bothered too hard, but must
look into it soon.

Well, I just installed it under Vista, and it shows exactly the same
thing as in Opera on your Mac, so... I'll let you know if/when/how I
fixed it

 

[Els]

As it happens, I did try some no nbsp; in the captions just to
follow a thought I had...but they did not have the desired
effect... (like it did not stop the wrapping!). I tried this in
my FF "edit css" thing...

white-space:nowrap; on span.caption a works just fine in my FF "edit
css" thing. What did you try?
Doesn't have a desired effect though, as then the text will spill out
of the box, and become entirely unvisible (black on black).

No I absolutely insist on a lower intelligence! In the tests
where you are supposed to continue a series (say of numbers)
according to a pattern, I would continue in whatever way I
fancied and always cited a pattern to suit. It was never the
boring old fart patterns the makers of the tests had in mind.

If that's a sign of lack of intelligence, I'm a lot less intelligent
than I thought I was ;-)
These tests often assume that there's only one pattern possible, so
they simply don't check for alternative possibilities.

Take this very (too) simple one: 1 2 3 5 .. ..
They think it's obvious that the next one is 8, but I figure it could
be 6.
Their pattern: 1 2 3 5 8 13 21 34 55
My pattern: 1 2 3 5 6 7 9 10 11 13

Who's to say I'm wrong? ;-)