convert a table to a <div> controlled layout

[Jim S]

..and I say potahto...


My massive screen doesn't matter. The browser window is only about 900px
wide.


I'm sure you could Google up a reference about ragged-left text being
harder to read than aligned-left text. Centred text for captions looks
fine for short one-liners.

The same applies to justified text, such as newspapers tend to use. When
there are larger words in the narrow columns, you end up with uneven
spacing between words, which also disrupts the flow of the eye.

In general terms I'm with you, as you can see here
http://www.jimscot.myby.co.uk/bells/Bells_The_Tower/Tower_history.html
but the text in the above question is a caption and IMO that's different,
but I am prepared to 'format' the text into a block which will suit all
viewers, but it's going to push me off the bottom of my screen like this
http://www.jimscot.pwp.blueyonder.co.uk/jims_page_js.htm

 

[Jim S]

Well, lets take things slowly, Jim. First let us deal with the single
pic pages and we will talk about the rest later.

For a start, the buttons can never get lost if you have them as I put
them. Where can they go? What do you mean chase them up and down the
screen? I am in Australia and everything is very stable here. They are
always under the pic, no user has to chase them or look to his possibly
huge monitor to find them tucked into corners.

If you want them in the corners, that is simple, put the "nav" div just
outside the "wrapper" div, just before the closing body tag. Do you want
a demo of this or can you follow my meaning here?

About the last line of text between the buttons, what do you mean? You
did not have any text "between" the buttons at your supplied URL.

Here's one I made and you may see that the buttons look daft up there.
Well I think they do <g>

 

[Jim S]

Forgot the page (blushes)

Here's one I made and you may see that the buttons look daft up there.
Well I think they do <g>

Oops here it is http://www.jimscot.pwp.blueyonder.co.uk/jims_page_QE2.htm

 

[Jonathan N. Little]

Forgot the page (blushes)


Oops here it is http://www.jimscot.pwp.blueyonder.co.uk/jims_page_QE2.htm

What is the purpose of the 'span' and 'br' in the description?

 

[Jim S]

What is the purpose of the 'span' and 'br' in the description?

Sorry they got left behind when I changed the page from the original.
Don't think they made any difference.

 

[dorayme]

Forgot the page (blushes)


Oops here it is http://www.jimscot.pwp.blueyonder.co.uk/jims_page_QE2.htm

OK. There are a number of issues and they need judgement as well as mere
technical skill. I would be wanting them to be easy to find, easy to
use, and easy on the eye, not too distracting or brassy.

For this I might keep them all close together, not spread out over a
screen, they are all related as page navigation and what could be
simpler for a users eye and mind than this? And I would design them to
be quietly efficient and not to have to be scrolled for.

I recall making a page for you with something like this ages ago:

<http://netweaver.com.au/jim/guestFootJim.html>

You could have the nav at the top if you are going to say a lot about
the pic underneath. Or you could simply make sure you have a short
caption for ach pic like in the url above, and say things about the
picture in more detail for those interested underneath the nav arrows in
a separate para. Those who want to read, will; and they will scroll if
need be. Those who don't want to but just want to "look at the pics"
will be able to easily on any screen.

 

[Jim S]

OK. There are a number of issues and they need judgement as well as mere
technical skill. I would be wanting them to be easy to find, easy to
use, and easy on the eye, not too distracting or brassy.

For this I might keep them all close together, not spread out over a
screen, they are all related as page navigation and what could be
simpler for a users eye and mind than this? And I would design them to
be quietly efficient and not to have to be scrolled for.

I recall making a page for you with something like this ages ago:

<http://netweaver.com.au/jim/guestFootJim.html>

You could have the nav at the top if you are going to say a lot about
the pic underneath. Or you could simply make sure you have a short
caption for ach pic like in the url above, and say things about the
picture in more detail for those interested underneath the nav arrows in
a separate para. Those who want to read, will; and they will scroll if
need be. Those who don't want to but just want to "look at the pics"
will be able to easily on any screen.

Ah, I remember now.
No offence, but I remain unconvinced that I can make a site look as I wish
using the method we have been talking about ,however desirable that might
be in purist markup terms.
A screenshot of where my table method falls down might help to convince me.
I can see that having the nav in the top (corners) might solve the problem
and I had toyed with the reduction of text.
I am caught between a photo album and a historical record and although
converting my site page by page to a no-table format might well ensure my
place in heaven, it might also get me there sooner than I would hope.

 

[Jim S]

Tried these before retiring for the night.
http://www.jimscot.pwp.blueyonder.co.uk/jims_page_js_topnav.htm
http://www.jimscot.pwp.blueyonder.co.uk/jims_page_QE2_topnav.htm
although I might like to put the image or some of the text between the navs
if the page gets full.

 

[dorayme]

Ah, I remember now.
No offence, but I remain unconvinced that I can make a site look as I wish
using the method we have been talking about ,however desirable that might
be in purist markup terms.

