|
| |
|
|
spinningjennie
Posts: 309
Joined: 2/20/2002
From:
Status: offline
 |
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
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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?
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
spinningjennie
Posts: 309
Joined: 2/20/2002
From:
Status: offline
|
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
< Message edited by spinningjennie -- 1/25/2007 7:56:08 >
| |
|
|
|
spinningjennie
Posts: 309
Joined: 2/20/2002
From:
Status: offline
|
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
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
