# HTML Gradient help



## help4me (Oct 29, 2005)

I am brand new to HTML and CSS. In fact I know nothing of CSS. I am trying to make a header that with a block of gradient color.

What I've done so far...

I created a single cell table with centered text with a vertical gradient fill. The table in w 640 x h 30

here's the code I have... but the gradient code "filterrogidXImageTransform.Microsoft.Gradient(endColorstr='#ffffff', startColorstr='#467aa7', gradientType='1');" only works in IE



> *Feature Product​*​


How do I do left to right gradient in HTML or CSS that works in most browsers? Please... I am very new to this so please be easy on the answer.

Also... a few of my headers will need to be clickable... as they are links to other pages.


----------



## dudeking (Feb 7, 2007)

To get it cross browser mate your gonna have to use images...


----------



## help4me (Oct 29, 2005)

what about using a span command? Since it's a table.. would that work?


----------



## eric_sc (Sep 17, 2007)

i would make a jpg gradient and repeat it in the cell as the bg color like this...


HERE IS YOUR TEXT for the HEADER


----------



## help4me (Oct 29, 2005)

Is there a way to do it without imaging?


----------



## tomdkat (May 6, 2006)

help4me said:


> Is there a way to do it without imaging?


I don't believe so unless there is some JavaScript floating around that will do the trick. The code you posted above,

```
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ffffff ', startColorstr='#467aa7', gradientType='1');
```
 is Windows specific code and won't work in anything but IE on Windows.

EDIT: Looks I was wrong! 

I found this page which demonstrates creating gradients with rounded corners using JavaScript and this page which demonstrates making gradients with CSS. I would think going with the CSS solution would be best, in the long run. 

Good luck! Hope that helps!

Peace...


----------



## help4me (Oct 29, 2005)

Thanks... I had seen the CSS page, but had neglected to right click to get the source code. Now I have it  Next thing I need to do is edit it a bit and get it placed properly to make it an h2 rule.


----------



## help4me (Oct 29, 2005)

Ok... I have the code... but once again I am stuck on how to get it to work the way I want.

I have the div{ } lines in the in the of the html. And the lines in the of the html. Now... so far I can only get the gradient to appear when I include the lines for each 
* in the . Also.... I have the 
 tag.... followed by the tags... followed by the text. The problem I have with the text is that it shows up UNDER (as in directly beneath) the gradient. I want it to be ON the gradient.

Here's the code I have....



Code:


<html>
<head>
<title>My Title Here</title>
</head><style type="text/css">
h2 {	text-color:#000000;
	text-align:center;

}

div {	z-index:1;
	height:1px;
	width:640px;
}
#g1 {
	position:fixed;
	z-index:1;
}



#d1 {background-color:rgb(70,122,167)}
#d2 {background-color:rgb(76,126,170)}
#d3 {background-color:rgb(82,131,173)}
#d4 {background-color:rgb(89,135,176)}
#d5 {background-color:rgb(95,140,179)}
#d6 {background-color:rgb(101,144,182)}
#d7 {background-color:rgb(107,149,185)}
#d8 {background-color:rgb(113,153,188)}
#d9 {background-color:rgb(119,157,190)}
#d10 {background-color:rgb(126,162,193)}
#d11 {background-color:rgb(132,166,196)}
#d12 {background-color:rgb(138,171,199)}
#d13 {background-color:rgb(144,175,202)}
#d14 {background-color:rgb(150,180,205)}
#d15 {background-color:rgb(156,184,208)}
#d16 {background-color:rgb(163,189,211)}
#d17 {background-color:rgb(169,193,214)}
#d18 {background-color:rgb(175,197,217)}
#d19 {background-color:rgb(181,202,220)}
#d20 {background-color:rgb(187,206,223)}
#d21 {background-color:rgb(193,211,226)}
#d22 {background-color:rgb(200,215,229)}
#d23 {background-color:rgb(206,220,232)}
#d24 {background-color:rgb(212,224,234)}
#d25 {background-color:rgb(218,228,237)}
#d26 {background-color:rgb(224,233,240)}
#d27 {background-color:rgb(230,237,243)}
#d28 {background-color:rgb(237,242,246)}
#d29 {background-color:rgb(243,246,249)}
#d30 {background-color:rgb(249,251,252)}


</style>

<body>

<center>

<h2>
<div id="g1">
<div id="d1"><!-- --></div>
<div id="d2"><!-- --></div>
<div id="d3"><!-- --></div>
<div id="d4"><!-- --></div>
<div id="d5"><!-- --></div>
<div id="d6"><!-- --></div>
<div id="d7"><!-- --></div>
<div id="d8"><!-- --></div>
<div id="d9"><!-- --></div>
<div id="d10"><!-- --></div>
<div id="d11"><!-- --></div>
<div id="d12"><!-- --></div>
<div id="d13"><!-- --></div>
<div id="d14"><!-- --></div>
<div id="d15"><!-- --></div>
<div id="d16"><!-- --></div>
<div id="d17"><!-- --></div>
<div id="d18"><!-- --></div>
<div id="d19"><!-- --></div>
<div id="d20"><!-- --></div>
<div id="d21"><!-- --></div>
<div id="d22"><!-- --></div>
<div id="d23"><!-- --></div>
<div id="d24"><!-- --></div>
<div id="d25"><!-- --></div>
<div id="d26"><!-- --></div>
<div id="d27"><!-- --></div>
<div id="d28"><!-- --></div>
<div id="d29"><!-- --></div>
<div id="d30"><!-- --></div>

