CSS problems

[Nik Coughin]

Hi

I am trying to create what initially seemed to be a fairly simple layout
using CSS.

This is what I am trying to do:

http://homepages.ihug.co.nz/~nrkn/explain/req.png

I have made a prototype of the page using tables to show you how the page
should look and work when the browser window is resized. Please ignore the
shabby html, I threw this together in Frontpage. It works in both IE and
Mozilla well enough to explain what I am trying to do (although is a bit odd
in Mozilla):

http://homepages.ihug.co.nz/~nrkn/explain/table.html

Here is my attempt using CSS:

http://homepages.ihug.co.nz/~nrkn/explain/css.html

I got this far and am completely unsure of how to proceed. Any pointers
would be greatly appreciated.

TIA,

Nik Coughlin

 

[rf]

Hi

I am trying to create what initially seemed to be a fairly simple layout
using CSS.

This is what I am trying to do:

http://homepages.ihug.co.nz/~nrkn/explain/req.png

There is your first problem. You are still thinking tables. CSS is not
tables. When you draw a back of the envelope sketch for your page don't draw
in tables. Draw what the whole page should look like.

With tables one is used to chopping up images to fit in the various cells.
Most of the stuff on your sketch is fixed anyway so why chop it up. Just
make one great huge gif for the page background. It wont be big, 6K or so.

Then plonk in the other stuff. A logo to the left, some houses inside a span
that is floated to the right and a title.

Then we can have an ul containing the nav bar (positioned absolutely at the
required position) and a div containing the content (positioned absolutely
at the required position).

5 elements on the page. Simple.

Here is a working draft:
http://users.bigpond.net.au/rf/test/x/index.html

Flavour to suit but keep in mind the KISS principle

Cheers
Richard.

 

[Nik Coughin]

You're right.

Thanks a million.

There is your first problem. You are still thinking tables. CSS is not
tables. When you draw a back of the envelope sketch for your page
don't draw in tables. Draw what the whole page should look like.

With tables one is used to chopping up images to fit in the various
cells. Most of the stuff on your sketch is fixed anyway so why chop
it up. Just make one great huge gif for the page background. It wont
be big, 6K or so.

Then plonk in the other stuff. A logo to the left, some houses inside
a span that is floated to the right and a title.

Then we can have an ul containing the nav bar (positioned absolutely
at the required position) and a div containing the content
(positioned absolutely at the required position).

5 elements on the page. Simple.

Here is a working draft:
http://users.bigpond.net.au/rf/test/x/index.html

Flavour to suit but keep in mind the KISS principle

Cheers
Richard.

 

[Nik Coughin]

Not thinking in terms of tables (I hadn't even realised that I was doing so)
is such a paradigm shift.

I can think of another couple of ways that I could do this now too, although
I am going to go with your big background image method.

Thanks again.