You do yourself a disservice. Only a few minutes after writing this, you
posted a url in the next post in this thread demonstrating that you can
work with simpler mark up that does not use tables for layout.

By the way, in the same folder as my above URL is, there is another one
I did for you ages ago, demonstrating a way to have nav links in the
corners

A screenshot of where my table method falls down might help to convince me.

This is an interesting question. The relevant view, to bring out the
true differences, would not be a snap of a single page, but, rather, a
movie of all the code and all the site and an author beavering away
building and changing things over time and viewers looking at it on
different platforms and devices. The advantages of using simpler and
less presentational mark up is a complex, not a simple matter.

I can see that having the nav in the top (corners) might solve the problem
and I had toyed with the reduction of text.
I am caught between a photo album and a historical record and although
converting my site page by page to a no-table format might well ensure my
place in heaven, it might also get me there sooner than I would hope.

<g>

 

[Holger Suhr]

Forgot the page (blushes)


Oops here it is http://www.jimscot.pwp.blueyonder.co.uk/jims_page_QE2.htm

nice, here is an example, why I "like" <div>.

http://www.dslr-fotografie.eu/test.php

The buttons are inside the cyan box, but are not rendered
inside the cyan box. (FF and Opera)

At the moment, I use float or position the <div> layout doesn't know
anything about "inside" another <div>. The outer div doesn't grow
with the inner div.

With width and height I can force many div-layouts to look right.
A table looks automatically right, always.

Holger

 

[Jim S]

nice, here is an example, why I "like" <div>.

http://www.dslr-fotografie.eu/test.php

The buttons are inside the cyan box, but are not rendered
inside the cyan box. (FF and Opera)

At the moment, I use float or position the <div> layout doesn't know
anything about "inside" another <div>. The outer div doesn't grow
with the inner div.

With width and height I can force many div-layouts to look right.
A table looks automatically right, always.

Holger

I am not sure whether you are FOR divs or AGAINST them.

More and more I get the feeling that we are arguing about the number of
angels dancing on the head of a pin or whether the apostrophe goes before
or after the "s".
Much as I would love a horse, I get to work faster by car (petrol price
apart) and I can make a page that validates and has lots of pictures , text
and links without putting divs in divs. I don't even use nested tables
(well not very often) . My only table is defined by a stylesheet, so what's
the fuss?

 

[Holger Suhr]

I am not sure whether you are FOR divs or AGAINST them.

I tried to do a tableless layout
(yes, because tableless is in/good/the only)
and got many problems like this simple one.

So I'm wondering about the all the recommendations of tableless layouts.
Again and again I get situations, where the div-layout breaks and
I have to fuzzle to get the look, a table shows me out of the box.

More and more I get the feeling that we are arguing about the number of
angels dancing on the head of a pin or whether the apostrophe goes before
or after the "s".
Much as I would love a horse, I get to work faster by car (petrol price
apart) and I can make a page that validates and has lots of pictures , text
and links without putting divs in divs. I don't even use nested tables
(well not very often) . My only table is defined by a stylesheet, so what's
the fuss?

Now, I don't like to try a tableless layout anymore.
I use a mix of both and it works fine.

Holger

 

[Jim S]

I tried to do a tableless layout
(yes, because tableless is in/good/the only)
and got many problems like this simple one.

So I'm wondering about the all the recommendations of tableless layouts.
Again and again I get situations, where the div-layout breaks and
I have to fuzzle to get the look, a table shows me out of the box.


Now, I don't like to try a tableless layout anymore.
I use a mix of both and it works fine.

Holger

How did you do those buttons?

 

[Holger Suhr]

How did you do those buttons?

Oh, I don't like to tell it....

<div id='buttline'>
...left-button..
...right-button..
</div>

and then.....

buttline {
height:30px;
}

Urgs.....

Holger

 

[Jim S]

http://www.dslr-fotografie.eu/test.php

The buttons are inside the cyan box, but are not rendered
inside the cyan box. (FF and Opera)

[...]
Another note regarding the buttons two paragraphs up:
You may say to yourself, "wait a minute, he said that the buttons are
out of the normal flow, and indeed they are outside of the cyan box
(.lftbox), but they are clearly inside #lft which height is added onto
that of #lft ". This is so, since the float presents no height (due to
being out of the normal flow) to its immediate parent, but its height is
presented to the next parent up (next nested box up).

In this case because the next container up (the grandparent) is a float,
and a float is a block formatting context, which means its height does
take into account any floats which are descendents of it.

And this is better than using a table because...?

 

[dorayme]

Jim S wrote:

Read as much as you want re. "table layout versus css layout" and then
decide:
<http://www.google.ca/search?q=table+layout+versus+css+layout&ie=utf-8&oe=utf-
8&aq=t&rls=org.mozilla:en-USfficial&client=firefox-a>

All this reading will not convince Jim on what he wants to know
immediately. Why this particular placing of buttons is easier without
tables. And he will not find this out because it isn't easier on his
skills.

