Need Some Help - Topic

Member

Posts: 580

Joined: Nov 28 2009

Gold: 0.00

Jul 1 2013 05:29am

So i see a little shadow under the big picture which makes the whole thing look much better than without it. my question is: How do you make that shadow becouse i can't find the way to do it in the souce codes

so this is the demo site i have seen

http://www.csstemplateheaven.com/demo/clean-white-demo/

and these r the html and css codes

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<title>CssTemplateHeaven</title>
</head>

<body>

<div id="container">

<div id="logo"><a href="index.html"><img src="imges/logo.png" width="218" height="59" alt="logo" /></a></div>

<div id="navcontainer">
<ul>
<li><a href="#" id="current">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>

<div id="header">
<img src="imges/photo.jpg" width="800" height="344" alt="demo" /></div>

<div id="left">
<h2>Services</h2>
<p>Nullam ac lobortis erat. Cras non nibh mauris. Curabitur sed dolor eu urna lobortis malesuada a ac tellus. Cras at est turpis. Morbi tempor erat ut augue venenatis cursus. Nullam ullamcorper congue velit, ut suscipit eros sodales id. Proin ante orci, dictum nec pulvinar non, mollis at est. Duis ultrices aliquet tincidunt. Donec eu libero arcu, non aliquet orci. Curabitur lacinia leo non enim laoreet pellentesque.</p>
</div>

<div id="right">
<h2>about</h2>
<p>Nullam ac lobortis erat. Cras non nibh mauris. Curabitur sed dolor eu urna lobortis malesuada a ac tellus. Cras at est turpis. Morbi tempor erat ut augue venenatis cursus. Nullam ullamcorper congue velit, ut suscipit eros sodales id. Proin ante orci, dictum nec pulvinar non, mollis at est. Duis ultrices aliquet tincidunt. Donec eu libero arcu, non aliquet orci. Curabitur lacinia leo non enim laoreet pellentesque.</p>
</div>

<div id="middle">
<h2>Portfolio</h2>
<p>Nullam ac lobortis erat. Cras non nibh mauris. Curabitur sed dolor eu urna lobortis malesuada a ac tellus. Cras at est turpis. Morbi tempor erat ut augue venenatis cursus. Nullam ullamcorper congue velit, ut suscipit eros sodales id. Proin ante orci, dictum nec pulvinar non, mollis at est. Duis ultrices aliquet tincidunt. Donec eu libero arcu, non aliquet orci. Curabitur lacinia leo non enim laoreet pellentesque.</p>
</div>

<div id="footer">© My Company • Telephone: 99 99 99 99 • My address goes here <br />Template by: <a href="http://www.csstemplateheaven.com">CssTemplateHeaven</a></div>

</div>

</body>
</html>

CSS:

Code

@charset "utf-8";

* {margin: 0; padding: 0}

img {border: none}

body {font-family: arial, helvetica, sans-serif; font-size: 100%; color:#666}

#container {width: 800px; height:470px; margin: 20px auto; font-size: .875em }

#logo {width: 220px; height:64px; float: left; margin-bottom: 20px}

#header {height: 420px; background: url(imges/header.jpg) bottom; clear: both }

#wrap {clear: both}

#left {width: 250px; float: left}

#right {width: 250px; float: right}

#middle {margin-left: 275px; margin-right: 275px}

#left, #right, #middle {margin-bottom: 40px}

#footer {background: url(imges/footer.jpg) no-repeat; clear:both; padding: 20px; text-align: center; font-size: .8em}

/* typography */

a {color: #930}

p {padding: 15px 0; text-align: justify}

h2 {background:#303030; padding:10px; color: #FFF; font-weight: normal; letter-spacing: .15em}

/* navigation */

#navcontainer ul
{
color: White;
float: right;
width: 580px;
padding-top: 25px
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 0px 1em;
color: #999;
font-weight: bold;
text-decoration: none;
float: right;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
color: #000;
font-weight: bold
}