Fill left and right side of the content with image pattern
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- *****************************
** green lush css based layout **
** ---------------------------- **
** author: Yamazaki **
** this layout is free for **
** download, however you can't **
** redistribute it and put the **
** zip / rar file in your web **
** without any permissions from **
** the author. thank you **
** ---------------------------- **
** have fun with the layout **
****************************** -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Green Lush</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="green lush is a greeny layout with a valid XHTML 1.1 strict and CSS 2 specification" />
<meta name="keywords" content="layout, css layout, xhtml layout, css, xhtml, webstandards, free, free layout, free div layout" />
<meta name="author" content="Yamazaki" />
<style type='text/css'>
/* **************************** /*
** green lush css based layout **
** ---------------------------- **
** author: Yamazaki **
** this layout is free for **
** download, however you can't **
** redistribute it and put the **
** zip / rar file in your web **
** without any permissions from **
** the author. thank you **
** ---------------------------- **
** have fun with the layout **
/* **************************** */
body
{
font-size: 62.5%; /* reset 1EM to 10px */
margin: 0;
padding: 0;
background: transparent url('GREEN-LUSH-Images/bg.png') top left repeat;
font-family: 'lucida grande', arial, tahoma, sans-serif;
}
#container
{
margin: 0 auto;
width: 683px;
position: relative;
background: transparent url('GREEN-LUSH-Images/containerbg.png') top left repeat-y;
}
#header
{
margin: 0 auto;
width: 640px;
height: 96px;
background: transparent url('GREEN-LUSH-Images/header.jpg') top left no-repeat;
}
.headtitle
{
position: relative;
font-family: 'lucida grande', arial, tahoma, sans-serif;
font-size: 30px;
color: #FFF;
top: 8px;
left: 12px;
}
#menu
{
margin: 0 20px;
height: 29px;
background: #bbd75a !important;
background: #b3d24e;
padding: 5px 0;
}
#menu ul
{
margin: 0;
padding: 7px;
background: transparent url('GREEN-LUSH-Images/menuoff.png') top left repeat-x;
height: 29px;
}
#menu ul li
{
list-style: none;
display: inline;
}
#menu ul li a:link, #menu ul li a:active, #menu ul li a:visited
{
color: #767676;
padding: 13px 7px 15px 7px;
font-size: 1em;
background: transparent url('GREEN-LUSH-Images/menuoff.png') center left repeat-x;
font-family: 'lucida grande', arial, sans-serif;
font-weight: bold;
text-decoration: none;
}
#menu ul li a:hover
{
background: transparent url('GREEN-LUSH-Images/menuon.png') center left repeat-x;
color: #FDFDFD;
}
#roundedheader
{
width: 640px;
height: 18px;
margin: 0 auto;
background: transparent url('GREEN-LUSH-Images/belowheader.png') top left no-repeat;
}
#content
{
min-height: 390px;
width: 640px;
margin: 0 auto;
background: transparent url('GREEN-LUSH-Images/contentbg.png') top left repeat-y;
}
#insidecontent
{
float: left;
padding-left: 25px;
width: 355px;
}
#insidecontent p
{
margin: 0;
color: #767676;
font-family: 'lucida grande', 'franklin gothic medium', sans-serif;
font-size: 1.2em;
line-height: 170%;
}
#sidebar
{
padding: 0 10px 10px 10px;
float: right;
width: 210px;
background: #f6f6f6;
}
#sidebar p
{
margin: 0;
color: #565656;
font-family: 'lucida grande', 'franklin gothic medium', sans-serif;
font-size: 1em;
line-height: 170%;
}
#sidebar a:link, #sidebar a:active, #sidebar a:visited
{
text-decoration: underline;
color: #e36767;
}
#sidebar a:hover
{
text-decoration: none;
}
#roundedfooter
{
width: 640px;
height: 17px;
margin: 0 auto;
background: transparent url('GREEN-LUSH-Images/abovefooter.png') top left no-repeat;
}
h1
{
margin: 0;
font-weight: normal;
color: #d8f7af;
font-size: 3.2em;
}
h2
{
margin: 0;
display: inline;
position: relative;
top: -1.5em;
left: 2em;
font-size: 1.8em;
font-weight: normal;
color: #94c258;
}
h3
{
margin: 0;
font-size: 1.5em;
font-weight: normal;
color: #94C258;
}
#footer
{
margin: 0 auto;
width: 641px;
height: 39px;
background: transparent url('GREEN-LUSH-Images/footer.png') top left repeat-x;
}
#footer span
{
display: block;
position: relative;
font-family: 'lucida grande', 'franklin gothic medium', sans-serif;
font-size: 1.2em;
padding: 10px;
color: #565656;
}
</style>
</head>
<body>
<!-- YOU SHOULD TRY TO MAKE EVERY ELEMENTS INSIDE THE CONTAINER! NOT OUTSIDE THE CONTAINER -->
<div id="container">
<!-- HEADER -->
<div id="header"><div class="headtitle">GREEN LUSH</div></div>
<!-- END HEADER -->
<!-- MENU -->
<div id="menu">
<ul>
<li><a href="#" title="">HOME</a></li>
<li><a href="#" title="">ABOUT ME</a></li>
<li><a href="#" title="">MY WORKS</a></li>
<li><a href="#" title="">SERVICES</a></li>
<li><a href="#" title="">DOWNLOAD</a></li>
<li><a href="#" title="">CONTACT ME</a></li>
<li><a href="#" title="">QUICK MESSAGE</a></li>
<li><a href="#" title="">LINKS</a></li>
</ul>
</div>
<!-- END MENU -->
<!-- ROUNDED SHAPE BELOW HEADER -->
<div id="roundedheader"> </div>
<!-- START CONTENT -->
<div id="content">
<!-- LEFT DIV -->
<div id="insidecontent">
<h1>home</h1>
<h2>home</h2>
<h3>Welcome</h3>
<p>Welcome to the first release of Yamazaki's CSS based layout named the Green Lush.
This layout is a valid XHTML 1.1 Strict and CSS 2.<br />
In here, you can put your welcome message to your visitor, or directly
put your journal entries.<br />
I've made this layout as flexible as possible and you can modify it as you wish.<br />
But i assumed you already familliar with CSS and XHTML before you try to edit anything here.
Seriously, im not trying to scared you off, because one simple mistake will make the whole page
become a mess.<br />
And please please don't ask me how to edit this stuff. If you not familliar with CSS and XHTML,
i suggest you to search the internet, googling it. There are hell a lot of website that provide
a tutorial for CSS based layout.
<br /><br />
If you decided to use this layout, please, i ask you please do not remove the copyright at the bottom of
the page. It's not that i'm gonna hunt you down if you remove it but i guess i just need a small
appreciation from you guys. Thank you.
<br /><br />
Finally, this layout has been heavily tested under : Opera 8,9; Firefox 1.5 and Internet Explorer 6 SP1.
However if you found a bug(s), feel free to send me an email to angga_fuyuki at hotmail.com and
don't forget to inform me your browser version when you found the bug(s). I'll fix it ASAP
<br /><br />
Have fun<br />
Yamazaki</p>
</div>
<!-- END LEFT DIV -->
<!-- SIDEBAR -->
<div id="sidebar">
<h1>download</h1>
<h2>download</h2>
<h3>Download Green Lush</h3>
<p><a href="#example" title="download green lush">example link</a>
<br />
Broken link? Corrupted zip file? Send an email to <a href="#">angga_fuyuki@hotmail.com</a>
</p>
</div>
<!-- END SIDEBAR -->
<!--
CLEAR BOTH FLOAT. THIS IS IMPORTANT! IF YOU
REMOVE THIS LINE, YOU'LL END UP SCREWING THE
CONTENT AND THE SIDEBAR COLUMN
-->
<div style="clear: both;"></div>
<!-- END FLOAT CLEANER -->
</div>
<!-- END CONTENT -->
<!-- ROUNDED SHAPE ABOVE FOOTER -->
<div id="roundedfooter"> </div>
<!-- FOOTER -->
<div id="footer">
<span>XHTML 1.1 STRICT | CSS 2 | LAYOUT © YAMAZAKI |
<a href="http://www.ehostinfo.com/">Web Hosting</a></span>
</div>
<!--END FOOTER -->
</div>
</body>
</html>
Related examples in the same category