CSS/HTML Help

[josh.p.]

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. :yes: So that it gives the effect that the bottom of the DIV is fading out. :yes: 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? :unsure: Can't get it to though!

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

[Dawn]

I'll give Adrian a shout.

[Hex]

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

[Dawn]

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

[catrancher]

Will this one (http://freeyourdesign.com/css/css-gradient-background-fade/) give you what you need, Josh? :unsure:

Tom (:macwave:... who's fading in and out this morning himself!)

[Slowhand]

I`m staying well out of this one! :lol:

[Hex]

Ok, Josh...

I've been busy :D

Hopefully this will give you some helpful ideas to play with: Click Me! Click Me!!! (http://www.net-artz.co.uk/stuff/css-image-gradients/)

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]

hehe that's very very cool :yes:

[catrancher]

I`m staying well out of this one! :lol:

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

Tom (:macwave:... I wanna see... I wanna see!)

[Tink]

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 *

[catrancher]

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 *

Ohhh... I think I've been :slap:

Tom (:macwave:... wait... I might have actually liked it!)

[Hex]

auntie Tink taught me everything i know...

... be afraid... be vewey afwaid...

[Slowhand]

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 *
Aaaw Tink, now you`ve let the cat out of the bag. :lol:

[catrancher]

... be afraid... be vewey afwaid...


<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/u2OiRb9701o&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/u2OiRb9701o&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Tom (:macwave:... I r!)

[Tink]

auntie Tink taught me everything i know...

... be afraid... be vewey afwaid...

HUSH MAN!!!! Ya' want 'em to start talkin' about us? :wink:

Hope you are doing well, Adrian! :hug2:

[Tink]

Ohhh... I think I've been :slap:

Tom (:macwave:... wait... I might have actually liked it!)
:eek: NAUGHTY BOY!!! :eek:

[catrancher]

:eek: NAUGHTY BOY!!! :eek:

Is it possible to :banned: myself?

Tom (:macwave:... Enquiring minds want to know!)

[Tink]

Welllll... no. :D

[josh.p.]

I don't understand... Skywatcher didn't make this thread... why all the derailment :unsure: :rotfl:

Thank you SOOOO much Hex!!!! :thumbsup: :thumbsup: :thumbsup:

[Hex]

Happy to help Josh...

oh yeah, i have updated it with an example of how you can achieve the other effect you asked me about...

Now i had better go cook some dinner for Dawn... she gets grumpy if she is not fed regularly and on time... Steven may want feeding too :D

[josh.p.]

You are a lifesaver! Thank you :D

[Hex]

no problem... i take it that the additional bit you asked me about did the trick? :D

[josh.p.]

From the preview you've given me it works, so I'm going to copy and paste it over to my document when I'm back on my mac :) Should work just fine as it's exactly what I had in mind!

I'll show you the final product once I've finished it :yes: