CSS/HTML Help

josh.p. · 29-01-2010, 08:33 PM

Hi All,

I'm currently building a website as part of my A-level project. The basic explanation of my site is;

1 container DIV- Width: 768, Height: Auto
(The following are nested within the DIV)
1 Header DIV- Width: 768, Height: 150
1 Navigation DIV- Width: 768, Height: 50
1 'Left content' DIV- Width: 450, Height: Auto
1 'Widget Bar' DIV- Width: 318, Height: Auto

Basically the effect I want to add to the 'Left content' and 'Widget Bar' Div, A gradient image, fading from the DIV's background colour to transparent.

So that it gives the effect that the bottom of the DIV is fading out.

Everything I've tried googling is just bringing up DIVs that fade/in out on page loading, which isn't really what I want.

Wondering if anyone could give me any help with this one. I assume having nesting both the Left content and Widget bar (where I will keep some Java and PHP stuff) in separate DIVs, with another DIV beneath this, which is positioned 'relative' to the other one, and has a background of a fading out PNG gradient would work?

Can't get it to though!

I'm using a HTML document with an attached style sheet

Dawn · 30-01-2010, 07:27 AM

I'll give Adrian a shout.

Hex · 30-01-2010, 12:31 PM

i'm on the case, tinkering in the guts of a webpage, seeing what i can do in relation to this...

Dawn · 30-01-2010, 12:34 PM

Yes he's neglecting his household duties to gradiate colours.

catrancher · 30-01-2010, 01:12 PM

Will this one give you what you need, Josh?

Tom (

... who's fading in and out this morning himself!)

Slowhand · 30-01-2010, 01:47 PM

I`m staying well out of this one!

Hex · 30-01-2010, 02:07 PM

Ok, Josh...

I've been busy

Hopefully this will give you some helpful ideas to play with: Click Me! Click Me!!!

The page includes a link to download a zip file with the html, css, and images used.

Hope that helps. Any problems, let me know (or get Dawn to hunt me down and get me to login...)

Keith · 30-01-2010, 02:17 PM

hehe that's very very cool

catrancher · 30-01-2010, 02:41 PM

Quote:

Originally Posted by Slowhand

I`m staying well out of this one!

Oh... come on, Terry! Show us what you got!

Tom (

... I wanna see... I wanna see!)

Tink · 30-01-2010, 02:59 PM

Ahem. I'll have you know Mr. Catrancher, that Mr. Slowhand and I keep our tekknikkal advice VERY close and don't "show" it around like some cheapie ... well, need I say more? * sniff *

29-01-2010, 08:33 PM	#1 (permalink)
josh.p. Moderator Join Date: Jun 2008 Location: Wirral Posts: 7,865 Thanks: 12 Thanked 19 Times in 19 Posts	CSS/HTML Help Hi All, I'm currently building a website as part of my A-level project. The basic explanation of my site is; 1 container DIV- Width: 768, Height: Auto (The following are nested within the DIV) 1 Header DIV- Width: 768, Height: 150 1 Navigation DIV- Width: 768, Height: 50 1 'Left content' DIV- Width: 450, Height: Auto 1 'Widget Bar' DIV- Width: 318, Height: Auto Basically the effect I want to add to the 'Left content' and 'Widget Bar' Div, A gradient image, fading from the DIV's background colour to transparent. So that it gives the effect that the bottom of the DIV is fading out. Everything I've tried googling is just bringing up DIVs that fade/in out on page loading, which isn't really what I want. Wondering if anyone could give me any help with this one. I assume having nesting both the Left content and Widget bar (where I will keep some Java and PHP stuff) in separate DIVs, with another DIV beneath this, which is positioned 'relative' to the other one, and has a background of a fading out PNG gradient would work? Can't get it to though! I'm using a HTML document with an attached style sheet __________________

30-01-2010, 07:27 AM	#2 (permalink)
Dawn carpe diem-ing Join Date: Jun 2008 Location: In the red... Posts: 12,565 Blog Entries: 2 Thanks: 4 Thanked 15 Times in 11 Posts	Re: CSS/HTML Help I'll give Adrian a shout. __________________ Don't make me turn you into a very small shell script!

30-01-2010, 12:31 PM	#3 (permalink)
Hex The Toy Master! Join Date: Aug 2008 Location: Under the patio... Posts: 171 Thanks: 0 Thanked 1 Time in 1 Post	Re: CSS/HTML Help i'm on the case, tinkering in the guts of a webpage, seeing what i can do in relation to this... __________________ ... 'nuff said

30-01-2010, 12:34 PM	#4 (permalink)
Dawn carpe diem-ing Join Date: Jun 2008 Location: In the red... Posts: 12,565 Blog Entries: 2 Thanks: 4 Thanked 15 Times in 11 Posts	Re: CSS/HTML Help Yes he's neglecting his household duties to gradiate colours. __________________ Don't make me turn you into a very small shell script!

30-01-2010, 01:12 PM	#5 (permalink)
catrancher 42 Suduko Champion! Join Date: Oct 2008 Location: Cumming, GA. A small suburb of Atlanta. Posts: 2,327 Thanks: 29 Thanked 27 Times in 19 Posts	Re: CSS/HTML Help Will this one give you what you need, Josh? Tom (... who's fading in and out this morning himself!) __________________

30-01-2010, 01:47 PM	#6 (permalink)
Slowhand Cruise Director Join Date: Jul 2008 Location: Staffordshire U.K. Posts: 3,094 Thanks: 0 Thanked 13 Times in 13 Posts	Re: CSS/HTML Help I`m staying well out of this one! __________________

30-01-2010, 02:07 PM	#7 (permalink)
Hex The Toy Master! Join Date: Aug 2008 Location: Under the patio... Posts: 171 Thanks: 0 Thanked 1 Time in 1 Post	Re: CSS/HTML Help Ok, Josh... I've been busy Hopefully this will give you some helpful ideas to play with: Click Me! Click Me!!! The page includes a link to download a zip file with the html, css, and images used. Hope that helps. Any problems, let me know (or get Dawn to hunt me down and get me to login...) __________________ ... 'nuff said

30-01-2010, 02:17 PM	#8 (permalink)
Keith Camera nut Join Date: Jun 2008 Location: UK Posts: 12,855 Images: 17 Blog Entries: 4 Thanks: 43 Thanked 22 Times in 19 Posts	Re: CSS/HTML Help hehe that's very very cool __________________ Start your own blog free at http://wdisneysecrets.com/forums/blogs/ See and review Disney at http://wdisneysecrets.com/reviews Upload your photos to http://wdisneysecrets.com/gallery Get your own Disney Countdown at http://toys.wdisneysecrets.com

30-01-2010, 02:59 PM	#10 (permalink)
Tink Cead Mille Failte! Join Date: Jun 2008 Location: 15 minutes (or so) North of WDW Posts: 19,022 Blog Entries: 3 Thanks: 13 Thanked 52 Times in 44 Posts	Re: CSS/HTML Help Ahem. I'll have you know Mr. Catrancher, that Mr. Slowhand and I keep our tekknikkal advice VERY close and don't "show" it around like some cheapie ... well, need I say more? * sniff * __________________ Hello Guest! Won't you join us! We'd love to have you! "...I don't care what they think. I don't care what they say. What do they know about this love anyway?" Come To My Window, Melissa Etheridge

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode