Solved

CSS border question

Posted on 2011-03-11
11
245 Views
Last Modified: 2012-05-11
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
Comment
Question by:lvollmer
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
11 Comments
 
LVL 6

Expert Comment

by:jjperezaguinaga
ID: 35113338
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
 
LVL 3

Expert Comment

by:Duboux
ID: 35123612
Or create a container for all the stuff in the middle, and give that a shadow in CSS.
0
 

Author Comment

by:lvollmer
ID: 35131452
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
More Than Just A Video Library

Train for your certification. Learn the latest DevOps tools. Grow your skillset to do better work.

At Linux Academy, we release new training modules every week so you'll always be up to date on the latest tech.

 
LVL 6

Accepted Solution

by:
jjperezaguinaga earned 500 total points
ID: 35132817
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
 

Author Comment

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

Author Comment

by:lvollmer
ID: 35132887
0
 
LVL 6

Expert Comment

by:jjperezaguinaga
ID: 35132921
Can you provide a link in other to debug it?
0
 

Author Comment

by:lvollmer
ID: 35132925
for some reason the footer is appearing underneath NJdocs ad. there are no missing div tags though.
0
 

Author Comment

by:lvollmer
ID: 35132932
0
 
LVL 6

Expert Comment

by:jjperezaguinaga
ID: 35132983
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
 

Author Comment

by:lvollmer
ID: 35133002
OK I will award points and open a new question - perhaps you can help me
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

695 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question