Web Page Design Question

[goodfella]

Hi.

I am trying to design a site that has a look that the main section is raised up from the whole page.

Please view this example: www.autoanything.com

Notice how the entire page background is a light blue and the main section is plain white. They also added a bit of a drop shadow.

How do you achieve this look?

Thanks,
Marc

 

[vntux]

Ok light Blue but I want to known hexa code that you used !!!

Put it here!! I will try help you

 

[Logan]

Photoshop does it really easily.
The way I've done it is to set the background colour for my site, I normally use a hexa code (e.g. #ffffff for white). Lets say I want the area where my content lives to be 800px wide.
In Photoshop, create an image that's roughly 1000px X 10px (W x H) that has a transparent background. Select an 800px X 10px block in the middle of the image (so you have 200px on either side for your shadow, and paint it white. Double click it and set your drop shadow.
To get the shadow on the corners and bottom edge, do the same, but make your image thicker (1000px X 100px) and select the 800px from the top edge to about 20px from the top edge, paint it white and set the drop shadow.

That's how I would do it. Remember to have a background-repeat: repeat-y; in your stylesheet on your content block so that it repeats over all your content.

A word of warning though, because this idea calls for cutting your content short where the bottom border lives, you're going to need to set a vertical overflow on your content to display content that moves past the edge of the block. To do this, set overflow-y: auto; in your stylesheet.

Hope this helps

 

[adamblan]

KISS

body {
background:#000; //choose the hex of choice
}

div#yourDiv {
background:#FFF; //choose the hex of choice
width:800px; //or however wide
margin: 0 auto; //centers div on screen
}

 

[orangecopper]

its Damn simple dude...

open photoshop...select two colors in the color selectors you want to fade between..then use the gradient tool and use it as the bg.

cheers
joshu

 

[Modern_Media]

http://cache.autoanything.com/images/website3/footer/footer_shadow_frame_gray_1k.gif

If you pick the site apart, you can see the effect done. There are hundreds of ways to do this.

http://triumphrigparts.com/
Here is a site where we abused the shadowing technique in a custom design.
Now, take a look at our background image...

http://triumphrigparts.com/templates/triumph/images/layout/wrapperBkg.png

 

[AusQB]

Ian, can you please delete this spambot?

 

[ian]

Ian, can you please delete this spambot?

spambot deleted