HTML Gradient help

help4me · 11:11 AM

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 "filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ffffff ', startColorstr='#467aa7', gradientType='1');" only works in IE

Quote:

<center><table width="640"style="filter:progid:DXImageTransform.Microsoft.Gradient(endColo rstr='#ffffff', startColorstr='#467aa7', gradientType='1');">
<tr>
<td>
<center><h2><center><font color="#000000">Feature Product</font></center></h2></center>
</td>
</tr>
</table></center>

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 · 20-Jan-2008, 05:26 PM #2

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

help4me · 20-Jan-2008, 07:18 PM #3

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

eric_sc · 20-Jan-2008, 11:38 PM #4

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

<table width="800" border="0" cellspacing="0" cellpadding="0">

<tr>
<td background="SOURCEIMAGE_GRADIENT">HERE IS YOUR TEXT for the HEADER</td>
</tr>
</table>

help4me · 21-Jan-2008, 05:12 PM #5

Is there a way to do it without imaging?

tomdkat · 07:43 PM

Quote:

Originally Posted by help4me

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,

Code:

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 · 22-Jan-2008, 12:24 PM #7

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 · 24-Jan-2008, 10:32 PM #8

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 <head> of the html. And the <div> lines in the <body> of the html. Now... so far I can only get the gradient to appear when I include the <div> lines for each <h2> in the <body>. Also.... I have the <h2> tag.... followed by the <div> 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 · 25-Jan-2008, 02:01 AM #9

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:

HTML Code:

<html> <head> <style type="text/css">
#header {
	width: 640px;
	height: 30px;
	margin: 0 auto;
	background: url("bg.gif") repeat-x top left;
}
h2 {
	color: #000000;
	text-align: center;
}
</style> </head> <body> <div id="header"> <a href="#"><h2>Link Title</h2></a> </div> </body> </html>

Plus the attached tiny image! You can also style the links any way you want. Hope this helps

Jay

dudeking · 25-Jan-2008, 03:15 AM **#10**

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 · 25-Jan-2008, 08:47 AM **#11**

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 · 25-Jan-2008, 08:51 AM **#12**

Quote:

Originally Posted by help4me

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 · 25-Jan-2008, 11:35 AM **#13**

Quote:

Originally Posted by Anthony:-P

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

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 · 29-Jan-2008, 02:50 PM **#14**

Quote:

Originally Posted by help4me

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 <head> of the html. And the <div> lines in the <body> of the html. Now... so far I can only get the gradient to appear when I include the <div> lines for each <h2> in the <body>. Also.... I have the <h2> tag.... followed by the <div> 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....

(snip)

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

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>

<h2 style="margin-top: -20px;">Site News</h2>
</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...

Search
Search in:
Show Threads Show Posts
Advanced Search

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