Gradient Margin Like This Website

Frank

New Member
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 */
}
 

etangins

Member
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
 

Frank

New Member
@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.
 

etangins

Member
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
 

etangins

Member
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:

chrishirst

Well-Known Member
Staff member
The gradients disappear when I view the webpage in any browser.

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.
 

etangins

Member
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.
 

chrishirst

Well-Known Member
Staff member
I would be open to that but if you could simply tell me where to put such a gradient code,

"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.
 

d a v e

New Member
"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 ;)
 

junery00

New Member
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
 

etangins

Member
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.
 

chrishirst

Well-Known Member
Staff member
element-name {

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.
 

etangins

Member
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).
 

chrishirst

Well-Known Member
Staff member
but I am asking which id it should go in for the example site's stylesheet

Does that really matter???

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