Advertisement

There's no such thing as a stupid question, but they're the easiest to answer.
Login
Search

Advertisement

Web Design & Development Web Design & Development
Search Search
Search for:
Tech Support Guy > > >

HTML Gradient help


(!)

help4me's Avatar
help4me   (Bonnie) help4me is offline help4me has a Profile Picture
help4me has a Photo Album
Computer Specs
Member with 20,384 posts.
THREAD STARTER
 
Join Date: Oct 2005
Location: USA
Experience: Intermediate
19-Jan-2008, 12:03 PM #1
HTML Gradient help
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.
__________________
Perhaps our eyes need to be washed by our tears once in a while, so that we can see Life with a clearer view again.
.

Last edited by help4me; 19-Jan-2008 at 12:11 PM..
dudeking's Avatar
dudeking dudeking is offline
Member with 483 posts.
 
Join Date: Feb 2007
Location: UK, Midlands
Experience: Advanced
20-Jan-2008, 06:26 PM #2
To get it cross browser mate your gonna have to use images...
help4me's Avatar
help4me   (Bonnie) help4me is offline help4me has a Profile Picture
help4me has a Photo Album
Computer Specs
Member with 20,384 posts.
THREAD STARTER
 
Join Date: Oct 2005
Location: USA
Experience: Intermediate
20-Jan-2008, 08:18 PM #3
what about using a span command? Since it's a table.. would that work?
eric_sc's Avatar
eric_sc eric_sc is offline
Computer Specs
Member with 69 posts.
 
Join Date: Sep 2007
Experience: Intermediate
21-Jan-2008, 12:38 AM #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">
<!--DWLayoutTable-->
<tr>
<td background="SOURCEIMAGE_GRADIENT">HERE IS YOUR TEXT for the HEADER</td>
</tr>
</table>
help4me's Avatar
help4me   (Bonnie) help4me is offline help4me has a Profile Picture
help4me has a Photo Album
Computer Specs
Member with 20,384 posts.
THREAD STARTER
 
Join Date: Oct 2005
Location: USA
Experience: Intermediate
21-Jan-2008, 06:12 PM #5
Is there a way to do it without imaging?
tomdkat's Avatar
Computer Specs
Trusted Advisor with 7,141 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
21-Jan-2008, 08:25 PM #6
Quote:
Originally Posted by help4me View Post
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...

Last edited by tomdkat; 21-Jan-2008 at 08:43 PM..
help4me's Avatar
help4me   (Bonnie) help4me is offline help4me has a Profile Picture
help4me has a Photo Album
Computer Specs
Member with 20,384 posts.
THREAD STARTER
 
Join Date: Oct 2005
Location: USA
Experience: Intermediate
22-Jan-2008, 01: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's Avatar
help4me   (Bonnie) help4me is offline help4me has a Profile Picture
help4me has a Photo Album
Computer Specs
Member with 20,384 posts.
THREAD STARTER
 
Join Date: Oct 2005
Location: USA
Experience: Intermediate
24-Jan-2008, 11: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's Avatar
jaymanson jaymanson is offline
Computer Specs
Senior Member with 199 posts.
 
Join Date: Mar 2007
Location: Christchurch, New Zealand
Experience: Advanced Design/HTML/CSS - Intermediate PHP
25-Jan-2008, 03: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
Attached Images
(attached image) 
dudeking's Avatar
dudeking dudeking is offline
Member with 483 posts.
 
Join Date: Feb 2007
Location: UK, Midlands
Experience: Advanced
25-Jan-2008, 04: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's Avatar
help4me   (Bonnie) help4me is offline help4me has a Profile Picture
help4me has a Photo Album
Computer Specs
Member with 20,384 posts.
THREAD STARTER
 
Join Date: Oct 2005
Location: USA
Experience: Intermediate
25-Jan-2008, 09: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's Avatar
Anthony:-P Anthony:-P is offline
Senior Member with 521 posts.
 
Join Date: Nov 2006
Location: Cornwall, UK
Experience: Advanced
25-Jan-2008, 09:51 AM #12
Quote:
Originally Posted by help4me View Post
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's Avatar
help4me   (Bonnie) help4me is offline help4me has a Profile Picture
help4me has a Photo Album
Computer Specs
Member with 20,384 posts.
THREAD STARTER
 
Join Date: Oct 2005
Location: USA
Experience: Intermediate
25-Jan-2008, 12:35 PM #13
Quote:
Originally Posted by Anthony:-P View Post
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's Avatar
Computer Specs
Trusted Advisor with 7,141 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
29-Jan-2008, 03:50 PM #14
Quote:
Originally Posted by help4me View Post
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...
As Seen On

BBC, Reader's Digest, PC Magazine, Today Show, Money Magazine
WELCOME TO TECH SUPPORT GUY!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.


(clock)
THIS THREAD HAS EXPIRED.
Are you having the same problem? We have volunteers ready to answer your question, but first you'll have to join for free. Need help getting started? Check out our Welcome Guide.

Search Tech Support Guy

Find the solution to your
computer problem!




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


WELCOME
You Are Using: Server ID
Trusted Website Back to the Top ↑