Hi everybody I've built a site that has a background with a shadow effect at the sides of the main container so that the body looks raised. This shadow runs all the way up the sides to the top of the page as seems to be popular these days. However, I wanted an effect like on this site http://www.mijas-villas.com . The shadow runs along the sides but the top has a margin where there is no shadow and the background can be seen. I can't work out how to do this cos I'm quite new to web design. I made a graphic with a shadow that simply repeats on the y-axis all the way to the top and bottom. Is there an easy way of doing this so that it doesn't go all the way to the top- can't work it out. Thanks for your help!!
I made a demo, Simple Drop Shadows using CSS. My site is down at the moment, so here's the source. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" /> <title> Simple Drop Shadows using CSS </title> <style type="text/css"> /*<![CDATA[*/ html, body { margin: 0; padding: 0; } body { font: 100% verdana, helvetica, sans-serif; line-height: 1.4; color: black; background-color: white; } p { font-size: 1em; margin: 1em 0; /*IE needs explict values to avoid buggy collapsing margins behavior.*/ } h1, h2 { font-family: georgia, serif; text-align: center; clear: both; margin-bottom: 0; } #wrapper { width: 90%; margin: 20px auto; } .shadowbox { background-color: #ccc; color: black; border: 2px solid #eee; border-width: 0 2px 2px 0; } .contentbox { background-color: white; color: black; position: relative; top: -2px; left: -3px; border: 1px outset #bbb; padding: 0 1em; } p span.contentbox { display: block; } #demobox1 { width: 250px; float: left; } #demobox2 { margin-left: 50%; } .demobox3 { color: black; background-color: white; font: bold 1.8em verdana, sans-serif; margin-top: 0; position: relative; } .demobox3 span { position: absolute; top: -3px; left: -3px; color: white; background-color: transparent; } .demobox3 span.v2 { color: #ccc; } /*]]>*/ </style> </head> <body> <div id="wrapper"> <div id="pageheader"> <p> <a href="../">Gary <span class= "kern">T</span>urners<br /> <span class="light">html and css playpen</span></a> </p> <hr /> </div> <h1> Simple CSS Drop Shadows </h1> <h2> Text in a block element </h2> <p class="shadowbox"> <span class="contentbox">Now is the time for all good men to come to the aid of their country.</span> </p> <h2> Drop shadows on a block element </h2> <div id="demobox1" class="shadowbox"> <div class="contentbox"> <p> Now is the time for all good men to come to the aid of their country. </p> </div> </div> <div id="demobox2" class="shadowbox"> <div class="contentbox"> <p> Now is the time for all good men to come to the aid of their country. </p> </div> </div> <h2> Drop shadows on individual letters </h2> <p class="demobox3"> This is a demo of shadowing letters only<span>This is a demo of shadowing letters only</span> </p> <p class="demobox3"> This is a demo of shadowing letters only<span class= "v2">This is a demo of shadowing letters only</span> </p> <p> <a href="#top">⇑ back to top of page</a> </p> <p> <a href="../">⇐ home</a> </p> </div><!-- end wrapper --> </body> </html> Code (markup): cheers, gary