Whirlpool

I would like to know how they get background colors to fade to white, for example one might have a heading with black text and the background is darker at the bottom and it fades to white at the top.

Also how do you get the background to fade from a darker color to a lighter color and then back to dark again ?

How is this done ?

#header {background-color: gray; color: black;}
...
<div id="header">Heading</div>­
...

Boring !!!

Do you mean you want the background on a div to have a gradient or for the background to change colour over a period of time? For the gradient the best way is to use a thin image and have it repeat-x (done using CSS). For a colour that changes with time you need to use javascript.

M3Zephyer writes...

Also how do you get the background to fade from a darker color to a lighter color and then back to dark again ?

The previous poster gave you the answer already... this effect is achieved in the same way.

You use the gradient feature of your favourite graphics software to create an image of x height and 1px width and apply the gradient to it.

Then use CSS background property to apply the image to the background of a html element.

grahamrb writes...

Do you mean you want the background on a div to have a gradient or for the background to change colour over a period of time? For the gradient the best way is to use a thin image and have it repeat-x (done using CSS). For a colour that changes with time you need to use javascript.

Ok thank you kindly Grahamrb.

Yes, I want the background div to have a gradient, because just a plain color is a bit boring.

Also I'm having trouble with controlling text.

<div><div id="header">Red Rose</div><div id="img"><img src="red_rose.jpg"></div>­ <div id="footer"><div id="price">$6</div><di­ v id="gst">#incl. 10% GST</div><div id="button"><img src="button_details.gif" border=0></div></div></div>­

So basically what I'm trying to do is arrange the 2 lines of text in a box with a small image.

I want the two lines of text one above the other and the image in the bottom right corner.

How can I do this ? ( I've bee on this for hours )

Ma®ek writes...

The previous poster gave you the answer already... this effect is achieved in the same way.

Ok thanks for your reply also. :)

M3Zephyer writes...

<div><div id="header">Red Rose</div><div id="img"><img src="red_rose.jpg"></div>­ <div id="footer"><div id="price">$6</div><di­ v id="gst">#incl. 10% GST</div><div id="button"><img src="button_details.gif" border=0></div></div>­ </div>

Wow... I've never seen anyone able to squeeze more divs into a piece of html :)

Let's go through the motions, what I think you're looking for is something along the lines of:

<div class="item">
<span class="description">Red Rose</span>
<img class="product_image" src="red_rose.jpg">
<span id="price">$6 #incl. 10% GST</span>
<input type="submit" />
</div>

id is used to identify an html uniquely, class is used to create a reusable style. There are already elements which should be used, ie, header is h1, h2, h3... etc... they have a meaning but more importantly they can be styled in CSS. <input type="submit"... is typically used for form submission, though sometimes you might have to use <a... and javascript...

Go to www.csszengarden.com and follow the tutorials found on that site... look through the source code of those sites too...

This is a good technique for gradients over text, it could be used over a block too: www.webdesignerwall.com/...ient-text-effect

Ma®ek writes...

id is used to identify an html uniquely

"Uh -huh !!! So that's it !!!"

You have saved me hours of frustration, its sometimes difficult to remember all the rules of CSS.

Happy coding. :D

Haven't tried it yet, so when I get time, I'll do it.

bob earth writes...

This is a good technique for gradients over text

Thank you also bob, it's helpful to have you guys around when there's a problem that may take hours to resolve.