Help with CSS Layout

[Alan Cole]

After lurking here for a while I've decided to change my ways of using
html tables for layout and give css layout a go. It's going to be quite
a learning curve, but hopefully it will pay off in the end.

I've made a start, but have run into problems getting the footer
positioned on the 'page'. So far I have a banner across the top, then a
main section with 3 columns, but I can't get the footer section to
position below this main 3-column section.

Any chance of some pointers?

The test layout can be seen at

http://www.tsunami-site-design.co.uk/test/css/test1.shtml

the css at

http://www.tsunami-site-design.co.uk/test/css/test1.css

I realise that the scripting so far is a pretty clunky and there's still
LOADS to do to make the most of css, but I have to start somewhere.

TIA

Al.

 

[Neal]

After lurking here for a while I've decided to change my ways

This is posted in alt.html.critique already. Please don't mulit-post.

 

[Barbara de Zoete]

After lurking here for a while

Here? Meaning alt.html or alt.html.critique? Didn't you post this exact
post in alt.html.critique about 1hr 20 minutes ago?
Please, do not multi-post.

f'up:alt.html.critique

 

[brucie]

In alt.html Alan Cole said:

After lurking here for a while

then you've probably seen me post this and now its your turn to read it:

What is the accepted way to share a message across multiple newsgroups?
http://smjg.port5.com/faqs/usenet/xpost.html

http://www.tsunami-site-design.co.uk/test/css/test1.shtml

easily fixed unfortunately i don't know which group you want the answer
in so i wont bother at all.

 

[Alan Cole]

This is posted in alt.html.critique already. Please don't mulit-post.

Sorry, didn't realise I had done... Not quite sure how it happened
either. Hoepfully this reply will only turn up in alt.html which is
where I intended to post it... I wasn't after critique after all, just
some help, so didn't intend to post in alt.html.critique.

Don't understand why the post appears to have two sig files as well.....?

Al.

 

[Sybren Stuvel]

Alan Cole enlightened us with:

The test layout can be seen at

http://www.tsunami-site-design.co.uk/test/css/test1.shtml

It's loaded with errors. Check http://validator.w3.org/.

Sybren

 

[Roderik]

After lurking here for a while I've decided to change my ways of using
html tables for layout and give css layout a go. It's going to be quite
a learning curve, but hopefully it will pay off in the end.

I've made a start, but have run into problems getting the footer
positioned on the 'page'. So far I have a banner across the top, then a
main section with 3 columns, but I can't get the footer section to
position below this main 3-column section.

Any chance of some pointers?

The test layout can be seen at

http://www.tsunami-site-design.co.uk/test/css/test1.shtml

the css at

http://www.tsunami-site-design.co.uk/test/css/test1.css

I realise that the scripting so far is a pretty clunky and there's still
LOADS to do to make the most of css, but I have to start somewhere.

TIA

Al.

It's nice to use css for this. Sometimes these things are difficult.
To make things easier, you can use the following page to get it done for
you:

http://www.fu2k.org/alex/css/layout...n_padding=0&longest=2&controls=1&show_style=0


Kind regards,

Roderik

 

[Alan Cole]

Alan Cole enlightened us with:

It's loaded with errors. Check http://validator.w3.org/.

Sybren

I know... I haven't got around to that yet I was just playing with css
layouts not actually building a proper page. I'm trying to learn css and
this was just something I was playing around with.

