[lodijjs]

Hello: I need suggestion on how I could do the CSS layout for this attached mock web site.
I'm unsure how I should code the background gradient (the blue/white gradient), while allowing the left, and the right panes to grow vertically as content gets added.

Should I make the body bg:white, and add a static banner with an absolute position (the clouds)? then layer the panes on top of the banner with a z-index?

Any help is most appreciated.

talk-mania

Attached Thumbnails

• 

[Advertisements]

No way brah, just set the banner as a fixed background, while having the "Talk-Mania.com" text set as a link to the home-page.

body { background: url('http://example.com/clouds.jpg') center no-repeat fixed #fff; }

[aLemmer]

No way brah, just set the banner as a fixed background, while having the "Talk-Mania.com" text set as a link to the home-page.

body { background: url('http://example.com/clouds.jpg') center no-repeat fixed #fff; }

[Major Payne]

Why aren't just following the tutorial on the page you gave a link to? Right now it's an image you show of the completed page which was made in steps. Personally, I would just make a banner for the page and insert it as a background of a properly styled div container. Then set other divs for a page wrap, etc., as needed and leave the body tag alone except for setting the basic font styles to be used.

That way you can set the body with a white background which will allow faster loading time since you will not load a large background image for whole page.

You did notice that the tabs are images with text. That means to make them clickable, you have to make an image map of all image tabs.

There's more, but don't want to design the whole page for you.

[aLemmer]

If you notice the banner makes a lengthy transition into the depth of the page. It would be ideal to use the image as the body's background, as it does extend past the visible "banner space". It doesn't save any loading time to split the image on the page in that manner.

The code I gave would simply allow for an image at a set width (the "content container" width) to be accompanied with a white background.