Help with CSS Layout

A

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.
 
B

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
 
A

Alan Cole

Neal said:
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.
 
R

Roderik

Alan said:
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
 
A

Alan Cole

Sybren Stuvel said:
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.
 
A

Alan Cole

Roderik said:
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.
 
A

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! :)
 
A

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.
 
S

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
 
A

Alan Cole

Sybren Stuvel said:
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.
 
S

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
__________________________________________
 
J

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
 
K

King of Red Lions

Alan said:
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.
 
N

Neal

Alan said:
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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top