CSS Forum

**stevej** · 08-15-2009, 12:31 PM

Hey guys,

Right now I'm creating a site for someone, and I need to convert a very complicated photoshop design to CSS. Here's a very rough mockup that I made of what the client needs:

So far, that design hasn't been a problem. I've been able to get the top gradient, element 1, and the main container to all layer correctly and in the right positions. What I'm really having problems with is the bottom gradient.

I have the gradient itself positioned correctly, but I just can't figure out how to have the color it becomes extend all the way to the bottom of the page. And I want to make it so that if the page doesn't have a lot of content, and the viewer doesn't have a very big browser window, it does this:

So that the gradient acts as a background, and doesn't require the user to scroll down and see it. Any suggestions?

I have a pretty tight deadline, so the sooner I can get replies to this thread, the better. And I really don't want to use JavaScript for this.

Thanks a ton!

**LadynRed** · 08-15-2009, 01:07 PM

Can we see your code ? Generally, setting the background of the <body> to be the end color of the gradient works just fine. It's how you "layer" the gradients on top of it that gets your desired effect. Can't tell why it's not working w/o seeing your code.

**stevej** · 08-15-2009, 01:34 PM

Well... I can't really give you the code, since that graphic is just a imitation of what the site's design really is. And, not to mention that the issue with the bottom gradient is not so much a code problem/error, but an issue with the idea of the layering and the backgrounds of the divs.

But what you said about the end color of the gradient being the background of the <body> gave me an idea... I'll post the results.

Thanks!

**stevej** · 07:13 PM

Okay! I while I was fixing up those holes with that technique you mentioned, I've opened up a couple more for myself. But before I go on, here's the CSS:

Code:

body {
margin: 0px;
background: #999999 url('bottom-gradient.png') repeat-x;
background-position: 0 600px;
}
.light-space {
width: 100%;
height: 600px;
background: #cccccc;
position: absolute;
z-index: -3;
}
.top-gradient {
width: 100%;
height: 60px;
background: #999999 url('top-gradient.png') repeat-x;
position: relative;
z-index: -2;
margin-bottom: -60px;
}
.element {
width: 290px;
height: 100%;
background: #999999 url('element.png') no-repeat top;
position: absolute;
top: 0;
left: 50%;
margin-left: -480px;
z-index: -1;
border: 1px solid #000000;
}
.container {
background: #ffffff;
margin: 0 auto;
height: 800px;
width: 730px;
border: 1px solid #000000;
}

And the HTML:

HTML Code:

<div class="light-space"></div>

<div class="element"></div>

<div class="top-gradient"></div>

<div class="container">stuff</div>

The afore-mentioned holes are:

1) The class 'light-space' has a fixed height. That way, if the person's browser window is smaller than 600px, it could potentially create an unnecessary scrollbar. One way to fix this would be to use a percentage height and then max-width: 600px; but that's not supported in IE6! (Curse you IE6!!)

2) The class 'element' will not stretch to the bottom of the window if the page is taller than the browser window.

Do you know how I could fix this? I'm perfectly open to restructuring the whole thing.

Thanks again!

**LadynRed** · 08-16-2009, 12:37 PM

Ok, for one thing you do NOT need all that positioning, it's not necessary to create the 'layered' sort of effect you're going for.

Frankly, you're over-complicating the whole thing. The easiest thing to do would be to take the narrowest possible vertical slice of your entire gradient section, top to bottom where it fades to a solid color, then repeat that horizontally. Put that in as a background on a container div. Leave the body with the solid background color. You don't need any fixed height on the container, and you don't need absolute positioning.

Add the background to the element div that you want, but the height:100% won't work (see the stickies on how that works).

**stevej** · 08-16-2009, 02:01 PM

YES! Thank you! I can't believe that such a simple solution has been under my nose for so long. I hate absolute positioning myself, though I couldn't figure out how to do it otherwise.

The gradient problem has been solved, but using the technique you linked to, the element still won't extend to the bottom of the page correctly (and just so you know, I'm testing it in FireFox and IE7. I'll add the fix for IE6 when I'm done). I suspect it's because the element is still absolutely positioned, which is making it ignore the height of the rest of the page. But how can I continue to have the same effect if it's not absolutely positioned? Here's my code now:

Code:

body, html { 
height: 100%; 
}
body {
margin: 0px;
background: #999999 url('gradient.png') repeat-x;
}
.element {
width: 290px;
min-height: 100%;
background: #999999 url('element.png') no-repeat top;
position: absolute;
top: 0;
left: 50%;
margin-left: -480px;
z-index: -1;
border: 1px solid #000000;
}
.container {
background: #ffffff;
margin: 0 auto;
height: 800px;
width: 730px;
border: 1px solid #000000;
}

HTML Code:

<div class="element"></div>

<div class="container">stuff</div>

Thanks!

**cindyfowler** · 08-22-2009, 08:47 AM

so difficult ,i will check it and institute it .then help you ....

**davemies** · 08-22-2009, 09:31 AM

Quote:

Originally Posted by cindyfowler

so difficult ,i will check it and institute it .then help you ....

huh! "institute it!"?

**stevej** · 08-22-2009, 11:27 AM

Quote:

Originally Posted by cindyfowler

so difficult ,i will check it and institute it .then help you ....

Well... thanks, I guess. That sounds sort of reassuring. I'm looking forwards to what you find. Does anyone else have any ideas?

**LadynRed** · 08-22-2009, 08:29 PM

I guess I don't understand why you think you need the absolute positioning. Get rid of it, it's simply not necessary.

As for getting it to work, w/o the graphics to actually work with, it's a little hard to do.

Quote:

so difficult ,i will check it and institute it

It's hardly that difficult

**stevej** · 08-25-2009, 11:26 PM

Quote:

Originally Posted by LadynRed

I guess I don't understand why you think you need the absolute positioning. Get rid of it, it's simply not necessary.

Like you, I absolutely hate absolute positioning, and I would love to rid the site of any of it. But how? I can't, for the life of me, figure out how to put an element like that behind the main content in that way without it.

AAARRGHH!!