Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 251
  • Last Modified:

CSS border question

I want my website (which is kind of messy right now due to the fact that I am working on it) to have gradient borders on the left and right that extend the whole height of the page.  I have attached the images. I cannot find  good tutorial on how to do this - can anyone help?

http://tinyurl.com/4ttp4yg

 left sidebg-fade2.jpg
0
lvollmer
Asked:
lvollmer
  • 6
  • 4
1 Solution
 
jjperezaguinagaCommented:
Greetings Ivollmer,

There are many ways to do that. The first thing you should be aware of is that some rules have to followed in order to do it. The most important of them is to have a fixed width container that will hold all your information and where you can wrap the gradients around.

Now, an approach could be about having that width, create and image with a white content and then just the gradient around it. You can see that example in the following webpage: http://mooid.mx

In the other hand, you can just use div containers and do the trick. I'll give you the lates approach in the following code: here I made a "wrapper" with an "X" width and 3 divs inside of it. The width of the divs should be something like a) 2 divs with 1/12 of "X" width b) 1 div with 10/12 of "X" width. Your small width divs are the ones with the gradient on it.

Here's the source code and you can feel free to see it at http://jjperezaguinaga.com/EESandbox/CSS/. Now, I had to use a new image since yours were not good for gradient. Choose carefully your images since somewhat bad effect can appear. (For instance, check the difference at http://jjperezaguinaga.com/EESandbox/CSS/index2.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">  
<head>  
<title> Seeing the CSS</title>
<style type="text/css">
#bigger_wrap{width: 960px; margin: 0 auto;}
#wrap{margin: 0 auto; background: black; height: 200px; width: 824px; display: block; margin-top: -10px; float: left;}
#bg_left {height: 200px; background: url(http://filedb.experts-exchange.com/incoming/2011/03_w11/424805/bg-fade.jpg) repeat-y; width: 68px;float: left; margin-top: -10px; }
#bg_right {height: 200px; background: url(http://filedb.experts-exchange.com/incoming/2011/03_w11/424806/bg-fade2.jpg) repeat-y; width: 68px;float: right; margin-top: -10px; }
</style>

</head>  
<body> 

<div id="bigger_wrap">
	<div id="bg_left"> </div>
	<div id="wrap">	</div>
	<div id="bg_right"> </div>
</div>

</body>
</html>

Open in new window


Best regards,
-JJ
0
 
DubouxCommented:
Or create a container for all the stuff in the middle, and give that a shadow in CSS.
0
 
lvollmerAuthor Commented:
JJ - thank you for the detailed description. In my case, I need the CSS to be applied to #bigger_wrap - I am not able to add the bg_left and bg_right divs to the code. basically I need to do what Duboux suggested. Any idea ho to do this using the container div #bigger_wrap?
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
jjperezaguinagaCommented:
Greetings Ivollmer,

Well, the CSS solution would be using the box-shadow property. Here's the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">  
<head>  
<title> Seeing the CSS</title>
<style type="text/css">
#bigger_wrap{
width: 960px; margin: 0 auto;
height: 600px;
-moz-box-shadow: 0px 0px 10px 10px #888;
-webkit-box-shadow: 0px 0px 10px 10px #888;
box-shadow: 0px 0px 10px 10px #888;
}
</style>
</head>  
<body> 
<div id="bigger_wrap">
</div>
</body>
</html>

Open in new window


Feel free to check how it looks like in the following link:
http://jjperezaguinaga.com/EESandbox/CSS/index.html

In order to make the shadow bigger or smaller, just play with the values of the box shadow property. Finally, a last word about this method is that this is CSS3, which even though is the most cutting-edge thing in web standards, browsers such as Internet Explorer 7 or even 8 (IE6 is dead), won't display the same effect. Check the following links in order to solve that:

http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

Also, don't forget to put both the -web-kit and -moz properties, since that property is still a working draft in the W3C, the property is applied as a vendor specific property. More info about it in the next link:

http://reference.sitepoint.com/css/vendorspecific

Best Regards,
-JJ
0
 
lvollmerAuthor Commented:
hey that works great! for some reason it only goes halfway down the page though - did I do something obviously wrong?
0
 
lvollmerAuthor Commented:
0
 
jjperezaguinagaCommented:
Can you provide a link in other to debug it?
0
 
lvollmerAuthor Commented:
for some reason the footer is appearing underneath NJdocs ad. there are no missing div tags though.
0
 
lvollmerAuthor Commented:
0
 
jjperezaguinagaCommented:
I'm afraid your problem is that your container goes only to 600px, where your content is way more that. A solution would be to make it as long as it reaches your content, although it would only work for this amount of content. The right height would be 2000px.

I'm afraid the reason why your footer goes up there, is because you have no defined width for each of your containers. As a rule of thumb, all your containers should always have a fixed width, the overflow:hidden property, the display:block; and the float:left, in order to know how they are fitting through your webpages.

Hope it helps.
Best regards,
-JJ
0
 
lvollmerAuthor Commented:
OK I will award points and open a new question - perhaps you can help me
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now