space under text in a table

[Jim S]

Jim S a écrit :



Jim, we're far from the topic of "space under text in a table" here. If
you want to post your issue in
alt.html and comp.infosystems.www.authoring.stylesheets discussion
newsgroups with a followup-to set to
comp.infosystems.www.authoring.stylesheets
then, I'm sure, you will get recommendations, tips and advices on how to
achieve your page layout with CSS and without resorting to tables.

Gérard

Nah.
Forget it.

 

[Roy A.]

Just as a suggestion for ditching the <table> markup, then take a look
at this:http://codesmiths.com/dingbat/lj/usenet/wheelchair/wheelchair.html

Not the worst suggestion. But why are you putting <div class="amazon"

before the main content. Why is it more important to read the "ad"

before the real content? In this sence, the orginal page is better.

 

[Andrew]

On Tue, 27 Feb 2007 06:58:26 +1100, dorayme wrote:

snip>>>>>>>>>>

Nice, well done.



Really? What is it that you want from the world if this perfectly
good and simple and adequate layout "needs a lot of work"?

Hi dorayme,

Thanks for that! Actually I am not that displeased with my effort and I
have produced a template based on it:

http://people.aapt.net.au/~adjlstrong/2_column_variation.html

Perhaps I should warn you that the background image is named:
shockingcolor.jpg with good reason I am quite keen on it!

Andrew

 

[Roy A.]

Roy A. wrote :


Well, improved accessibility, easier code maintenance, smaller webpage
(which brings many benefits), etc

Ok, that sounds good, but I belive there are some downsides.

Top seven reasons to avoid tables for layouthttp://www.workingwith.me.uk/table_free/seven_reasons_to_go_table_free

1. Tables and CSS isn't mutual exclusive. The diffrence in bandwidth
usage is marginal.
2. You have to structure your content. Don't say you're going to
change the layout with 'position: absolute'.
3. The content should be in logical order whatever you use. Tables
emulated with CSS isn't an exeption.
4. If PDAs and mobile phones can't disable tables, then they are not
good tools to browse the web. An issue to consider, but marginal. But
if that's the case, you shouldn't emulate tables with CSS. Just let it
float.
5. So that's the reason. Three levels of indentation is to
complicated.
6. The content should be in locial order. If you're hiding your
navigation for search engines, you're also hiding the navigation on
PDAs, mobile phones and for users with disabilities.
7. Contents bouncing back and forth will not happen if you're styling
your table correctly.

 

[Andy Dingley]

I cannot for the life of me see how to produce a page
like my homepage without using a table or indeed the other pages without frames.

Someone (John A. Little?) posted an example here last week, in the
thread about Freeway and the Ansel Adams photo site.

If you code the images as a simple list, with each image floated left,
then they'll wrap into "a table". Control the item width and the
container width and you can control the number of columns, just as for
a table.

The advantage is that it gives better behaviour on a narrower window.
The number of columns can change automatically to fit, without
squashing the columns up.


Nice photos BTW - I lived in Newcastle for some years and loved it.
Would have been even better if there'd been some work up there...

 

[Andy Dingley]

why are you putting <div class="amazon"> before the main content.

Simplifies the use of float.

Why is it more important to read the "ad"
before the real content?

It isn't. But placing it afterwards in a linearised sequence means
pushing it around more with the CSS, and that assumes either more CSS
skill, or using less understandable "magic" code borrowed from
somewhere else. It's a valid point, but it's a very minor one.

Personally I'd probably do this by using the well-known 3 column
example from bluerobot. This is pretty complicated though and uses
really obscure techniques to work around pathological resizing issues
that are only of very rare interest. I wouldn't suggest it to the OP
in this case.

 

[Ranter]

Thanks for your suggestions, everyone. I know nothing about CSS, so it
will take me a while to learn.

 

[Jim S]

Someone (John A. Little?) posted an example here last week, in the
thread about Freeway and the Ansel Adams photo site.

If you code the images as a simple list, with each image floated left,
then they'll wrap into "a table". Control the item width and the
container width and you can control the number of columns, just as for
a table.

The advantage is that it gives better behaviour on a narrower window.
The number of columns can change automatically to fit, without
squashing the columns up.

Nice photos BTW - I lived in Newcastle for some years and loved it.
Would have been even better if there'd been some work up there...

Thanks Andy.
As to the solution to my problem: you might as well be talking in a foreign
language viz "If you code the images as a simple list, with each image
floated left,...."
As you probably will have realised I am self-taught and using tables is an
easy way to hold pictures in a neat arrangement, which validates.
I have looked in, books on html and css and cannot see a way to hold
images/text of different sizes in a vertical/horizontal arrangement without
some form of scaffolding to hang them on.
With reference to the thread you refer to: I cannot trace it.

 

[Andy Dingley]

As to the solution to my problem: you might as well be talking in a foreign
language viz "If you code the images as a simple list, with each image
floated left,...."

