Tech or Treat! Write an article about your scariest tech disaster to win gadgets!Learn more

x
?
Solved

CSS border question

Posted on 2011-03-11
11
Medium Priority
?
248 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
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

649 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