Gradient Margin Like This Website

Discussion in 'Web Design' started by etangins, May 7, 2013.

to remove all ads.
  1. etangins

    etangins Member

    Messages:
    81
    Hi,

    How would you make a gradient margin like the one in this website http://www.touchofclassdance.com. I am referring to the vertical white to black gradient alongside the Get More Info Box and on the right of the main content box.

    Thanks in advance.
     
  2. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
  3. Frank

    Frank New Member

    Messages:
    117
    Here you go:
    Code:
    element-name {
        background: linear-gradient(top, #ffffff, #434343);
        background: -moz-linear-gradient(top, #ffffff, #434343);
        background: -o-linear-gradient(top, #ffffff, #434343);
        background: -webkit-linear-gradient(top, #ffffff, #434343);
        background: -ms-linear-gradient(top, #ffffff, #434343);
        filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#434343);
        zoom: 1;  /* to guarantee proper filter rendering */
    }
    
     
  4. etangins

    etangins Member

    Messages:
    81
    Thanks for your help so far. Where would I apply a code like the one you supplied. I tried adding it in the element encompassing the whole website but it covers everything.

    Where can I add it so that the gradient only appears in the margins next to the text and images and not cover the content itself?

    Thanks
     
  5. Frank

    Frank New Member

    Messages:
    117
    @etangins:
    Your second question shows you're an absolute beginner, because there is no way for me to know where to put the code without having your code and without a link to your site. I would suggest to do the beginner's courses HTML and CSS at W3Schools. It's no use trying to create a site without basic knowledge, and my time is limited.
     
  6. etangins

    etangins Member

    Messages:
    81
    I'll admit that I am a beginner, but I am trying to expand my knowledge. I have tried to read up on gradients but I still cannot find a solution. I came here as a last resort but I would really appreciate your help.

    Whenever I download the site, the gradient disappears. I simply want to be able to recreate the gradient so it looks just like when you view it on the website. I have a feeling it needs to go in a certain div but I cannot figure out which one. All the css elements I try adding the code to lead to overlaping over the content.

    If it would help to look at the code, simply download the website and open it in dreamweaver and the gradient disappear. I want to figure out why is that and what code I could add to restore it.

    Thanks for you time so far,
    Etan
     
  7. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    Dreamweaver ISN'T a browser
     
  8. Frank

    Frank New Member

    Messages:
    117
    Which website? You only gave the URL of the site that is your example, not of your own site.
     
  9. etangins

    etangins Member

    Messages:
    81
    I am aware that dreamweaver isn't a browser. The gradients disappear when I view the webpage in any browser. Download the example website and you'll see what I mean. I don't have any specific site, I simply want to learn how to make gradients like the ones in this site by learning the best way to make them.

    If you could please explain to me which css element to add the gradient code to in the example site to make the gradients, it would help me out a lot.

    If it helps, I was searching around in the css code and I found the following
    {
    #wrapper { width:100%; min-height:930px; height: auto; margin-left:auto; margin-right:auto; background:url(images/wrapper-bg.gif) no-repeat fixed center top; } /**/
    }
    and I think that the wrapper-bg.gif might not have downloaded which would explain why the gradient was not showing up. However, when I tried adding your gradient code under #wrapper to replace the background: , it messed up the site.
     
    Last edited: May 8, 2013
  10. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    A couple of "where you are going wrong" scenarios.

    1: You are not downloading the images.
    2: Javascripts are NOT allowed to run in a non-http context.


    NOW:

    Before you try to use these 'advanced' concepts of CSS you NEED to learn the basics! Your questions show that you do not understand the basics of HTML structure and the concepts of CSS as applied to the structure, you HAVE to learn to walk before you can start running.

    As we have said to so many before TURN OFF the (probably hookey copy of) Dreamweaver "design" view and learn to CODE so you know how to 'fix' what DW breaks.

    Dreamweaver is; without doubt; the second worst way to learn HTML and CSS development.
     
  11. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    intrigued to know whats no 1 on your list :D
     
  12. etangins

    etangins Member

    Messages:
    81
    I was able to figure that I did not download the gradient image so for now, the problem is solved. As much as I would like to learn more about css and html, I am designing a website for a competition which has a deadline very soon. My website got 2nd in the state and now I am redesigning it for nationals so I don't currently have the time to learn.

    If you have some sources you could give me that would help me learn about the concepts involved with what I want to do, I would be open to that but if you could simply tell me where to put such a gradient code, it would help me out a lot. Otherwise, I resolved the gradient issue myself.
     
  13. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    "we" do not KNOW. I would know what elements it should be applied to IF I WAS CREATING THE LAYOUT, ..... but as I am not .... I have absolutely no idea.
     
  14. d a v e

    d a v e New Member

    Messages:
    671
    "My website got 2nd in the state and now I am redesigning it for nationals so I don't currently have the time to learn. " wow is that a state of confusion or... ?

    you should always make time to learn ;)
     
  15. junery00

    junery00 New Member

    Messages:
    39
    how can you have your website in 2nd place without knowing the code , i don't know too much the codes but i don't think my site can get the 2nd place at least i'm good with codes
     
  16. etangins

    etangins Member

    Messages:
    81
    I wasn't the judge but I do know some code. I really don't understand what the big deal here is. I gave you an example website and I am asking where I would put the gradient code

    element-name {
    background: linear-gradient(top, #ffffff, #434343);
    background: -moz-linear-gradient(top, #ffffff, #434343);
    background: -o-linear-gradient(top, #ffffff, #434343);
    background: -webkit-linear-gradient(top, #ffffff, #434343);
    background: -ms-linear-gradient(top, #ffffff, #434343);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#434343);
    zoom: 1; /* to guarantee proper filter rendering */
    }

    in that example website to make a gradient instead of the one they used with an image. WHERE IN THAT SITE WOULD THIS CODE GO.
     
  17. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    NO, NO, NO! element ID maybe.

    You REALLY do need to learn the basics, AND the parlance of HTML & CSS so we can all speak the same language.

    'name' is a attribute used on form and frame elements.

    CSS rules are applied using the class or the id attributes of an element.
     
  18. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    In the stylesheet.
     
  19. etangins

    etangins Member

    Messages:
    81
    I didn't make that code, I was given that code in an earlier post. I know it should go in the css stylesheet but I am asking which id it should go in for the example site's stylesheet. Should it replace the gradient image code in #content id (I want to replace the gradient image with a gradient code).
     
  20. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    Does that really matter???

    It is the id or class of the element in YOUR code that you want the rules to apply to.
     

Share This Page