Hi, I would like my site to have a centered page with a slight drop shadow on each side. The margins would be flexible but the centered content (960px) would be static.
This is what I would like on the sides (left side showing):
This is what I have now (left side showing):
I’m thinking I need to do something with a .png file like the one below:
What CSS code would I need to do this? And, how would I make the centered page’s background go all the way to the bottom of the page if I don’t have a lot of content on that page?
I am new at this and putting the site together with Dreamweaver… that’s how I did the navigation. Using “Build Your Own Site The Right Way, Using HTML & CSS” has helped me to understand what’s going on - great book!
Here is relevant code I have so far for my CSS style sheet:
@charset "UTF-8";
/* CSS for site. */
body,td,th {
font-family: Verdana, Geneva, sans-serif;
color: #404040;
font-size: 13px;
}
body {
background-color: #E5E5E5;
margin-top: 0px;
text-align: center; /* Allows the content to be center with the div#theContainer */
}
div#theContainer /* Allows the content to be center */
{
width: 960px;
margin-left: auto;
margin-right: auto;
background-color: #F8F8F8;
text-align:left
}
#padder /* Puts a margin around the centered content on pages. */
{
padding-left: 30px;
padding-right: 30px;
border-left-style: solid;
border-right-style: solid;
border-width: 1px;
border-color: #B0B0B0 ;
}
p.mNone { /* Gets rid of the space between the top image and navigation bar. */
margin: 0;
padding-top: 0em;
padding-bottom: 0em;
}
Here is HTML from a Template page:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Template</title>
<link href="style2.css" rel="stylesheet" type="text/css"/>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="theContainer">
<div id="borderContent">
<p class="mNone" align="left"><img src="images/masthead_imag.jpg" width="960" height="164" /></p>
<ul id="mainNav" class="MenuBarHorizontal">
<li><a href="index.html">Home</a> </li>
<li><a href="free-trial.html" title="Try AlbumsInDesign">Free Trial</a></li>
<li><a href="products.html" title="AlbumsInDesign Products" class="MenuBarItemSubmenu">Products</a>
<ul>
<li><a href="products/script-set.html" title="Script Set">Script Set</a></li>
<li><a href="products/indesign-album-tutorials.html" title="Tutorials">Tutorials</a></li>
</ul>
</li>
<li><a href="indesign-vs-photoshop.html">Why InDesign</a></li>
<li><a href="#">Faqs</a></li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("mainNav", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<div id="padder">
<p> </p>
<h1>Learning Web Design!</h1>
<p> </p>
</div>
</div>
</div>
</body>
</html>
Thank you so much for taking a look at this and any advice you may have.
for Strict but am still getting the transitional verbage. That preference must be for its own evaluation. I looked around and found the link to get a good evaluation: