PDA

Click to See Complete Forum and Search --> : Liquid Header, fixed content?

chrismgtis
06-04-2009, 12:15 PM
This seems to be a bit tricky to accomplish. If you look at sentri.com, you can see exactly what I'm aiming for, but let me lay it out a little bit.

I've tried to accomplish this in Fireworks, but I've only recently started using Fireworks when I learned that it could slice into style sheets and use DIVs rather than tables. So in a way I'm also somewhat new to CSS (done a little bit of it).

I'm trying to figure out how to have a liquid header with content that's always the same in each page, needs a few buttons and links. Basically, the background of the header will be a gradient (maybe a 1 pixel wide image created in Photoshop).

Under that I want the content to "hang down" and display a sort of "fixed" block of content with everything in it. I can do this fixed content in Fireworks (which is already finished), but I don't understand how to slice it so that I can accomplish what I'm aiming for.

Under the "fixed" content block will be variable content for each page like "management services" or "VOIP services" just a bunch of text I'm hoping I can split up into 2 or 3 columns.

Current "progress":
http://img188.imageshack.us/img188/6301/sitecnet.png
http://img2.imageshack.us/img2/3298/cnetsite2.png

I guess the question really is how to accomplish a liquid header and then throw in a bunch of sliced Fireworks content underneath that with space on the sides (fixed) where I can throw in a background color or gradient for the background. The content needs to "hang" from the header which I can't figure out.
David Harrison
06-06-2009, 06:17 PM
Well the absolute simplest way to do that would be to set a 1px wide image of the green gradient as a repeating horizontal background to the body element.

That would give the illusion of an expanding header.

Edit: In fact, that seems to be exactly what sentri have done, this is their background image:
http://www.sentri.com/assets/images/home_bg.gif
chrismgtis
06-08-2009, 06:45 PM
Well the absolute simplest way to do that would be to set a 1px wide image of the green gradient as a repeating horizontal background to the body element.

That would give the illusion of an expanding header.

Edit: In fact, that seems to be exactly what sentri have done, this is their background image:
http://www.sentri.com/assets/images/home_bg.gif

To the body element? As in, in the body tag?
David Harrison
06-08-2009, 06:57 PM
Yes.
chrismgtis
06-09-2009, 02:12 PM
Yes.

This is so confusing to me for some reason. I did a site years ago with a liquid header, but the content wasn't centered in the middle of the page like that.

The thing is the guy I'm doing this for designed part of it in Fireworks and I'm trying to figure out how to export it out and make the header liquid at the top and keep the content in the center.

I'm still lost as I can be.
David Harrison
06-09-2009, 03:15 PM
I don't know what the problem is, you can just use a single rule in the CSS to set a repeating background on the body. Unless you have code or a link, I can't really say more.