Image on the left
<!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 056</title>
<style type='text/css'>
@charset "utf-8";
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background: #101415;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
color: #000000;
}
h1 {
color:#84be19;
}
#container {
width: 900px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
}
#header {
background: #DDDDDD;
width: 900px;
height: 316px;
}
#header .headerBackground {
width:900px;
height:270px;
background:url(056-images/headerBackground.jpg) no-repeat left top;
}
#header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 200px 40px 0 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
color:#FFFFFF;
text-align:right;
font-size:30px;
}
#sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 200px; /* 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 */
background: #ffffff; /* the background color will be displayed for the length of the content in the column, but no further */
margin:20px 40px 20px 0;
}
#sidebar1 a, #mainContent a {
color:#84be19;
font-weight: bold;
}
#mainContent {
margin: 20px 280px 20px 40px; /* the right margin on this div element creates the column down the right 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. */
}
.productPic {
float:left;
margin:0 20px 15px 0;
}
#footer {
height:90px;
background:url(056-images/footerBackground.jpg) repeat-x left top;
}
.rss {
float:right;
width:212px;
margin:16px 0 0 20px;
}
#footer p {
padding-top:28px;
margin:0 240px 0 0;
text-align:center;
}
.footerLink {
color:#292b25;
text-decoration:underline;
}
.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 {
margin:auto 0;
width:900px;
text-align:center;
}
#navcontainer ul {
padding: 0;
margin: auto 0;
background: url(056-images/menuBackground.gif) repeat-x left top;
float: left;
width: 100%;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
color: #626161;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
font-size:18px;
padding:11px 30px;
}
#navcontainer ul li a:hover {
background: url(056-images/menuBackgroundActive.gif) repeat-x left top;
color: #fff;
}
#navcontainer ul li #current {
background: url(056-images/menuBackgroundActive.gif) repeat-x left top;
color: #fff;
}
/*end main menu*/
/* begin border corners*/
.t {background: #ffffff url(056-images/dot.gif) 0 0 repeat-x;}
.b {background:url(056-images/dot.gif) 0 100% repeat-x}
.l {background:url(056-images/dot.gif) 0 0 repeat-y}
.r {background:url(056-images/dot.gif) 100% 0 repeat-y}
.bl {background:url(056-images/bl.gif) 0 100% no-repeat}
.br {background:url(056-images/br.gif) 100% 100% no-repeat}
.tl {background:url(056-images/tl.gif) 0 0 no-repeat}
.tr {background:url(056-images/tr.gif) 100% 0 no-repeat; padding:1px 20px}
/* end border corners*/
/* begin news border corners*/
.n_t {background: #eeeeee url(056-images/n_dot.gif) 0 0 repeat-x;}
.n_b {background:url(056-images/n_dot.gif) 0 100% repeat-x}
.n_l {background:url(056-images/n_dot.gif) 0 0 repeat-y}
.n_r {background:url(056-images/n_dot.gif) 100% 0 repeat-y}
.n_bl {background:url(056-images/n_bl.gif) 0 100% no-repeat}
.n_br {background:url(056-images/n_br.gif) 100% 100% no-repeat}
.n_tl {background:url(056-images/n_tl.gif) 0 0 no-repeat}
.n_tr {background:url(056-images/n_tr.gif) 100% 0 no-repeat; padding:1px 20px}
/* end news border corners*/
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
#sidebar1 { width: 220px; }
</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>
<!--This template was created by www.flash-templates-today.com
Flash-Templates-Today.com - Gives a possibility to obtain a ready free flash template, free css template and other kind of website template!-->
<body>
<!-- begin #container -->
<div id="container">
<!-- begin #header -->
<div id="header">
<div class="headerBackground"><h1>In the twilight of one's life</h1></div>
<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="#">BLOG</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<!-- end #header -->
<!-- begin #sidebar1 -->
<div id="sidebar1">
<div class="n_t">
<div class="n_b">
<div class="n_l">
<div class="n_r">
<div class="n_bl">
<div class="n_br">
<div class="n_tl">
<div class="n_tr">
<h1>NEWS</h1>
<p>
<b>August 2, 2009</b><br />
Duis tempor posuere diam. Suspendisse vel tellus quis nunc malesuada porta.<br />
<a href="">see more...</a>
</p>
<p>
<b>August 1, 2009</b><br />
Tempus Duis tempor posuere diam. Suspendisse quis nunc malesuada porta.<br />
<a href="">see more...</a>
</p>
<p>
<b>July 28, 2009</b><br />
Duis tempor posuere diam. Suspendisse vel tellus quis nunc malesuada porta.<br />
<a href="">see more...</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="t">
<div class="b">
<div class="l">
<div class="r">
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
<h1>MESSAGES</h1>
<p>
<b>August 2, 2009</b><br />
I have just found the best flash templates. I\'ve been surfing the in the past but could find the ones like yours. They they are simple with magnificent interface and most of all free with the credit your way.<br /><br />
This is incredible. I knew very little about website design and development. I\'m still learning through surfing and reading the webs tutorials on html and css and I\' still learning slowly. I hope I will have the time to learn more about developing Flash Websites from your site. I\'m quite new to all this so I\'m really enjoy learning about it.<br /><br />
By the way I\'m from Solomon islands in the South Pacific if you haven\'t seen it on the map. Its just a tiny dot. Anyway thanks a lot for your site. its been really helpful for me. I will certainly download one template when I\'m comfortable with web development.
Have great time<br />
Author: <b>Rolland Gito</b><br /><br />
<a href="http://flash-templates-today.com/testimonials.php">see all testimonials...</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end #sidebar1 -->
<!-- begin #mainContent -->
<div id="mainContent">
<div class="t">
<div class="b">
<div class="l">
<div class="r">
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
<h1>WELCOME TO HOME PAGE</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.<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 />
<b>For support please visit <a href="http://www.flash-templates-today.com/contact.php">http://www.flash-templates-today.com/contact.php</a></b>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="t">
<div class="b">
<div class="l">
<div class="r">
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
<h1>Our Free Products</h1>
<p>
<a href="http://www.flash-templates-today.com/ftt_templates/free-flash-templates-as3/0005"><img src="056-images/0005.jpg" alt="" class="productPic" /></a>
<b>Just try to find me</b><br /><br />Best animation, Best design, Best usability for you! Download and enjoy with our templates. You need just open .fla file and change images, content and sounds - and you will get absolutely unique exiting flash site. Please read <a href="http://flash-templates-today.com/testimonials.php">what other customers this about us</a>. Don't forgot write your meaning about our work on <a href="http://flash-templates-today.com/contact.php">testimonials page</a>;)<br /><br />
<a href="http://www.flash-templates-today.com/ftt_templates/free-flash-templates-as3/0005">Preview</a> | <a href="/cgi-bin/counters/unicounter.pl?name=fft_as3_0005&trackip=0&deliver=http://www.flash-templates-today.com/ftt_templates/free-flash-templates-as3/0005/0005.zip">Download</a>
</p><br />
<p>
<a href="http://www.flash-templates-today.com/ftt_templates/free-flash-templates-as3/0004"><img src="056-images/0004.jpg" alt="" class="productPic" /></a>
<b>Meeting Place</b><br /><br />Everyone who like exciting animation can use this template. You can absolutely free to download and change content images and music files. Use Flash CS4 program from <a href="http://www.adobe.com">adobe.com</a> Everyone who like exciting animation can use this template. You can absolutely free to download and change content images and music files. Use Flash CS4 program from <a href="http://www.adobe.com">adobe.com</a><br /><br />
<a href="http://www.flash-templates-today.com/ftt_templates/free-flash-templates-as3/0004">Preview</a> | <a href="/cgi-bin/counters/unicounter.pl?name=fft_as3_0004&trackip=0&deliver=http://www.flash-templates-today.com/ftt_templates/free-flash-templates-as3/0004/0004.zip">Download</a>
</p><br />
<p>
<a href="http://www.flash-templates-today.com/ftt_templates/free-flash-templates-as3/0003"><img src="056-images/0003.jpg" alt="" class="productPic" /></a>
<b>Skate Show</b><br /><br />Skate Show - flash template for extreme people! Very good animation and beauty design make this template unique and exciting. Skate Show - flash template for extreme people! Very good animation and beauty design make this template unique and exciting.<br /><br />
<a href="http://www.flash-templates-today.com/ftt_templates/free-flash-templates-as3/0003">Preview</a> | <a href="/cgi-bin/counters/unicounter.pl?name=fft_as3_0003&trackip=0&deliver=http://www.flash-templates-today.com/ftt_templates/free-flash-templates-as3/0003/0003.zip">Download</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end #mainContent -->
<!-- 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">
<a href="http://flash-templates-today.com/blog/?feed=rss2" class="rss"><img src="056-images/rss.jpg" alt="" /></a>
<p>
In the twilight of one's life Copyright 2 August 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 title="Free Flash Templates" href="http://www.flash-templates-today.com" class="footerLink">Free Flash Templates</a>
</p>
</div>
<!-- end #footer -->
</div>
<!-- end #container -->
</body>
</html>
Related examples in the same category