Simple 2 Column CSS Fixed-Fliud with Header/Nav and Footer?

HTML Source, Tables, CSS, JavaScript, and Embed/Object.

Moderators: BobCP, agsone, Neil Parks, gregtutor, Lem3

Simple 2 Column CSS Fixed-Fliud with Header/Nav and Footer?

Postby Ikaros on Sun Oct 26, 2008 5:16 pm

I'm looking for basic guidelines for this CSS layout using no browser hacks to stay compatible:

    1) 100% full height left column DIV fixed width 256px containing 256x600px non-repeating background image that stays static on screen at all times as entire page scrolls.

    2) Header container DIV against left column full height DIV for centered page logo graphic.

    3) Horizontal Navigation container DIV centered under header DIV.

    4) Fluid right column DIV for the main page content filling rest of horizontal space.

    5) Footer container DIV against left column DIV for centered author credits and link button graphics.


Also, about scrollbars:

Besides them automatically appearing when page content is long, what are your thoughts on forcing a scrollbar space on the right side at all times so page text or content doesn't "jump" when a scrollbar appears or disappears?
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA

Postby Ikaros on Sun Oct 26, 2008 11:53 pm

I was thinking more about this.

Since my layout is to feature a static left aligned background image, maybe all I need is a simple liquid header/nav/content/footer arrangement with a single column content area padded 256px from the left so text doesn't overlap the background image? And the header/nav/footer DIVs could lave their left edges 256px from the left also?

I wonder if this would be the best approach. Here is a quicky layout illustration I made in Excel:

Image


Ignore the actual colors and red Vista snipping tool screenshot border.
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA

Postby agsone on Mon Oct 27, 2008 12:36 am

