Sidebar gradient to match length of content

Sidebar gradient to match length of content (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

spinningjennie -> Sidebar gradient to match length of content (1/24/2007 19:13:26)
How can I get the height of my sidebar (with its gradient colour fading from top to bottom) to match the height of my content? Link to Page Link to stylesheet With block colour columns I have previously used a 1 px high image and repeated it down the page (y axis). In this case I want this particular gradient in the sidebar to repeat across the page (x axis), so it can fade down the page. The client prefers the fade going down the sidebar, but I can't get the sidebar gradient to extend to the bottom of the content when my repeat is on the x axis. Any suggestions much appreciated! spinningjennie

Tailslide -> RE: Sidebar gradient to match length of content (1/25/2007 2:43:33)
What I'd do is make 2 background images. One is the gradient which would be no longer than the content of the sidebar (assuming that it stays roughly the same length) and again about 2px wide. Repeat that across the width of the sidebar so your sidebar div is filled with the gradient. Now you need to create a background image for your contentandsidebar div which would be the width of the sidebar and the colour of darkest/lightest bit of the sidebar gradient. Now position that under the sidebar and repeat it vertically down the whole contentandsidebar div. So what you'll end up with is the gradient image in the sidebar itself and the main gradient colour filling downwards in the gap where the sidebar finishes so it'll look like it's the full length of the content div. Does that make any sense at all?

Tailslide -> RE: Sidebar gradient to match length of content (1/25/2007 2:58:22)
Here you go: http://www.littleblueplane.com/test/jennie/jennie.html It will take text-size increases with no problem, even a few decreases.

spinningjennie -> RE: Sidebar gradient to match length of content (1/25/2007 7:40:45)
Tailslide, Works fantastically in FireFox and Opera!! Very neat trick. Thankyou!! I now see there's an issue in IE6, which I'll investigate tomorrow. Now near midnight in Australia. In IE6 the sidebar with gradient is pushed down below the blue stripe section. I found that the same pushing down occurred in FireFox when I put a 1 pixel red border around the sidebar, just so I could see where it ended, so I guess it's a width type issue. Regards and thanks again spinningjennie

Tailslide -> RE: Sidebar gradient to match length of content (1/25/2007 8:18:35)
I didn't check it in IE6 - just IE7 and FF. My guess is that you're right - there's a bit of an overlap issue going on plus the usual IE double margin thing. I messed with it a bit - should work better now (I've changed some measurements and dumped a div). http://www.littleblueplane.com/test/jennie/jennie.html

spinningjennie -> RE: Sidebar gradient to match length of content (1/25/2007 23:27:42)
Tailslide, Thankyou for being so thoughtfully conscientious. It now works beautfully in IE6 as well as FF and Opera. I had forgotten that IE/Win can double the margin on the same side as the float direction and that display:inline fixes this. This seems to be the key to the width fix. And your removal of the #content div, the change of width of #content-inner and the removal of the padding-right on the #content-inner all make for less coding. Very streamlined! A big thankyou! spinningjennie

Tailslide -> RE: Sidebar gradient to match length of content (1/26/2007 2:38:29)
You're most welcome.

Page: [1]

Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI

0.046875