purple_flower
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Purple Flower</title>
<style type='text/css'>
/* * * * browser equalization * * * */
* { border: 0; margin: 0; padding: 0; }
/* * * * general * * * */
body {
background: #fff url(images/bg.png) repeat;
font-family: sans-serif;
font-size: 100% !important;
font-size: 90%;
}
/* * * * links * * * */
a { color: #CC99CC; text-decoration: none; }
a:hover { color: #BC9CD5; }
/* * * * standard * * * */
h1,h2 {
color: #000;
font-family: Eurostile , sans-serif;
}
h1 {
font-size: 340%;
margin: 0 0 -0.2em 0.1em;
}
h2 {
font-size: 175%;
text-indent: 1em;
}
h3 {
border-bottom: 1px dashed #000;
font: normal small-caps 150% Garamond , serif;
margin-right: 156px;
text-align: right;
}
/* * * * header / wrap * * * */
#wrap {
width: 790px;
}
img {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
float: left;
margin-bottom: 0px;
}
#header {
background-color: #AB8BC2;
border: solid #000;
border-width: 0 1px 1px 1px;
height: 7.15em !important;
height: 6.95em; /* for turdy browsers */
width: 99% !important;
padding-right: 8px;
}
/* * * * navigation * * * */
#nav {
float: right;
margin: 0 -9px 0 5px;
}
#nav li {
list-style: none;
}
#nav li a {
background-color: #674780;
border: solid #000;
border-width: 0 0 1px 2px;
display: block;
line-height: 1.5em;
padding: 0 110px 0 2px;
}
#nav li a:hover {
background-color: #341450;
border-left-color: #550055;
}
/* * * * content * * * */
#content {
background-color: #8969A0;
border-right: 1px solid #000;
float: left;
width: 99%;
padding-right: 9px;
}
#content p {
font-size: 0.9em;
padding: 3px;
}
#content p#second {
margin-top: 20px;
}
/* * * * footer * * * */
#footer {
background-color: #674780;
border: 1px solid #000;
float: left;
font-size: 80%;
padding: 1px 8px 1px 0;
text-align: right;
width: 99%;
}
</style>
<style type="text/css" media="all">
@import url(purple_flower-stylesheets/style.css);
</style>
</head>
<body>
<div id="wrap">
<!-- begin wrap -->
<div id="header">
<img src="images/purple_flower.jpg" alt="Purple Flower" />
<h1> Purple Flower </h1>
<h2> Your slogan goes here </h2>
</div>
<div id="content">
<div id="nav">
<ul>
<li> <a href="#"> Link 1 </a> </li>
<li> <a href="#"> Link 2 </a> </li>
<li> <a href="#"> Link 3 </a> </li>
<li> <a href="#"> Link 4 </a> </li>
<li> <a href="#"> Link 5 </a> </li>
</ul>
</div>
<h3>Index</h3>
<p> Here we are, my second template. This is valid <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a>. It's also valid CSS and it works perfectly in Opera and Firefox. I can't seem to figure out why the images don't load in IE. They work in the other two major ones perfectly fine... This layout uses the font "Eurostile". If your computer does not have it installed. It will revert to a generic sans-serif font type. </p>
<p id="second"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed pellentesque tincidunt ante. Fusce fringilla dolor at nunc. Nullam sem erat, convallis et, lacinia eget, accumsan eu, sapien. Vivamus a nibh. Mauris id nunc nec nulla dignissim dictum. Nulla dignissim. Ut quam. Nulla nonummy augue eu justo. In tincidunt mollis enim. Cras cursus facilisis lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ultricies lorem non augue. Nullam hendrerit tempor lorem. Pellentesque pede urna, ornare in, varius eget, pretium non, orci. Donec mollis erat volutpat eros. </p>
</div>
<div id="footer"> © 2006 Your Site :: Site Design - <a href="http://adeontech.net/">Adeon Technologies</a> </div>
<!-- / end wrap -->
</div>
</body>
</html>
Related examples in the same category