Formatting Page Layout Without Tables

Sanders Kaufman schreef:

Rob Waaijenberg wrote:

I didn't suggest seeking advice.
What I meant is you have to work for it.
Read a book, seek out some good websites about the subject (css
layouts), look at some source codes from webpages or sites you like.

Apparently I logged onto alt.flame.

Perhaps I should find a stylesheet newsgroup, and ask advice there, eh?

I don't know since when you've been reading usenet-groups
but it can't be for long
otherwise you'd have seen far worse.

We've been having a rather civilized conversation, you and me.


--
RW

"Sanders Kaufman" <bucky (AT) kaufman (DOT) net> wrote

I'm about to drop a decade-long, bad practice of formatting page layouts
with tables. I just got one question - how does that work in the real
world?

To be specific, let's say I have a page formatted with a table like so:

table width="100%"
tr
th colspan="3">Page Title</th
/tr><tr
td width="15%">Sidebar Content (Left)</td
td width="70%">Page Content</td
td width="15%">Sidebar Content (Right)</td
/tr><tr
th colspan="3">Footer</th
/tr
/table

How would that structure be achieved through CSS?

Many many ways, a few of them better than most.

You have three columns. You want to use CSS to layout the page.
Google for "three column css layout".

The first hit mentions, oddly enough, holy grail, which IMHO it isn't :-)

The header and footer are quite straghtforward.

Fish come to mind. Give a man a fish and you feed him for a day. Teach a man
to fish and he'll be late for dinner.

--
Richard.

Sanders Kaufman wrote:

Rob Waaijenberg wrote:

visit these pages, they explain the kind of layout I think you're
looking for:

Still - it would have been cool if someone could have addressed this in
the group, instead of just pointing to a web site.

Why? The kind of layout you describe is nothing new. There are plenty of
samples out there already, which you could find on your own easily
enough with a basic google search. You'd rather we waste our time
rehashing old stuff?

--
Berg

In article <RSKxi.49963$YL5.49124 (AT) newssvr29 (DOT) news.prodigy.net>,
Sanders Kaufman <bucky (AT) kaufman (DOT) net> wrote:

Rob Waaijenberg wrote:

visit these pages, they explain the kind of layout I think you're
looking for:

http://www.glish.com/css/7.asp

OK, that was painfully simple to do! I was concerned that there would
be a lot of weirdness, but it's really simple.

Looking at this working sample, it begs the question.

What question is that?

About your earlier question, can you achieve what your table
layout can achieve without drama, the answer really is no, you
can't. There are always dramas when you try to back engineer
things like this and make them work cross browser.

It is quite right that you have to get in up to your neck and
practice and learn all the pitfalls and so on. But perhaps it
could be useful to you to know now something you might come to
learn more painfully. You need to think a bit differently without
table layout. In quite a number of different ways.

You will eventually come not to be wanting what tables can so
easily achieve with a rock steadiness. True, the old desires
never quite go away for many of us but we are like with good and
better founded second marriages, deep down knowing this is on a
better footing.

First, pretty well every week or so, you will hear old hands here
talking about the importance of good semantic html mark up. You
can study this further but it basically means writing html so
that in itself it makes as much sense as it needs and no more.
What does this mean? It means that it makes sense without any
styling at all. And more.

If you write a table, generally it means you are conveying a
relationship across rows and columns and you are going wrong in
most cases from the start if your material is not tabular in
nature. You are conveying a sense that is not needed, a meaning
that is misleading. Even if you have a table with one cell and
some text in it, split into headings with <h>s and paragraphs
with <p>s, you have more than you need because the <h>s and the
<p>s will do fine on their own. Try to get the idea, harder to
succeed in than say, of allowing the meaning to stand there naked
in the HTML.

In a really good and strict school, you would not be able to go
further than this until you had mastered this art. No CSS in the
first semester, even the first year! You would be surprised how
refreshingly easy to access such html is. The only protests would
be from various flashy and superficial types beyond the school
walls if they happened to come across your exercises. Ignore them
for a while.

Now, to get back on track, you have become an expert on producing
good semantic HTML, as good as most average people can get to be
at least with some effort. What now? Now just as much styling as
is needed to make things easier for people to receive your
offerings. But no more! This means you will not likely need the
rigours of so many columns, so much background colour going all
the way down them and so on. There are a million 'light touches'
you can apply.

Forget about emulating tables for now. Just use them as you have
(assuming you have used them well and wisely for layout) while at
the same time exploring a different way of working.

--
dorayme

Am 19.08.2007 01:01 schrieb Sanders Kaufman:

Rob Waaijenberg wrote:

visit these pages, they explain the kind of layout I think you're
looking for:

http://www.glish.com/css/7.asp

OK, that was painfully simple to do! I was concerned that there would
be a lot of weirdness, but it's really simple.

Looking at this working sample, it begs the question.

style
#header {
background:#fff;
height:40px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
height:39px;
}

And all this pixel stuff will break horribly when the user chooses to
use a larger font ...

If your original layout uses percentages, why don't you use
percentages or ems here?

--
Christian

Christian Kirsch wrote:

Am 19.08.2007 01:01 schrieb Sanders Kaufman:

style
#header {
background:#fff;
height:40px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
height:39px;
}

And all this pixel stuff will break horribly when the user chooses to
use a larger font ...

If your original layout uses percentages, why don't you use
percentages or ems here?

Yeah - I saw another post on another topic, that dealt with the same
issue. Good development means absolutely never use absolute values
unless you really, really mean it.

Gregor Kofler wrote:

Sanders Kaufman meinte:

Still - it would have been cool if someone could have addressed this
in the group, instead of just pointing to a web site.

Why? This extra-basic stuff. No need to post a 3-column page layout with
DIVs for the umpteenth time.

Gregor

Because this is a news group, not a web page... and this is news to me.

Sanders Kaufman wrote:

Gregor Kofler wrote:
Sanders Kaufman meinte:

Still - it would have been cool if someone could have addressed this
in the group, instead of just pointing to a web site.

Why? This extra-basic stuff. No need to post a 3-column page layout with
DIVs for the umpteenth time.

Because this is a news group, not a web page... and this is news to me.

Um, it wouldn't have been news to you, either, if you had bothered to
search the newsgroup archives before posting. It's the only thing google
groups should be used for.
http://groups.google.com/advanced_search

--
Berg

On 18 Aug, 22:33, Sanders Kaufman <bu... (AT) kaufman (DOT) net> wrote:

I'm about to drop a decade-long, bad practice of formatting page layouts
with tables. I just got one question - how does that work in the real
world?

Very well, and has done for some time.

CSS is easy. The hard part (and it's very hard) is identifying the
good tutorials from the bad ones. Most HTML tutorials out there are
bad and misleading. For CSS, it's almost all of them!

Read this newsgroup (and c.i.w.a.h and even alt.html). It's one of the
best resources around, good generally and excellent for the practice
of getting CSS good practice _right_, not just bearably competent for
one page on one browser. Search the archives. Search the archives for
tutorial recommendations.

As a few starting points, glish, bluerobot and alistapart are
trustworthy resources. W3C is correct but unreadable as a tutorial.
w3cschools is poor.

Bergamot wrote:

Sanders Kaufman wrote:

Because this is a news group, not a web page... and this is news to me.

Um, it wouldn't have been news to you, either, if you had bothered to
search the newsgroup archives before posting. It's the only thing google
groups should be used for.
http://groups.google.com/advanced_search

This is not a "Google" group.
It's a Usenet group.... far bigger than even Google Himself.