CSS Gradient Fill

[Petrolhead]

Hi eveyone,

I was wondering if anyone could help me with my web page.

I'm trying to fill a div id with a gradient from one colour to another, same sort of idea as Steve has done with the blue box containing his name at the top of his home page.

I've currently got it filled with a solid colour but a gradient would be nice.

Any help is appreciated, as I'm just starting out, taken me two days to get the basic formatting on the home page done.

[ragtag]

The header on Steve's page is using an image. The css for his header is...

background:#000099 url(/images/masthead-background.jpg) repeat-x scroll left top;

It's simply a background image of a gradient. Generally you'll use a tall and slim (10pixels wide maybe) picture, and use the repeat-x option.

As a side note, use Firefox and install FireBug. You can then right click anything on any page and choose inspect element, to get the details on it. Very handy for web page design.

[Petrolhead]

Thanks for the reply,

I know almost nothing about XHTML I've been using the view source option from IE on a number of pages and copied and pasted these into notebook and played around with them until I got them transitioned into the layout and content I wanted with the help of some online tutorials.

Cheating a bit I know but having something to dissect has helped me learn better than trying to create something from scratch as it has examples built in I can use to understand how things go together and how the syntax works.

Will have to download firefox and try the add-in.

Is there any way to view CSS sheets from pepoles web sites on IE8?

[Alfonso Crawford]

Steve's gradient-image is only one pixel wide, actually.

[RT Wolf]

Originally Posted by Petrolhead

Cheating a bit I know but having something to dissect has helped me learn better than trying to create something from scratch as it has examples built in I can use to understand how things go together and how the syntax works.

That's not cheating... Why do you think it is? That's an interesting perspective...

[Petrolhead]

Cheating in the sense that you didn't create it from scratch you used someone elses work to help you out.

Hopefully Steve won't mind though

[Petrolhead]

I'm wondering if anyone would mind helpping me again (please!!)

I've got a rough fromat of the home page done but my banner div is narrower than my menu content and footer divs and I can't figure out why.

Also I've got gaps between each div top and bottom where the body colour shows through and I'm a bit confused as to how to close these up padding, border or margin

Any help would be much appreciated.

My CSS is as follows:

.banner-title{
text-align: center;
font-size: 300%;
color: #ffffff;
font-weight: bold;

}
.banner-subtitle{
font-size: 150%;
color: #ffffff;
font-weight: bold;
}
#hmenu{
text-align: center;
width: 80%;
padding: 0px 20x 0px 20px;
margin: auto;
border: 1px solid #8B1A1A;
border-top: 0px;
border-bottom: 0px;
background: #B22222;
}
#hnav a:link {
color: #ffffff;
text-decoration: none;
}
#hnav a:visited {color: #ffffff;}
#hnav a:hover {
color: #ffff00;
background: #FF3030;
}
#hnav a:focus {
color: #ffff00;
background: #FF3030;
}
#hnav a:active {
color: #ffff00;
background: #FF3030;
}
#content{
width: 80%;
padding: 0px 20x 0px 20px;
margin: auto;
border: 1px solid #8B1A1A;
border-top: 0px;
border-bottom: 0px;
background: #FFF8DC;
}
#footer{
width: 80%;
padding: 0px 20x 0px 20px;
margin: auto;
border: 1px solid #8B1A1A;
border-top: 0px;
background: #8B1A1A;
color: #ffffff;
text-align: center;
}

[AuspiciousEight]

I did this exact thing, on my site. I used css to do a gradient background fill for my header, mostly just because I could. If you're interested, you can check out my site. I'm sure you can make your way to the .css file.

In reality, of course, I would recommend just using an image, as Steve has done. It actually took a little bit of work to make mine look right in all the different browsers.

Edit: FYI I didn't write that all by hand. :-P A program did it for me.

[aussieNickuss]

Get Firefox (and Safari, Opera & Chrome) immediately!!!

As you get further into web design/development, you will soon realise the devil within Internet Explorer. It's an awful piece of junk....the cancer of the internet!!