femflex1
<!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>Fem Flex 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if IE]>
<style type="text/css">
body { width expression(document.body.clientWidth > 1003 ? "1003px" : "779px"); }
</style>
<![endif]-->
<style type='text/css'>
body {
min-width:779px;
max-width: 1003px;
margin:0;
padding:0;
font-family: Verdana, Arial, sans-serif;
color: #000;
font-size:90%;
background: #FFFDF6 url(femflex1-images/flower2.jpg) no-repeat 1% 94%;
}
/* Structure */
#header,#left,#content,#right,#footer {
overflow:hidden;
display:block
}
/* safari and opera need this */
#header,#footer {width:100%; margin:0}
#left,#content,#right {float:left}
#content {
width:57%;
margin:0% 0% 0% 24%;
display:inline;
font-size: 0.95em;
font-family: Verdana, Arial, sans-serif;
color: #333;
background-color: transparent;
min-height: 700px;
height:auto !important;
height: 700px;
padding-bottom: 10px;
border-right: 1px solid #F9F5DE;
border-left: 1px solid #F9F5DE;
}
#left {
width:22%;
margin-left:-81%;
display:inline;
background-color: transparent;
font-family: Verdana, Arial, sans-serif;
font-size: 0.85em;
}
#right {
width:18%;
background-color: transparent;
margin: 0 0 147px 0;
font-family: Verdana, Arial, sans-serif;
font-size: 0.85em;
}
#footer {clear:both; }
/* Link Styles */
a {
color: #BCB79A;
background-color: transparent;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #8B8D88;
background-color: transparent;
}
/* Other Styles */
#header {
height: 100px;
background: #8B8D88 url(femflex1-images/grad3.gif) repeat-x top left;
margin: 0 auto;
padding: 0;
}
#header h1 {
width: 100%;
height: 100px;
background: transparent url(femflex1-images/header.gif) no-repeat 0% 20%;
margin: 0 0 0 10px;
padding: 30px 0 0 90px;
color: #F9F5DE;
font-style: oblique;
font-size: 1.5em;
font-family: Verdana, Arial, sans-serif;
}
#footer {
background:#8B8D88 url(femflex1-images/grad4.gif) repeat-x top left;
margin: 0 auto;
height: 40px;
font-family: Verdana, Arial, sans-serif;
}
#footer a, #footer a:hover { color: #F9F5DE; text-decoration: underline; background-color: transparent; }
h1 {
color: #8B8D88;
font-size: 1.3em;
text-align: left;
margin: 0 10px 15px 10px;
padding: 15px 10px 1px 0;
background-color: transparent;
}
p {
padding: 5px 10px;
margin: 0;
line-height: 1.3em;
}
ul {
list-style-type:none;
margin:0;
padding-left: 10px;
}
ul li {
margin-left:10px;
padding-left: 20px;
line-height: 20px;
background:transparent url('femflex1-images/bullet2.gif') no-repeat 1% 50%;
}
#right h2 {
color: #8B8D88;
background-color: transparent;
font-size: 1.1em;
padding: 15px 10px 10px 10px;
margin: 0;
}
#right h3 {
color: #8B8D88;
background-color: transparent;
font-size: 1.1em;
padding: 10px 10px 10px 0;
margin-left: 10px;
}
#right p {
padding: 5px 10px;
margin: 0;
}
#left h2 {
color: #8B8D88;
background-color: transparent;
font-size: 1.1em;
padding: 15px 10px 10px 10px;
margin: 0;
}
#left h3 {
color: #333;
background-color: transparent;
font-size: 1.1em;
padding: 10px 10px 10px 0;
margin-left: 10px;
}
#left p {
padding: 5px 10px;
margin: 0;
}
#footer p {
padding: 5px;
font-size: 0.75em;
font-family: Verdana, Arial, sans-serif;
color: #F9F5DE;
background-color: transparent;
text-align: center;
}
blockquote {
background:transparent url(femflex1-images/quote.gif) no-repeat top left;
font-size:0.9em;
color:#333;
font-style:oblique;
margin:1em 1.5em;
padding:1em 2em;
}
/* Images */
img.centered {
display:block;
margin: 5px auto;
border:1px solid #F9F5DE;
padding:2px;
}
img.alignright {
float: right;
border:1px solid #F9F5DE;
margin:4px 0 3px 5px;
padding:2px;
}
img.alignleft {
float: left;
border:1px solid #F9F5DE;
margin:4px 7px 3px 5px;
padding:2px;
}
</style>
</head>
<body>
<div id="header">
<h1>Fem Flex 1</h1>
</div>
<div id="content">
<h1>Heading 1</h1>
<p>Main content starts here.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut dui ac lacus egestas vehicula. Quisque faucibus, risus id consequat porta, orci ligula condimentum mi, ac commodo leo libero eget tortor.</p>
<h1>List Style</h1>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<p><img src="femflex1-images/sample3.gif" alt="" class="alignleft" />Left-aligned image...some descriptive text...Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut dui ac lacus egestas vehicula. Quisque faucibus, risus id consequat porta, orci ligula condimentum mi, ac commodo leo libero eget tortor.</p>
<p style="clear:left"><img src="femflex1-images/sample3.gif" alt="" class="alignright" />Right-aligned image...some descriptive text...Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut dui ac lacus egestas vehicula. Quisque faucibus, risus id consequat porta, orci ligula condimentum mi, ac commodo leo libero eget tortor.</p>
<p>Blockquote:</p>
<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut dui ac lacus egestas vehicula. Quisque faucibus, risus id consequat porta, orci ligula condimentum mi, ac commodo leo libero eget tortor.</blockquote>
</div>
<div id="left">
<h2>Our Sponsors</h2>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Link 2</a></li>
<li><a href="http://www.free-css.com/">Link 3</a></li>
<li><a href="http://www.free-css.com/">Link 4</a></li>
<li><a href="http://www.free-css.com/">Link 5</a></li>
</ul>
<p>Some text or news here</p>
</div>
<div id="right">
<h2>Site Menu</h2>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Link 2</a></li>
<li><a href="http://www.free-css.com/">Link 3</a></li>
<li><a href="http://www.free-css.com/">Link 4</a></li>
<li><a href="http://www.free-css.com/">Link 5</a></li>
</ul>
<p>Some text or news here</p>
<p>A centered image:</p>
<img src="femflex1-images/sample3.gif" alt="" class="centered" /> </div>
<div id="footer">
<p>Copyright© 2006 Your Company. All Rights Reserved.<br />
| XHTML template by <a href="http://www.karenblundell.com">arwen54</a> | <a href="http://validator.w3.org/check?uri=referer">Valid XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/">Valid CSS</a> |</p>
</div>
</body>
</html>
Related examples in the same category