I must admit to having been pretty dissapoined with the response here.
Most other newsgroups (I haven't been using them for long) seem to be
populated by really helpful people and I've done my best to be helpful
back. It doesn't seem to be the case here, I asked one hopefully simple
question (admitedly for some reason my newsreader cross-posted it) and
all I get in reply is a slated about other things.

Al.

 

[Alan Cole]

It's nice to use css for this. Sometimes these things are difficult.
To make things easier, you can use the following page to get it done for
you:

http://www.fu2k.org/alex/css/layouts/3Col_OrderedAbsolute.mhtml?order=123&left
_width=200&left_unit=px&right_width=200&right_unit=px&body_margin=0&column_pad
ding=0&longest=2&controls=1&show_style=0


Kind regards,

Roderik

Thanks Roderick, I've had a look at that but it doesn't quite work for
this application. I want the two outside columns to be of fixed width
with the centre column fluid in width, which also measn I won't know
which of the columns will be the longest. This is where I'm getting
confused.

I've tried putting all three columns within a containing <div> and then
simply putting the footer div below the container, but that didn't work
either.

I don't want to have to revert to tables if at all possible.

Al.

 

[Barbara de Zoete]

I know... I haven't got around to that yet I was just playing with css
layouts not actually building a proper page.

<http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>

 

[Alan Cole]

<http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>

OK... you win!!

I'll get it validated. All my other pages validate, so I guess I should
get this one to as well... I hadn't ever intended to actaully publish it
I was just playing around with it locally but needed soe help, so
uploaded it as it was.

I'll post again once it validates (if thats allowed?)

Al.

 

[Alan Cole]

OK... you win!!

I'll get it validated. All my other pages validate, so I guess I should
get this one to as well... I hadn't ever intended to actaully publish it
I was just playing around with it locally but needed soe help, so
uploaded it as it was.

I'll post again once it validates (if thats allowed?)

Al.

Uh Oh... there were some typos in that... sorry!

 

[Alan Cole]

OK... you win!!

I'll get it validated. All my other pages validate, so I guess I should
get this one to as well... I hadn't ever intended to actaully publish it
I was just playing around with it locally but needed soe help, so
uploaded it as it was.

I'll post again once it validates (if thats allowed?)

Al.

Uh Oh... there were some typos in that... sorry! [/QUOTE]

There you go, it validates now.... Any chance of some help with the
footer positioning?

Al.

 

[Sybren Stuvel]

Alan Cole enlightened us with:

I've made a start, but have run into problems getting the footer
positioned on the 'page'. So far I have a banner across the top,
then a main section with 3 columns, but I can't get the footer
section to position below this main 3-column section.

You've got the footer inside the same blocklevel element as the middle
column. Take it out of it.

Sybren

 

[Alan Cole]

Alan Cole enlightened us with:

You've got the footer inside the same blocklevel element as the middle
column. Take it out of it.

Sybren

There you go, it was originally but I was just trying something
else..... What I'd like to know is how to get the footer to be
positioned below all three columns whichever one of them happens to be
the longest.

Thanks.

Al.

 

[Steve MacLellan]

Thanks Roderick, I've had a look at that but it doesn't quite work for
this application. I want the two outside columns to be of fixed width
with the centre column fluid in width, which also measn I won't know
which of the columns will be the longest. This is where I'm getting
confused.

I've tried putting all three columns within a containing <div> and then
simply putting the footer div below the container, but that didn't work
either.

I don't want to have to revert to tables if at all possible.

Al.

Hi Al,

The free chapters to HTML Utopia might help:
http://www.sitepoint.com/books/css1/

It shows a good example of a fluid 3 column layout using CSS

Best Regards
Steve MacLellan
--
__________________________________________

Build a Used Car Website

How to build, promote and sell advertising on
a used car website....
http://carsite-marketing.com
__________________________________________

 

[Jakob]

"Alan Cole" <[email protected]> schreef in bericht

[snip]

There you go, it was originally but I was just trying something
else..... What I'd like to know is how to get the footer to be
positioned below all three columns whichever one of them happens to be
the longest.

Thanks.

Al.
--
Alan Cole. E-mail: justal at lineone dot net
http://www.forces-of-nature.co.uk [Coastal Sports]
http://www.tsunami-site-design.co.uk [Website Design]
http://tinyurl.com/64xrd [Plusnet ISP]

I think this is the one that taught me how to.....

http://www.positioniseverything.net/thr.col.stretch.html

jakob

 

[WebMaster]

you need to put "clear: both;" into the css for your footer...

Rudy

 

[King of Red Lions]

Uh Oh... there were some typos in that... sorry!

There you go, it validates now.... Any chance of some help with the
footer positioning?

Al.[/QUOTE]

Nested divs! Try putting all your 3 column divs inside another div.

 

[Neal]

I'll get it validated. All my other pages validate, so I guess I should
get this one to as well... I hadn't ever intended to actaully publish it
I was just playing around with it locally but needed soe help, so
uploaded it as it was.

Remember, validation isn't just for published documents.

Think of validity as an ongoing state of a document, where the silly
problems are eliminated and we can focus on the structure and such.
Validation is a tool to allow you to do away with typos and critical
omissions which can create far-reaching problems in any document.