Image centered design
<!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 059</title>
<style type='text/css'>
* {
margin:0;
padding:0;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background: #ffffff;
color: #526374;
}
img {
border:0;
}
#container {
width: 940px; /* 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 {
width:940px;
height:374px;
}
.headerTop {
height:92px;
}
.dietProfile {
padding:53px 0 0 70px;
}
.dietProfile span {
color:#8e9eae;
font-size:24px;
}
.start{
padding-top:2px;
}
input {
width:50px;
}
.nameProfile {
width:100px;
}
.fm {
width:20px;
}
.plans {
float:right;
margin:53px 300px 0 0;
text-align:left;
}
.plans span {
color:#ffffff;
font-size:24px;
}
.plans li {
list-style:none;
margin:10px 0;
}
.plans li a {
color:#ffffff;
background:url(059_-images/b.png) no-repeat left 8px;
text-decoration:none;
height:20px;
padding:11px 0 0 25px;
}
.plans li a:hover {
color:#ffffff;
background:url(059_-images/a.png) no-repeat left 8px;
padding:11px 0 0 25px;
text-decoration:none;
}
.logo {
float:left;
}
.headerBackground {
background:url(059_-images/headerPic.jpg) no-repeat left top;
height:282px;
}
#mainContent {
margin-bottom:20px;
}
#mainContent h1 {
color:#9acb2a;
font-size:24px;
}
#footer {
width:940px;
height:84px;
background:url(059_-images/footerBackground.jpg) no-repeat left top;
}
.ftt {
float:left;
}
.rss {
float:right;
}
.copyright {
text-align:center;
padding-top:25px;
}
.copyright a, #mainContent a {
color:#79b9f6;
font-size:12px;
font-weight:bold;
text-decoration:underline;
}
.copyright a:hover, #mainContent a {
color:#79b9f6;
font-size:12px;
font-weight:bold;
text-decoration:none;
}
.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*/
#mainMenu{
font-size:24px;
line-height:normal;
padding-top:25px;
float:right;
}
#mainMenu ul{
list-style-type: none;
margin:0;
padding:0;
margin-left:20px;
}
#mainMenu li{
display:inline;
margin:0;
padding:0;
}
#mainMenu a{
float:left;
background:url(059_-images/glowtab-left.jpg) no-repeat left top;
margin:0;
margin-left: 4px;
padding:0 0 0 15px;
text-decoration:none;
}
#mainMenu a span{
float:left;
display:block;
background:url(059_-images/glowtab.jpg) no-repeat right top;
padding: 7px 15px 6px 3px;
font-weight:bold;
color:#8e9eae;
height:30px;
}
#mainMenu a span {
float:none;
}
#mainMenu a:hover span {
color:#79b9f6;
}
#mainMenu #current a{
background-position:0 -43px;
}
#mainMenu #current a span{
background-position:100% -43px;
color:#79b9f6;
}
#mainMenu a:hover{
background-position:0% -43px;
}
#mainMenu a:hover span{
background-position:100% -43px;
}
/*end main menu*/
/* begin border corners*/
.t {background: #ffffff url(059_-images/dot.gif) 0 0 repeat-x;}
.b {background:url(059_-images/dot.gif) 0 100% repeat-x}
.l {background:url(059_-images/dot.gif) 0 0 repeat-y}
.r {background:url(059_-images/dot.gif) 100% 0 repeat-y}
.bl {background:url(059_-images/bl.gif) 0 100% no-repeat}
.br {background:url(059_-images/br.gif) 100% 100% no-repeat}
.tl {background:url(059_-images/tl.gif) 0 0 no-repeat}
.tr {background:url(059_-images/tr.gif) 100% 0 no-repeat; padding:10px 20px}
/* end border corners*/
.steps {
float:left;
width:217px;
margin:15px 9px;
}
.steps .step1, .steps .step2, .steps .step3, .steps .step4 {
font-size:24px;
color:#8e9eae;
vertical-align:middle;
padding-left:35px;
padding-top:2px;
margin-top:10px;
}
.steps .step1 {
background:url(059_-images/step1.jpg) no-repeat left top;
}
.steps .step2 {
background:url(059_-images/step2.jpg) no-repeat left top;
}
.steps .step3 {
background:url(059_-images/step3.jpg) no-repeat left top;
}
.steps .step4 {
background:url(059_-images/step4.jpg) no-repeat left top;
}
.steps p {
margin:10px 0;
}
.steps a {
background:url(059_-images/seeMorePic.jpg) no-repeat left top;
padding-left:20px;
padding-top:3px;
}
.steps a:hover {
background:url(059_-images/seeMorePicHover.jpg) no-repeat left top;
padding-left:20px;
padding-top:3px;
}
.steps img {
margin:10px 0;
}
</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>
<!-- begin #container -->
<div id="container">
<!-- begin #header -->
<div id="header">
<div class="headerTop">
<div class="logo"><a href=""><img src="059_-images/logo.jpg" alt="" /></a></div>
<div id="mainMenu">
<ul>
<li id="current"><a href="#"><span>HOME</span></a></li>
<li><a href="#"><span>DIETS</span></a></li>
<li><a href="#"><span>EXERCISE</span></a></li>
<li><a href="#"><span>CONTACT</span></a></li>
</ul>
</div>
</div>
<div class="headerBackground">
<div class="plans">
<span>Women's Plans</span>
<ul>
<li class="activePlan"><a href="#">Basic</a></li>
<li><a href="#">Silver</a></li>
<li><a href="#">Platinum</a></li>
<li><a href="#">Diabetic</a></li>
<li><a href="#">Vegaterian</a></li>
<li><a href="#">Vegans</a></li>
</ul>
</div>
<div class="dietProfile">
<span>Get you FREE DIET PROFILE!</span><br /><br />
Height:<input name="aa" type="text" value="" /> ft <input name="aa" type="text" value="" />in Weight:<input name="aa" type="text" value="" />lbs<br /><br />
Gender:<input name="aa" type="radio" value="bb" class="fm" />F <input name="aa" type="radio" value="bb" class="fm" />M Target Weight:<input name="aa" type="text" value="" /> lbs<br /><br />
First Name: <input name="aa" type="text" value="" class="nameProfile" /> Age:<input name="aa" type="text" value="" /> <br /><br />
Email: <input name="aa" type="text" value="" class="nameProfile" /> <a href="" class="srart"><img src="059_-images/startedbtn.jpg" alt="" /></a>
</div>
</div>
</div>
<!-- end #header -->
<!-- begin #mainContent -->
<div id="mainContent">
<h1>Welcome to our 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.<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>
<div class="steps">
<div class="t">
<div class="b">
<div class="l">
<div class="r">
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
<span class="step1">Diet step</span>
<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. Duis tempor posuere diam. </p>
<img src="059_-images/step1Pic.jpg" alt="" />
<a href="">see more...</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="steps">
<div class="t">
<div class="b">
<div class="l">
<div class="r">
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
<span class="step2">Diet step</span>
<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. Duis tempor posuere diam. </p>
<img src="059_-images/step2Pic.jpg" alt="" />
<a href="">see more...</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="steps">
<div class="t">
<div class="b">
<div class="l">
<div class="r">
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
<span class="step3">Diet step</span>
<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. Duis tempor posuere diam. </p>
<img src="059_-images/step3Pic.jpg" alt="" />
<a href="">see more...</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="steps">
<div class="t">
<div class="b">
<div class="l">
<div class="r">
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
<span class="step4">Diet step</span>
<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. Duis tempor posuere diam. </p>
<img src="059_-images/step4Pic.jpg" alt="" />
<a href="">see more...</a>
</div>
</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">
<div class="ftt"><a href="http://www.flash-templates-today.com"><img src="059_-images/ftt.jpg" alt="free flash templates" /></a></div>
<div class="rss"><a href="http://flash-templates-today.com/blog/?feed=rss2"><img src="059_-images/rss.jpg" alt="subscrite to our blog of free flash templates" /></a></div>
<div class="copyright">
Weight Loss Copyright 1 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" title="free flash templates">Free Flash Templates</a>
</div>
</div>
<!-- end #footer -->
</div>
<!-- end #container -->
</body>
</html>
Related examples in the same category