Formatting Page Layout Without Tables

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?

Sanders Kaufman schreef:

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?

It's like driving a car:
you've got to study the rules, learn 'em
and you gotta praktice doing it, lots of practice.

Have fun.

Rob

Rob Waaijenberg schreef:

Sanders Kaufman schreef:
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?


It's like driving a car:
you've got to study the rules, learn 'em
and you gotta praktice doing it, lots of practice.

Have fun.

Rob

I forgot something:
unlike learning how to dribe a car,
with CSS it helps watching other people do it.

There are a lot of sites with templates, for instance.

Google for any combination of css, templates, holy grail [no joke, RW].

Rob Waaijenberg wrote:

Sanders Kaufman schreef:
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?


It's like driving a car:
you've got to study the rules, learn 'em
and you gotta praktice doing it, lots of practice.

Yeah - I already know that.
That's why I'm here.

Got any advice - other than that I should seek advice?

Sanders Kaufman schreef:

Rob Waaijenberg wrote:
Sanders Kaufman schreef:
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?


It's like driving a car:
you've got to study the rules, learn 'em
and you gotta praktice doing it, lots of practice.

Yeah - I already know that.
That's why I'm here.

Got any advice - other than that I should seek advice?

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.

Lots of people in this group can make you a template,
but I don't think that's going to help you.

Rob

Rob Waaijenberg wrote:

Rob Waaijenberg schreef:
Sanders Kaufman schreef:

I forgot something:
unlike learning how to dribe a car,
with CSS it helps watching other people do it.

Word up, yo!

There are a lot of sites with templates, for instance.
Google for any combination of css, templates, holy grail [no joke, RW].

Gotta learn to walk, afore I try to drive a stick-shift, dontcha think?

Before I reverse engineer that kind of advanced stuff, I might oughtta
need to figure out how something basic like this:

<table width="100%">
<tr>
<th colspan="2">Title</th>
</tr><tr>
<td width="20%">Sidebar Content</td>
<td width="80%">Page Content</td>
</tr><tr>
<th colspan="2">Footer</th>
</tr>
</table>

Is this as simple as I presume, or is there a whole buncha drama involved?

Sanders Kaufman schreef:
[]

There are a lot of sites with templates, for instance.
Google for any combination of css, templates, holy grail [no joke, RW].

Gotta learn to walk, afore I try to drive a stick-shift, dontcha think?

Before I reverse engineer that kind of advanced stuff, I might oughtta
need to figure out how something basic like this:

table width="100%"
tr
th colspan="2">Title</th
/tr><tr
td width="20%">Sidebar Content</td
td width="80%">Page Content</td
/tr><tr
th colspan="2">Footer</th
/tr
/table

Is this as simple as I presume, or is there a whole buncha drama involved?

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

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

http://bluerobot.com/web/layouts/layout3.html

Rob

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?

Rob Waaijenberg wrote:

Is this as simple as I presume, or is there a whole buncha drama
involved?

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

http://www.glish.com/css/7.asp
http://bluerobot.com/web/layouts/layout3.html

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

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;
}
#sidebarleft {
position: absolute;
left:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#pagecontent {
background:#fff;
margin-left: 199px;
margin-right:199px;
border:1px solid #000;
margin-left: 201px;
margin-right:201px;
}
#sidebarright {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
</style>