1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

HTML Gradient help

Discussion in 'Web Design & Development' started by help4me, Jan 19, 2008.

Thread Status:
Not open for further replies.
Advertisement
  1. help4me

    help4me Thread Starter

    Joined:
    Oct 29, 2005
    Messages:
    20,384
    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

    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.
     
  2. dudeking

    dudeking

    Joined:
    Feb 7, 2007
    Messages:
    483
    To get it cross browser mate your gonna have to use images...
     
  3. help4me

    help4me Thread Starter

    Joined:
    Oct 29, 2005
    Messages:
    20,384
    what about using a span command? Since it's a table.. would that work?
     
  4. eric_sc

    eric_sc

    Joined:
    Sep 17, 2007
    Messages:
    69
    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>
     
  5. help4me

    help4me Thread Starter

    Joined:
    Oct 29, 2005
    Messages:
    20,384
    Is there a way to do it without imaging?
     
  6. tomdkat

    tomdkat Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,141
    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...
     
  7. help4me

    help4me Thread Starter

    Joined:
    Oct 29, 2005
    Messages:
    20,384
    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.
     
  8. help4me

    help4me Thread Starter

    Joined:
    Oct 29, 2005
    Messages:
    20,384
    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?
     
  9. jaymanson

    jaymanson

    Joined:
    Mar 18, 2007
    Messages:
    199
    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:
    <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 Files:

    • bg.gif
      bg.gif
      File size:
      155 bytes
      Views:
      8,589
  10. dudeking

    dudeking

    Joined:
    Feb 7, 2007
    Messages:
    483
    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.
     
  11. help4me

    help4me Thread Starter

    Joined:
    Oct 29, 2005
    Messages:
    20,384
    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 ;) )
     
  12. Anthony:-P

    Anthony:-P

    Joined:
    Nov 24, 2006
    Messages:
    521
    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
     
  13. help4me

    help4me Thread Starter

    Joined:
    Oct 29, 2005
    Messages:
    20,384
    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.
     
  14. tomdkat

    tomdkat Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,141
    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...
     
  15. Sponsor

As Seen On
As Seen On...

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.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/673569