?
Solved

CSS border question

Posted on 2011-03-11
11
Medium Priority
?
247 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
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 
LVL 6

Accepted Solution

by:
jjperezaguinaga earned 2000 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

Want to be a Web Developer? Get Certified Today!

Enroll in the Certified Web Development Professional course package to learn HTML, Javascript, and PHP. Build a solid foundation to work toward your dream job!

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
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 video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

762 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