I need to add a shadow to the right and left sides of my main content area. Any ideas how to accomplish this with cross browser and mobile compatibility?
Site can be viewed at: http://ushousingco.com/template.htm
One more thing..I'm also trying to get the little strip above the blue bar in main content area to be transparent...ultimately there will be an image behind it. Is there a way using CSS to do this? Thanks in advance!
You could use box-shadow. Will work for all current browsers. css3.
http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
Though I would use images. Images will work on any browser. One way would be to edit the body background in photoshop and find the right spots then add the shadow.
Another way would be to split your main div into three divs and add bg image in css for the left and right div. These images would be transparent shadows or shadows on same bg color as you need. You could let it fade to white as you go down the page or you could use a repeating shadow image. They are your oats.
Agreed, I'd go with a background image, especially since you're already using a fixed width so you know just how wide the image has to be. Notice how when you use box-shadow you get the shadow along the top as well -- you probably don't want that. You have to play with the numbers a bunch to make it look OK.
As for the strip above your nav bar, it's coming from the padding-bottom for your #header div. The white color comes from the background color of that div, which is what gets filled in wherever there is padding. You can either change the background color for that div, or remove the padding and then add padding-top: 10px; to your #container div
You could simply use the CSS3 code below:
div
{
box-shadow: 1px 1px 1px black;
}
Of course you can change the pixels as well as the color. Hope this helps!
css3 is the best method
Strongly advise to use CSS3, as it is very commonly supported (enough for Facebook and Twitter) and works like a dream.
Also much faster load times, less file space and less bandwith.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.