Shading section bar
<!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 117</title>
<style type='text/css'>
* {
margin:0;
padding:0;
}
body {
font-family:Georgia,"Times New Roman",Times,serif;
font-size:12px;
background: #823037;
color: #ffffff;
}
#container {
width: 858px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
}
#header {
height:315px;
}
#header h1 {
font-size:44px;
letter-spacing:-1px;
text-transform:lowercase;
font-weight:inherit;
padding:27px 0 0 20px;
float:left;
}
.headerPic {
padding-top:11px;
}
#sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 226px; /* 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 */
margin:10px 0 0 0;
}
#mainContent {
margin: 10px 239px 0 0; /* 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. */
}
.title {
background:url(117-images/h2Background.jpg) no-repeat left top;
height:41px;
margin:0 9px;
}
.title2 {
background:url(117-images/rightTitleBackground.jpg) no-repeat left top;
height:41px;
margin:0 9px;
color:#FFFFFF;
}
#leftTop {
background:url(117-images/leftTop.gif) no-repeat left top;
height:7px;
}
#leftBottom {
background:url(117-images/leftBottom.gif) no-repeat left top;
height:8px;
}
#leftCenter {
background-color:#6b1f25;
}
#leftCenter h2 {
font-size:22px;
padding:5px 0 0 10px;
}
#leftCenter p {
margin:10px 9px 0 9px;
}
#leftCenter .pic1 {
float:right;
margin:0 0 10px 15px;
}
.rightTop {
background:url(117-images/rightTop.gif) no-repeat left top;
height:7px;
}
#rightCenter, #rightCenter2 {
background-color:#e0d4c6;
color:#60171d;
}
#rightCenter h2, #rightCenter2 h2 {
font-size:22px;
padding:5px 0 0 10px;
}
#rightCenter ul, #rightCenter2 ul {
padding:10px;}
#rightCenter2 li {
list-style:none;
padding:4px 0;
background:url(117-images/p2.jpg) no-repeat left 5px;
padding-left:17px;
}
#rightCenter li {
list-style:none;
padding:4px 0;
background:url(117-images/p.jpg) no-repeat left 5px;
padding-left:17px;
}
.rightBottom {
background:url(117-images/rightBottom.gif) no-repeat left top;
height:7px;
}
#footer {
background:url(117-images/footerBackground.jpg) no-repeat left top;
height:77px;
margin:10px 0;
text-align:center;
}
#footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 20px 0 0 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
#footer a, #leftCenter a {
color:#db989e;
}
.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;
}
#menuContainer {
background:url(117-images/menuBackground.jpg) no-repeat left top;
width:858px;
height:97px;
}
#navcontainer {
float:right;
padding:45px 10px 0 0;
}
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
color: White;
float: left;
width: 100%;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.2em 1em;
color: White;
text-decoration: none;
float: left;
font-size:18px;
}
#navcontainer ul li a:hover
{
background-color: #8b464c;
color: #fff;
}
#navcontainer #active a
{
background-color: #8b464c;
color: #fff;
}
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
#sidebar1 { width: 230px; }
</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 class="twoColFixLtHdr">
<div id="container">
<div id="header">
<div id="menuContainer">
<h1>vine grape</h1>
<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="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<div class="headerPic"><img src="117-images/headerPic.jpg" alt="" /></div>
<!-- end #header --></div>
<div id="sidebar1">
<div class="rightTop"></div>
<div id="rightCenter">
<div class="title2"><h2>Categories</h2></div>
<ul>
<li>Ipsum dolor sit amet</li>
<li>Nulla id magna </li>
<li>Duis tempor posuere</li>
<li>Dolor sit amet</li>
<li>Nulla id magna sed dolor</li>
<li>Duis tempor posuere</li>
<li>Suspendisse vel tellus</li>
<li>Ipsum dolor sit amet</li>
<li>Nulla id magna sed dolor</li>
</ul>
</div>
<div class="rightBottom"></div>
<br />
<div class="rightTop"></div>
<div id="rightCenter2">
<div class="title2"><h2>Good Sites</h2></div>
<ul>
<li>Ipsum dolor sit amet</li>
<li>Nulla id magna </li>
<li>Duis tempor posuere</li>
<li>Dolor sit amet</li>
<li>Nulla id magna sed dolor</li>
<li>Duis tempor posuere</li>
<li>Suspendisse vel tellus</li>
<li>Ipsum dolor sit amet</li>
</ul>
</div>
<div class="rightBottom"></div>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<div id="leftTop"></div>
<div id="leftCenter">
<div class="title"><h2>Welcome to our site</h2></div>
<p><img src="117-images/pic1.jpg" class="pic1" alt="" /><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.<br /><br />
<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><br /><br />
<div class="title"><h2>What does Flash Template mean?</h2></div>
<p><img src="117-images/pic2.jpg" class="pic1" alt="" />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>
</div>
<div id="leftBottom"></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" />
<div id="footer">
<p>vine grape Copyright >> 12 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> | Coded by <a href="http://www.freecsstemplate.net">Free Css Templates</a></p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Related examples in the same category