CSS problems

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

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

This is what I am trying to do:


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


Here is my attempt using CSS:


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


Nik Coughlin

Re: CSS problems

Quoted text here. Click to load it

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:

Flavour to suit but keep in mind the KISS principle :-)


Re: CSS problems

You're right.

Thanks a million.

rf wrote:
Quoted text here. Click to load it

Re: CSS problems

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.

rf wrote:
Quoted text here. Click to load it

Site Timeline