Whole page shading effect
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>free css template 060</title>
<style type='text/css'>
* {
margin:0;
padding:0;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background: #101010;
color: #ffffff;
}
h1 {
font-size:30px;
color:#FFFFFF;
font-weight:inherit;
}
#container {
width: 1000px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #c38b30;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border-left: 1px solid #904b0f;
border-right: 1px solid #904b0f;
}
#header {
width:1000px;
height:331px;
background:url(060-images/backgroundHeader.jpg) no-repeat left top;
}
#header h1 {
padding:272px 0 0 29px;
}
#header p {
padding:0 0 0 29px;
}
#header a, #mainContent a, #footer a {
color:#fea80e;
text-decoration:underline;
}
#header a:hover, #mainContent a:hover, #footer a:hover {
color:#ffffff;
text-decoration:none;
}
#allContent {
background: #c38b30 url(060-images/siteBackground.jpg) repeat-x;
padding:29px;
}
#sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 228px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
}
#sidebar1 .sideContainer ul, #sidebar1 .sideContainer p {
background:#372b17;
padding:15px 15px;
}
#sidebar1 .sideContainer li {
list-style:none;
background:#372b17;
padding:4px 0;
}
#sidebar1 .sideContainer li a {
background:url(060-images/p.jpg) no-repeat left 3px;
padding-left:25px;
color:#FFFFFF;
}
#sidebar1 .sideContainer li a:hover {
background:url(060-images/p.jpg) no-repeat 10px 3px;
padding-left:35px;
color:#fea80e;
text-decoration:none;
}
.sideConTitle {
background:#4d2b0b;
padding:10px;
}
#mainContent {
margin: 0 0 0 258px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
}
#mainContent b {
color:#fea80e;
}
#mainContent p {
margin:20px 0;
}
#footer {
background:#020201 url(060-images/footerBackground.jpg) repeat-x;
height:66px;
}
#footer p {
text-align:center;
padding-top:20px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/*begin main menu*/
#navcontainer {
padding:20px 0;
background:url(060-images/menuBackground.jpg) no-repeat left top;
width:942px;
height:70px;
}
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
text-align:center;
}
#navlist li
{
display: inline;
list-style-type: none;
height:70px;
}
#navlist a {
padding:21px 30px;
}
#navlist a:link, #navlist a:visited
{
color: #fff;
text-decoration: none;
font-size:24px;
}
#navlist a:hover
{
background:url(060-images/menuActive.jpg) repeat-x;
text-decoration: none;
font-size:24px;
color:#fea80e;
}
#navlist #active a
{
background:url(060-images/menuActive.jpg) repeat-x;
text-decoration: none;
font-size:24px;
color:#fea80e;
}
/*end main menu*/
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
#sidebar1 { width: 258px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body>
<!-- begin #container -->
<div id="container">
<!-- begin #header -->
<div id="header">
<h1>Single Acacia Tree at Sunrise</h1>
<p>by <a href="http://www.flash-templates-today.com">www.flash-templates-today.com</a></p>
</div>
<!-- end #header -->
<div id="allContent">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- begin #sidebar1 -->
<div id="sidebar1">
<div class="sideContainer">
<div class="sideConTitle"><h1>Categories</h1></div>
<ul>
<li><a href="">Our gallery</a></li>
<li><a href="">Clien Testimonials</a></li>
<li><a href="">Best forum about our service</a></li>
<li><a href="">Gallery Page</a></li>
<li><a href="">Srvices</a></li>
<li><a href="">Single Acacia</a></li>
</ul>
</div>
<div class="sideContainer">
<div class="sideConTitle"><h1>Testimonials</h1></div>
<p>Ipsum dolor sit amet, consectetuer adipiscing elit. In nec risus non turpis interm rutrum. Vestibulum et metus. Nulla id magna sed dolor sollicitudin laoreet. tempus in, lacus. <br /><br /><br />Duis tempor posuere diam. Suspendisse vel tellus quis nunc malesuada porta. Dolor sit amet, consectetuer adipiscing elit. In nec risus non turpis interdum rutrum. Vestibulum et metus.</p>
</div>
</div>
<!-- end #sidebar1 -->
<!-- begin #mainContent -->
<div id="mainContent">
<h1>Welcome to site</h1>
<p><b>All website template is released under a Creative Commons Attribution 2.5 License</b><br /><br />
We request you retain the full copyright notice below including the link to www.flash-templates-today.com. This not only gives respect to the large amount of time given freely by the developers but also helps build interest, traffic and use of our free and paid designs. If you cannot (for good reason) retain the full copyright we request you at least leave in place the Website Templates line, with Website Templates linked to www.flash-templates-today.com. If you refuse to include even this then support may be affected.
<b>You are allowed to use this design only if you agree to the following conditions:</b><br />
- You can not remove copyright notice from any our template without our permission.<br />
- If you modify any our template it still should contain copyright because it is based on our work.<br />
- You may copy, distribute, modify, etc. any our template as long as link to our website remains untouched.<br /><br />
For support please visit <a href="http://www.flash-templates-today.com/contact.php">http://www.flash-templates-today.com/contact.php</a></p>
<h1>What does Flash Template mean?</h1>
<p>Flash Template is a ready-made Flash Site that you can download and use for free! Flash Template was created by professional and independent designers for you. You need only to make your adjustments and your flash site is ready. If you open .fla file you can easily change the text information and graphics of the site. There's no need to make animation - our designers already did it. After your text and graphics adjustments you need only to upload .swf file to your server and enjoy your ready Flash Site! Using Free Flash Templates you can save your time and money!</p>
<h1>Your Flash Site will be look professional!</h1>
<p>An extensive number of unique Flash Templates is at your service. All templates on our site were created specially for you! Our independent designers created flash professional templates. Also our templates are unique. It means you can use our flash templates to create your own site!</p>
</div>
<!-- end #mainContent -->
</div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<!-- begin #footer -->
<div id="footer">
<p>Single Acacia Tree at Sunrise Copyright 5 October 2009 | <a title="This page validates as XHTML 1.0 Strict" href="http://validator.w3.org/check/referer" class="footerLink"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> |
<a title="This page validates as CSS" href="http://jigsaw.w3.org/css-validator/check/referer" class="footerLink"><abbr title="Cascading Style Sheets">CSS</abbr></a><br />
Design by <a href="http://www.flash-templates-today.com">Free Flash Templates</a></p>
</div>
<!-- end #footer -->
</div>
<!-- end #container -->
</body>
</html>
Related examples in the same category