css is not playing footer!

[fleetwood]

Thanks Lee

Rather than spend too much time on my site without me impelmenting some of your ideas, lemme see where I get to first (looks like I won't be back working on site until Monday or Tuesday). I will always look at anything you add though, so feel free to play with the layout if you have the time.

The brief I set myself (its not always good being both cleint and designer btw !!)

Simplicity and clarity

amazon and play.com are my templates - figuring the big boys should know what they are doing, and my own shopping experince with both, has been good! Although both use tabbed nav bars that could not really be classed as fully accessable, as both are using graphics for the tabbed links, without alt text (that should shake Jont out of the woodwork!)

Basic layout is as you currently see it -

header
left and right sidebars (ideally of fixed width)
fluid middle
no great gaping gaps between sides and middle (just a neat fixed space)
footer

Have been trying to accomodate all screen sizes, although I'm not going to break my back if 800 screens have to H scroll a bit.
Really do want a design that fits full width on all screens though.

Testing browser compatability back to IE 6 (and Firefox).
Testing to IE5.5 too, but again, not going to kill myself over any small hicups 5.5 throws me.

Trying to keep decent level of accessability (allow text to be enlarged twice), and using text rather than graphics for navigation, where possible, although this has proved awkward when trying to get the main tabbed navigation to work, and not break up when enlarged (yes, it has a graphic background, but the links within it are all text anchors). The tabbed nav is still a work in progress - do you think its worth it - or am I just working to please myself on this one?

Was also trying for a tableless design, but have already admitted (above) that I am about ready to cave-in on this one.

[fergusw]

Hey Martin,

If you still have the stamina I reckon you should hang on in there and keep trying for the CSS layout.

I always find that stripping everything back to the basic structural elements helps in trying to eliminate CSS layout issues.

A good online tutorial to look at is:
http://css.maxdesign.com.au/floatuto...torial0916.htm

A simple Actinic 3 column CSS layout website we are testing can be seen here:
http://www.display-monitor.co.uk/

It has the header, left, middle, right and footer layout you are after.

Whenever you set a DIV to position:absolute you are taking it out of the flow on the page. This was the reason, as you identified, why the left menu appeared to flow over the footer.

Another great site for understanding everything from the box model to understanding floats is:
http://www.brainjar.com/css/positioning/default.asp

Hope this helps.

[leehack]

I'm sick of writing "IMO" in forums, so everything below is IMO. And from here forwards in future posts.

Firstly, to have a 3 column layout and support 770px wide is almost, if not impossible. Sidebars will never have enough room and even if you manage to shoehorn everything in, rest assured that the shopping cart page will destroy it. If the links in your left hand nav are quite long, this also limits this layout. Put simply, if you are having 2 sidebars, you have already decided to stuff anyone on 800 screens. I am yet to meet a surfer who purchases online who actually uses an 800 screen. A successful ecommerce website MUST have white space, especially if 3 columns, it's just too busy without it.

With the above in mind, i am now building a site for either 1024 or 1280. I have a double screen setup, a 17" on 1024 and a 19" on 1280, so i see both and i have my laptop on IE6 which is a widescreen. So i get to see what i class as the 3 most common setups nowadays (for my target audience i.e. online "up to date" purchasers).

If anyone is using firefox or opera, they are prompted to download any new versions of the software, so if they have taken the decision to use a different browser, i am happy to assume they will be on the latest versions. Why change browsers if you are not going to stay up to date etc. Of course when new versions are released this week, i would never expect to design next week for the newest version, there has to be a transition of many months. Firefox 1 reports more use than Firefox 2 right now. My laptop retains the previous versions of browsers and my desktop is the right up to date at all times.

My desktop is IE7, firefox 2 etc and my laptop is IE6, firefox 1 etc. I therefore have three screens and between them all they cater for the huge majority of my target audience. The stats i view on sites that i have built, tell me that if i build a site for IE6, IE7, Firefox & Opera and make an assumption of 1024 or more, then i am catering for 96% of users. I do not care about the 4%, to cater for 96% of visitors is superb and can be done quite easily using your mantra of "simplicity and clarity". NO BUSINESS in the world caters for 100% of it's possible visitors.

With the above in mind, i can either design to a fixed 1024 res, or i can provide a fluid layout to stretch to 1280. As for what i choose, it doesn't matter, whether you are 1024 fixed or fluid, it will not make a scrap of difference to a surfer. If your site looks good and has the pre-requisites of a successful ecommerce website, NOBODY will ever leave your site cos it doesn't fill their 1280 screen. The decision is then purely a "what i like to see" decision for a client or indeed what you show them initially.

So for your build, i would work out what kind of pixel widths my columns are going to need as a minimum. To this i add 10px. So i come up with a figure of 200 is my minimum for example. Using a percentage based width layout, i then need to translate that minimum figure into a % for 1024 users. I never like a site that stretches the full screen, i generally like to see a site centred and have a defining border all the way round, kind of a picture frame, ensuring your website comes forward on the screen and defines itself.

970 wide on 1024 is what i aim for, so 200 / 970 * 100 gives me the % i need, so 21% in this case. Therefore my sidebars will be 21% width and my main area will be 58%. My outer layout is usually 95% width giving me the border i previously mentioned. That is my base layout for a 1024 screen.

When you layout a site, i think the proportions of each column are important, for a user on a 1600 screen, i don't like to see the side columns still at a set width, it looks unbalanced. Therefore whatever screen sizes a user has (after 1024), they will be greeted with a fluid design which moves proportionally and looks in proportion.

Experience tells me that i should use a table to lay this out and give each <td> an id and style it via CSS. The secret here is to learn all you can about css and how to layout via pure css, but then revert to common sense and ease of design. Once you are happy you can do what you want css wise, there is no need to prove to yourself each time that you can do it. Use it strengths to your advantage and remove its weaknesses by using the fantastic attributes of a table.

A list of links to sections in a sidebar belongs as much in a table column as it does in a <div>. As with most things in life, the simplest things are the best. By all means learn new things and use them when appropriate, don't get hung up on them though and rigidly use them everytime.

"Fools follow rules, intelligent people interpret them"

As for your tabs, <td>'s with a background image, let them size themselves (padding left and right). If a user wants to change text size, they will move accordingly. Alternatively, make these tabbed links in large enough text that the user will not need to enlarge, after all they are an integral part of your site navigation - everybody will benefit from them being large and clear.

I like the tab approach, especially when it is create properly so that it appears that the page was brought forward in front of all the others, i would certainly recommend keeping this approach.

Hope that helps.

[fleetwood]

Thanks for the quality feedback and advice guys.

I'm going to take a well earned break away from the site for a day or two, to refocus the old brain, and also try to keep the other half happy.

Hopefully you will see the results of some new graft later in the week.

[jont]

Hi Martin,

not sure if you have this resolved from Lee's and Fergus' suggestions?

Looking at the site is very complex with the many external style sheets and the layout in place. From what I could see it may be worth trying to fix the side bars relatively opposed to absolutely (this should offset against the <body> or <html> tag if no other elements have been positioned in the cascade) ... this should provide you with the same positioning functionality BUT allow the sidebar code to occupy the same space on the page - this should them allow the #footer to flow from the bottom of the sidebar and not the #maincontent.... assuming the markup and the nesting is correct of course.

Using float: right; and float: left; for the 2 side bars would be a better way to go. One option would be to nest these into a #mainOuter <div> floated left and right and then set margin: 0 175px; to offset the inner content between. This would maintain the fixed width sidebars and retain fluidity of the inner content.

May be worth starting the outer layout from afresh rather than trying to make good what is there... I have spent 3 days trying to turn an existing executive into a 3 bar fluid using the existing code and after much loss of man hours and code decided it is best to start from scratch and build from the ground up .. getting it right in DW first and then adding the Actinic stuff.