Rather than finessing with the paddings perhaps you can achieve what you want with what is effectively a two column set up - two divs, both floated left. The first will be your fixed column, the second will have your header, content and footer divs stacked up conventionally inside it. You can set the width of the two independantly and have the right fluid if you like (I think if you give the right one a height of 101% you'll have your permanent scrollbar too).
agsone
Moderator
 
Posts: 1376
Joined: Mon May 21, 2007 7:33 pm
Location: Connecticut, USA
Country: Scotland (sp)

Postby Ikaros on Mon Oct 27, 2008 12:40 am

Thanks for the suggestion Agsone. It will probably be best with 2 columns. Otherwise I'll have to add some special padding at the top and bottom to make room for the header, nav, and footer.

Image


I'll play with it by Tuesday night or so. I'll be out of town Monday through part of Tuesday going to an Yngwie Malmsteen rock concert in Virginia. My ears will be ringing when I get back into town but I'll have renewed inspiration to make a new layout for the fan tribute page I have about him.

Play Loud!
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA

Postby JerryMuelver on Mon Oct 27, 2008 11:23 am

This may provide some inspiration for you:
http://www.cssplay.co.uk/layouts/
Check out "Cross Browser Fixed" under "Layouts".
JerryMuelver
 
Posts: 38
Joined: Sat May 26, 2007 12:09 pm

Postby dr john on Mon Oct 27, 2008 8:46 pm

Try google and css layouts - you should turn up a few million samples to play with.
dr john
 
Posts: 790
Joined: Sat Aug 18, 2007 11:35 am

Postby Ikaros on Tue Oct 28, 2008 8:01 pm

JerryMuelver wrote:This may provide some inspiration for you:
http://www.cssplay.co.uk/layouts/
Check out "Cross Browser Fixed" under "Layouts".


I'm trying to get away from a frames emulation in CSS. I doke his layouts but them seem a little tricky to adpot for my needs.
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA

Postby Ikaros on Thu Oct 30, 2008 1:22 am

I'm having trouble with a footer staying at the bottom in my 2 column layout. Its scrolling with the page instead. What is the proper way to do a footer?
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA

Postby JerryMuelver on Thu Oct 30, 2008 11:54 am

Use "position:absolute" in CSS, with the footer outside any other container. See the source at
http://www.cssplay.co.uk/layouts/fixit.html
JerryMuelver
 
Posts: 38
Joined: Sat May 26, 2007 12:09 pm

Postby Ikaros on Thu Oct 30, 2008 12:08 pm

I'm using position:absolute in all my DIVs. You guys keep pointing me back to CCS Play frames layouts which is fine if I want to stick with my current CSS frames style emulation, but there are many detractors here saying to move away from that type of page navigation.

So I was attempting to make a regular 2 column CSS full scrolling page with 1st left-side column full height to hold a static non-scrolling image and the 2nd right-side column split into rows for the header/nav/content/footer like this illustration:

Image
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA

Postby agsone on Thu Oct 30, 2008 12:46 pm

Ikaros wrote:... CSS frames style emulation, but there are many detractors here saying to move away from that type of page navigation.

My, rather limited, understanding is that CSS frames emulation is fine - all the content is intact in sensible blocks on the page being viewed so accessibility is OK. The problems are with the true frames layouts which call information from different places (in a manner different to server-side includes which assembles an intact page) and are useless from a search engine and accessibility viewpoint.
agsone
Moderator
 
Posts: 1376
Joined: Mon May 21, 2007 7:33 pm
Location: Connecticut, USA
Country: Scotland (sp)

Postby Ikaros on Thu Oct 30, 2008 1:39 pm

Yes I agree with that. I'm fine with CSS frames emulation myself. The big issue is tricking IE5 and IE6 to see position:fixed as position:absolute without any non-validating hacks.

The original Dynamic Drive CSS frames template that I had based my current stuff on included a quirks mode first line above the doctype declaration for IE6 and below. I removed that to make it validate properly since it worked in IE7 that I use (before I knew better) and later found it doesn't display correctly in older IE's. :(

Maybe I'll re-visit what Stu is doing at CSS Play with his non-quirks mode frames simulation again and see if I can adapt my bad CSS layout to it using the same DIV names I'm using so I don't have to redo my 45 HTML pages to make it all work. But his is using a full width header and footer and my header and footer has a 256px left margin which gave me fits tying to adopt his code example. Then I tried a regular CSS layout and it seems just as frustrating to get things right.
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA

Postby dr john on Thu Oct 30, 2008 3:33 pm

Okay, here is how to do this.

Make a wrapper div, into which all your other content will go. Let's say make it 950 px wide.
Inside wrapper make the header div - say 800px wide. float it right.
Inside wrapper make the nav div - same width 800px, float it right.
Inside wrapper make the content div - 800px, float right
Inside wrapper make the footer div - 800px wide, float right.

Now add your image, no need to float it. (But see below on how to get it fixed.
Sorted.

If you wish the content centred in all browsers, add this to your css
body {margin:0; padding:0; text-align:center;}
and this to the wrapper's css
wrapper {text-align:left;}

You COULD set the image as the background to the wrapper and set it as fixed top left, and then it wouldn't scroll away, instead of adding it as an image in the wrapper.
Last edited by dr john on Mon Nov 03, 2008 1:43 pm, edited 1 time in total.
dr john
 
Posts: 790
Joined: Sat Aug 18, 2007 11:35 am

Postby charlescooke on Thu Oct 30, 2008 4:47 pm

Ikaros wrote:The big issue is tricking IE5 and IE6 to see position:fixed as position:absolute without any non-validating hacks.

Well it is an issue but you don't need any hacks - just valid code.
A month ago I wrote a page showing how it is done. You can find it at http://www.charlescooke.me.uk/web/lab_notes/targeting.html
Charles
charlescooke
 
Posts: 765
Joined: Fri Jun 08, 2007 12:22 pm
Location: Surrey
Country: United Kingdom (uk)

Postby Ikaros on Thu Oct 30, 2008 8:42 pm

Testing Stu's frames for kicks using Notepad right now. I'm afriad KompoZer might alter the code. I added a nav bar area and moved divs over to be against the left image. I'll redo his DIV paddings later. The temporary colors are for testing only since everything would end up having a black background in the end. Does the CSS frames simulation break in anyone's non-IE7 browser? I'm giving Browsershots a whirl now to to see what the online screenshots look like...

http://home.comcast.net/~yngwie100/yngwie4layout.html
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA

Next

Return to Advanced Design Q & A


Who is online

Users browsing this forum: No registered users and 1 guest