Solved

CSS border question

Posted on 2011-03-11
11
239 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
  • 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
 
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

747 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now