asked on

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

bg-fade2.jpg

jjperezaguinaga

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

Duboux

Or create a container for all the stuff in the middle, and give that a shadow in CSS.

Larry Vollmer

ASKER

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?

ASKER CERTIFIED SOLUTION

jjperezaguinaga

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Larry Vollmer

ASKER

hey that works great! for some reason it only goes halfway down the page though - did I do something obviously wrong?

Larry Vollmer

ASKER

http://tinyurl.com/4ttp4yg - link

jjperezaguinaga

Can you provide a link in other to debug it?

Larry Vollmer

ASKER

for some reason the footer is appearing underneath NJdocs ad. there are no missing div tags though.

Larry Vollmer

ASKER

http://tinyurl.com/4ttp4yg - link

jjperezaguinaga

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

Larry Vollmer

ASKER

OK I will award points and open a new question - perhaps you can help me