The advantages of more structural HTML mark up and CSS for presentation
appear from a 'whole practice' perspective and this is something hard to
implement without having a real go over a longish time.

Once Jim has made a site, he probably has never had to face redesign. If
he had to do this a lot, then the theoretical advantages of a no-tables
based layouts would sing to him more.

Some people are convinced by mere theory and argument, others by their
own needs and skills and practice.

A great deal of time is spent in the arguments against table layouts on
things that often simply do not loom large for sensible and practical
people:

* Making picture sites accessible to mobile phones, screen readers...

* Responding and satisfying a client in double quick time when he tells
you that the 2,000 page website that took you a year to develop and
launch now should be given a quite different look. Not just colours, not
just fonts, but everything on the left should go on the right and
everything on the right should go on the left and everything on the top
should go on the bottom and everything on the bottom should go on the
top and everything in the middle should go in fifty other places. And to
delete and add tons of new stuff. Does not happen to most website makers
in the real world.

* Tables are said to be a nightmare to maintain. At least a sensible
designer still using tables for layout is unlikely to be nesting them.
The meaning of "sensible" has not yet evolved to make it a contradiction
to say a sensible person might use a table for layout without nesting.
And without nesting or using spacer gifs and other absurdly complicated
techniques that would have made a Ptolemic astronomer using epicyles
proud, they are not hard to maintain or change.

* Tables based layouts take longer to load on client machines. I am sure
the differences in the case of Jim's website pages will leave him
gasping like a young petrol head who sees a Chev Corvette burning off a
a baby Austin.

* Scare stories about the difficulties of making a site look consistent
with tables.

 

[dorayme]

I had to correct the URL immediately above since you persist in using
that inferior mail/news reader which breaks the URL. You really should
give Thunderbird a go, at least for news.

Never occurred to me to do anything about your url. Nothing I said
depended on it in detail. But I am conscious, since your intervention a
while back, about my own urls. Have you not noticed?

....

....

I don't want to try to persuade anyone of anything. I will point at what
others have to say, such as yourself, who do a marvelous job of it. If
they choose to ignore voices of experience it's really up to them. If
someone presents a problem and I note that table layout is used, I
usually try to ignore the posting, unless interesting in some fashion.
There are others that usually pass by and advise to change to css
layout. I find it akin, at times, to arguing with religious fanatics or
drunks, which should also be avoided. Let them use table layout if they
insist, but they shouldn't expect anyone to help by wading through their
nested tables and assist in css problems therein which may or may not be
properly supported in all browsers.

I agree that is way beyond the call of duty to wade through nested
tables to help someone. And I was not criticising you at all. Your
advice to Jim was excellent. To study the issue.

My points were about the hysterical arguments against tables and about
learning difficult skills and having big rather than narrow perspectives.

 

[dorayme]

My points were about the hysterical arguments against tables and about
learning difficult skills and having big rather than narrow perspectives.

Let me give Jim and others a short explanation of the sort of
perspective that is needed to convince a socially conscious human to
move to structural mark up and css instead of tables.

Suppose what is almost unarguably the case: that dispensing with tables
generally reduces the file size of what has to be delivered to client
machines. Now multiply this by the number of visitors to all the sites
that use tables mark-up unnecessarily for presentational purposes. It
comes to an enormous amount. This amount translates into money, into
human frustration, into energy cost and into the cost of doing business
at the expense, ultimately, of more productive human achievement.

I have complained about the hysterical nature of many of the arguments
against the use of tables for markup. They are often exactly this when
considered on a small scale: maintaining this tiny website with a few
pics, maintaining that one with a few pages of info, upgrading another
one with some new pics and material and a bit of jiggling the tables
about. There is *no big problem* with tables here if you are competent
with tables, in spite of all the crap you get from the priests about the
evils.

The problems come out when you consider larger numbers: large websites,
many numbers of websites, large effects across the web community. To be
impressed by this enough to act on it needs an ethical attitude and a
desire to make for a better world.

 

[Travis Newbury]

Suppose what is almost unarguably the case: that dispensing with tables
generally reduces the file size of what has to be delivered to client
machines. Now multiply this by the number of visitors to all the sites
that use tables mark-up unnecessarily for presentational purposes. It
comes to an enormous amount. This amount translates into money, into
human frustration, into energy cost and into the cost of doing business
at the expense, ultimately, of more productive human achievement.

If your host charges you that much money that coding with divs or
tables makes a monitary impact on your company, then you need a new
provider.

To be
impressed by this enough to act on it needs an ethical attitude and a
desire to make for a better world.

I too philosophize about the ethical attitude and creating a better
world with the web when partaking of the herb.

 

[dorayme]

If your host charges you that much money that coding with divs or
tables makes a monitary impact on your company, then you need a new
provider.

That shows how completely you have misunderstood me.

I too philosophize about the ethical attitude and creating a better
world with the web when partaking of the herb.

That's because you are a low down little prick that needs drugs to even
get a glimpse of what it might mean to be a man.