Site News

</h2>
</br>
</br>
</br>

<h2> No gradient because I didn't place the div 

statements in this header tag.</h2>


</body>
</html>

So what have I done wrong and how do I fix it?*


----------



## jaymanson (Mar 18, 2007)

Why on earth would you want to use all that code? I know you're not keen on using an image, but the way HTML & CSS currently works, it's the quickest, easiest, and only guaranteed cross-platform solution! This is all you need to get the desired result:


```
[URL=#]
[B][SIZE=14]Link Title[/SIZE][/B]
[/URL]
```
Plus the attached tiny image! You can also style the links any way you want. Hope this helps 

Jay


----------



## dudeking (Feb 7, 2007)

seriously dude the only reason people ever use code over images is when there pushed for file size, and that code is probity bigger than the size of an image anyway.


----------



## help4me (Oct 29, 2005)

I understand these things that you have brought up. I want to know how to do it without images simply because I want to know if it can be done and how. I'm not saying it's an efficient way to do things, nor that it would be my first choice. But there may indeed come a time when I need to know how to do fancy stuff without the use of images. I just want the knowledge. Is that a problem?


(note.... I prefer dudette to dude  )


----------



## Anthony:-P (Nov 24, 2006)

help4me said:


> I understand these things that you have brought up. I want to know how to do it without images simply because I want to know if it can be done and how. I'm not saying it's an efficient way to do things, nor that it would be my first choice. But there may indeed come a time when I need to know how to do fancy stuff without the use of images. I just want the knowledge. Is that a problem?
> 
> (note.... I prefer dudette to dude  )


It's not a problem - just a long winded way of doing it 

However, if you have access to something like Dreamweaver (one of the latest versions) it has it in there for you, and will put it in itself. THe only thing that i found with it when using it was that in IE you have to "install the ActiveX control" and never bothered testing it in FF.

Regards,
Anthony


----------



## help4me (Oct 29, 2005)

Anthony:-P said:


> It's not a problem - just a long winded way of doing it
> 
> However, if you have access to something like Dreamweaver (one of the latest versions) it has it in there for you, and will put it in itself. THe only thing that i found with it when using it was that in IE you have to "install the ActiveX control" and never bothered testing it in FF.
> 
> ...


Thanks Anthony. I agree... this method is the worst way to go about doing this gradient thing. I just wanted to know if it was possible and how to place the code to make it work the way I wanted. I do have dreamweaver so I'll give that a look over and see what happens. I've just playing with the code and its placement in notepad to see if I could figure it out.


----------



## tomdkat (May 6, 2006)

help4me said:


> Ok... I have the code... but once again I am stuck on how to get it to work the way I want.
> 
> I have the div{ } lines in the in the of the html. And the lines in the of the html. Now... so far I can only get the gradient to appear when I include the lines for each
> * in the . Also.... I have the
> ...


*The problem with the HTML you have is the H2 element will need to be physically positioned above the gradient. Since you have each part of the gradient in a separate DIV, they will appear one below the other. Then the H2 element will appear after the last gradient DIV. Here is a snipet of HTML that will position the "Site News" text in the gradient you have:


Code:


<center>

<div id="g1">
<div id="d1"><!-- --></div>
<div id="d2"><!-- --></div>
<div id="d3"><!-- --></div>
<div id="d4"><!-- --></div>
<div id="d5"><!-- --></div>
<div id="d6"><!-- --></div>
<div id="d7"><!-- --></div>
<div id="d8"><!-- --></div>
<div id="d9"><!-- --></div>
<div id="d10"><!-- --></div>
<div id="d11"><!-- --></div>
<div id="d12"><!-- --></div>
<div id="d13"><!-- --></div>
<div id="d14"><!-- --></div>
<div id="d15"><!-- --></div>
<div id="d16"><!-- --></div>
<div id="d17"><!-- --></div>
<div id="d18"><!-- --></div>
<div id="d19"><!-- --></div>
<div id="d20"><!-- --></div>
<div id="d21"><!-- --></div>
<div id="d22"><!-- --></div>
<div id="d23"><!-- --></div>
<div id="d24"><!-- --></div>
<div id="d25"><!-- --></div>
<div id="d26"><!-- --></div>
<div id="d27"><!-- --></div>
<div id="d28"><!-- --></div>
<div id="d29"><!-- --></div>
<div id="d30"><!-- --></div>

[b]<h2 style="margin-top: -20px;">Site News</h2>[/b]
</br>
</br>

Adding the negative margin to the H2 element will move it "up" into the gradient like you want. While it might be technically feasible to create a gradient without using images, it's easier and probably arguably more practical to use an image instead. 

Peace...*


----------

