lily
<!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>
<title>Lily</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
body {
background-color: #FFE8A7;
font-family: Georgia, "Times New Roman", serif;
font-size: 12px;
color:#200;
}
a {
color:#600;
text-decoration: none;
font-weight:bold;
border: 0;
}
a:hover {
color:#900;
}
#container {
width: 800px;
margin: 0 auto;
background-color:#FFE8A7;
}
#header{
width: 800px;
height: 200px;
background: url(lily-images/header.jpg);
}
h1 {
text-align: right;
padding: 0 15px 0 0;
color: #300;
}
/*BEGIN NAVIGATION STYLING RIGHT HORIZONTAL*/
#menu {
width: 400px;
font-style:italic;
padding: 20px 0 0 363px;
display: inline-block;/*for IE5*/
clear:left;/*for IE5*/
}
.cssnav {
position: relative;
float:right;
margin: 0;
width: 80px;
height: 17px;
text-align: center
}
.cssnav a {
display: block;
width: 80px;
height: 17px;
float: right;
text-decoration: none;
}
/* END OF NAVIGATION */
/*BEGIN CONTENT*/
#content{
width: 800px;
background: url(lily-images/extender.jpg) repeat-y;
}
#contentflower{
width: 800px;
background:transparent url(lily-images/flower.gif) no-repeat;
min-height: 550px;
}
.contentleft{
width: 430px;
padding: 10px 5px 10px 40px;
}
.contentright{
width: 250px;
float: right;
padding: 0 32px 0 37px;
}
b {
color: #300;
font-size: 100%;
font-weight:800;
}
h2 {
color:#300;
font-size: 110%;
font-style:italic;
text-align:left
}
#footer{
clear: both;
width: 800px;
height: 120px;
background: url(lily-images/footer.jpg) no-repeat;
padding-top: 10px;
}
#footer p{
padding: 50px 0 30px 0;
text-align: center;
font-size: 85%;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<!--NAVIGATION START-->
<div id="menu">
<h1>My Site</h1>
<div class="cssnav"><a href="http://www.free-css.com/">Contact</a> </div>
<div class="cssnav"><a href="http://www.free-css.com/">Link3</a> </div>
<div class="cssnav"><a href="http://www.free-css.com/">Link2</a> </div>
<div class="cssnav"><a href="http://www.free-css.com/">About</a> </div>
<div class="cssnav"><a href="http://www.free-css.com/">Home</a> </div>
</div>
<!--Menu closed-->
<!--If you only need 3/4 links, just comment out any of the above cssnav divs-->
<!-- NAVIGATION END-->
</div>
<!--Header closed-->
<!--START CONTENT-->
<div id="content">
<div id="contentflower">
<!--CONTENT FOR RIGHT HAND COLUMN-->
<div class="contentright">
<h2>Header</h2>
<p><b>This is bold text.</b> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce dignissim auctor libero. In eget mi. Ut nulla.... <a href="http://www.free-css.com/">A link goes here</a> </p>
<p>Maecenas tempor. Morbi sapien diam, lacinia a, fermentum vitae, rhoncus vehicula, sapien. Nunc pede sem, egestas vel, auctor sagittis, imperdiet posuere, augue. Curabitur condimentum. Proin id mi.... <a href="http://www.free-css.com/">A link goes here</a> </p>
<p align="center"><img src="lily-images/flower.jpg" width="240" height="199" alt="" /></p>
<b>The image must not be wider than 240px but can be longer</b> </div>
<!--Content Right closed-->
<!--CONTENT FOR LEFT HAND COLUMN-->
<div class="contentleft">
<h2>Heading goes here </h2>
<p> Maecenas molestie ante sed velit dignissim pharetra. Etiam aliquam viverra sapien. Pellentesque pellentesque viverra ante. Vivamus nec nisi a augue fermentum blandit. Donec malesuada nonummy nisl. Nulla et leo. Sed sapien sem, blandit eget, fermentum at, ultrices at, metus. </p>
<h2>Another Heading goes here</h2>
<p>Fusce mattis facilisis nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce dignissim auctor libero. In eget mi. Ut nulla. Maecenas tempor. Morbi sapien diam, lacinia a, fermentum vitae, rhoncus vehicula, sapien. Nunc pede sem, egestas vel, auctor sagittis, imperdiet posuere, augue. Curabitur condimentum. Proin id mi. </p>
<h2>Another Heading goes here</h2>
<p>Quisque non augue dignissim massa hendrerit eleifend. Sed id ipsum sit amet sapien egestas ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent a enim sed justo vestibulum ultrices. Sed dictum, sapien at mollis ultrices, ante neque tristique arcu, non imperdiet libero purus tempor mi. Sed turpis. Nunc vitae libero vitae neque adipiscing commodo. </p>
<h2>Another Heading goes here</h2>
<p>Quisque non augue dignissim massa hendrerit eleifend. Sed id ipsum sit amet sapien egestas ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent a enim sed justo vestibulum ultrices. Sed dictum, sapien at mollis ultrices, ante neque tristique arcu, non imperdiet libero purus tempor mi. Sed turpis. Nunc vitae libero vitae neque adipiscing commodo. </p>
<h2>Another Heading goes here</h2>
<p>Quisque non augue dignissim massa hendrerit eleifend. Sed id ipsum sit amet sapien egestas ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent a enim sed justo vestibulum ultrices. Sed dictum, sapien at mollis ultrices, ante neque tristique arcu, non imperdiet libero purus tempor mi. Sed turpis. Nunc vitae libero vitae neque adipiscing commodo. </p>
<h2>Another Heading goes here</h2>
<p>Quisque non augue dignissim massa hendrerit eleifend. Sed id ipsum sit amet sapien egestas ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent a enim sed justo vestibulum ultrices. Sed dictum, sapien at mollis ultrices, ante neque tristique arcu, non imperdiet libero purus tempor mi. Sed turpis. Nunc vitae libero vitae neque adipiscing commodo. </p>
</div>
<!--Content Left closed-->
</div>
<!--Content Flower closed-->
</div>
<!--Content closed-->
<div id="footer">
<p>Name of your site goes here<br />
Design by Lynne ©2007 <a href="http://emasai.com">eMasai.com</a></p>
</div>
</div>
<!--Container closed-->
</body>
</html>
Related examples in the same category