Here's the example. Have a play with it, read the source.
<http://www.littleworksstudio.com/temp/usenet/alt.html.
20070216.php#pushpin06-3>

With reference to the thread you refer to: I cannot trace it.

<http://groups.google.co.uk/group/comp.sys.mac.apps/msg/
b6eddd3c68a5328c>

My apologies for mis-quoting Jonathan's name!

 

[Jim S]

Here's the example. Have a play with it, read the source.
<http://www.littleworksstudio.com/temp/usenet/alt.html.
20070216.php#pushpin06-3>


<http://groups.google.co.uk/group/comp.sys.mac.apps/msg/
b6eddd3c68a5328c>

My apologies for mis-quoting Jonathan's name!

Thanks

 

[Jonathan N. Little]

Someone (John A. Little?) posted an example here last week, in the
thread about Freeway and the Ansel Adams photo site.

It's "Jonathan"

http://www.littleworksstudio.com/temp/usenet/alt.html.20070216.php
Better Way

 

[dorayme]

It's all very well, but I have trawled through several tutorials and with my
page layout I cannot for the life of me see how to produce a page like my
homepage without using a table or indeed the other pages without frames.

As well as various test layouts, perhaps you might look at

<http://tvrs.org.au/gallery/gallery.html>

to see a gallery of pics in a web page setting that is fluid and
not table based. It can surely be improved upon but it does have
this basic idea of pics in divs, each floated in a line as are
words in a piece of text. Instead of words wrapping, it is little
boxes (divs), inside of which are pictures and a little bit of
text. That is what the basic idea of floating is about, boxes (be
they pics or divs or other things of rectangular nature) floating
to the left or right of other things, these other things can be
text or further boxy things, their tops approximately aligned,
when room runs out, they are wrapped.

 

[Jim S]

As well as various test layouts, perhaps you might look at

<http://tvrs.org.au/gallery/gallery.html>

to see a gallery of pics in a web page setting that is fluid and
not table based. It can surely be improved upon but it does have
this basic idea of pics in divs, each floated in a line as are
words in a piece of text. Instead of words wrapping, it is little
boxes (divs), inside of which are pictures and a little bit of
text. That is what the basic idea of floating is about, boxes (be
they pics or divs or other things of rectangular nature) floating
to the left or right of other things, these other things can be
text or further boxy things, their tops approximately aligned,
when room runs out, they are wrapped.

For me, the difference is that using frames, the "strip" scrolls and the
linked enlarged graphic stays still.
When I originally built the site I had a similar screen full of thumbnails
and getting the enlarged picture was a continuous series of going back and
forward between thumbnails and pictures. I think this is clumsy! I limit my
enlarged picture so that it can be seen in 800 x 600 px without sideways
scrolling, so the whole experience is stable.
The example you have chosen may well adjust to various resolutions, but to
me it is as I said earlier 'clumsy' because of the to-ing and fro-ing going
on. It also works well, as does the Ansel Adams site mentioned elsewhere,
because all the thumbnails are exactly the same size.
Printing IS a problem, but since my index page is not framed then Search
Engines seem to have no trouble.

 

[dorayme]

For me, the difference is that using frames, the "strip" scrolls and the
linked enlarged graphic stays still.
When I originally built the site I had a similar screen full of thumbnails
and getting the enlarged picture was a continuous series of going back and
forward between thumbnails and pictures. I think this is clumsy! I limit my
enlarged picture so that it can be seen in 800 x 600 px without sideways
scrolling, so the whole experience is stable.
The example you have chosen may well adjust to various resolutions, but to
me it is as I said earlier 'clumsy' because of the to-ing and fro-ing going
on. It also works well, as does the Ansel Adams site mentioned elsewhere,
because all the thumbnails are exactly the same size.
Printing IS a problem, but since my index page is not framed then Search
Engines seem to have no trouble.

Jim, I was just referring you to this to illustrate the idea of a
fluid gallery in a context of a navigation and header. You
expressed puzzlement as to how to do this fluid part. I was
trying to help you understand the idea better and see it in a
context.

The issue of the frames advantage is something quite separate (it
is something I have some sympathise with you over) You can still
have the wrapping (to fit a big range of screens and browser
windows) in a "thumnail" frame. Nothing to stop you much.

But there is one thing you say that is not quite right, about it
working because the pics are all the same size. It is true that
it helps to have something of uniform size, but it is not
necessarily the pics themselves. If you look carefully, you will
notice that in a simple table layout, a certain uniformity is
imposed on the cells automatically, the "magic of tables' you
could say. The cell size in a col will take its cue from the
_biggest_ combo of pic and text. In other words, and to simplify,
if the left most col has a cell with a pic that is bigger than
all the other pics in cells in that col, all those cells will
nevertheless have the same width at least.

Now, all this makes for a tidy arrangement. But it is something
that can be reasonably easily engineered into a fluid div/float
arrangement too. By inspecting the largest of your thumbnails and
sizing all divs for this size. Then all the pics will "tidy line
up" a bit like in a table but with the fabulous advantage of
being able to wrap.