[Nottingham] Website Revamp - Ideas and first attempt

[Roger Light]

On 09/09/05, Michael Erskine <msemtd at yahoo.co.uk> wrote:
>
> There is a work-in-progress mockup demonstrating the CSS layout at...
>    http://www.nottingham.lug.org.uk/revamp/
> The screenshot was nice but doesn't allowing testing and validation in various
> user agents.

I don't like fixed size web pages, so I've done a layout that gets rid
of some of them.

I've added it as an alternate stylesheet to the main page so try going
to the page and then View->Use Style->Roger to switch.

http://nottingham.lug.org.uk/revamp/

IE users (shame on you!) will have to go to

http://nottingham.lug.org.uk/revamp/index_ral.html

because I don't think IE has support for alternate stylesheets. It's
that or I don't know how to find the support.

There are a couple of problems.

I want the navigation bar to have a fixed width but the rest of the
content to resize. There are a few ways to do this.

1. Float both nav and content and set the widths to 20% and 80%
respectively. This doesn't give a fixed width for the nav, but is
easy.

2. Float both nav and content. Give nav a fixed size and set content
size to "auto". Unfortunately this doesn't work because "auto" seems
to just mean "fill the screen regardless of any other floats".

3. Give the nav a fixed width and position. Fix the left and right
edges of the content and give it an auto width.

I've gone for "solution" number 3 as it definitely works best. The
trouble is that any further content that doesn't have a fixed position
(ie. the copyleft statement) starts at the top of the page so is
hidden by the fixed position elements. You can see the "c" of
"copyleft" at the left of the grey at the top.

Talking of the grey box, I changed the "latest news" and "latest
posts" to both have half of the available space (ie. width: 50%). It
seems that IE interprets that as "50% of the *entire* page rather than
50% of the parent div.

IE has a problem with the way I've positioned one of the curved
corners as well. It is a bit hacky to be honest anyway (although only
necessary because of lack of browser support in the first place).

IE screen shot is here: http://nottingham.lug.org.uk/revamp/images/ral_shot.png

The other problem is that as the header is an image, it doesn't resize
automatically. I'm open to suggestions as to what to do with it :)

Cheers,

Roger