rehabilitation
<!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" lang="en" xml:lang="en">
<head>
<title>1992 - rehabilitation</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type='text/css'>
/* main elements */
html, body {
background: url('rehabilitation-media/bg.gif') repeat;
font: 11px "Arial", Lucida Grande, Verdana, Sans-Serif;
margin: 0;
padding: 0;
}
/* wrapper */
#container {
background: #fff;
width: 725px;
margin: 0px auto;
}
/* banner */
#banner {
background: url('rehabilitation-media/grass.jpg') top left no-repeat;
height: 100px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 4px solid #ccc;
}
/* right */
#content {
float: right;
background: #fff;
width: 525px;
border-bottom: 2px solid #ccc;
margin: 0;
padding: 5px;
}
/* bottom box */
.bottom {
float: right;
background: #fff;
border: 1px solid #ccc;
width: 250px;
margin: 10px 5px 5px 0px;
padding: 5px;
}
/* left */
#leftbar {
float: left;
width: 175px;
margin: 3px;
padding: 0;
}
/* news box / whatever */
#box {
border: 1px dotted #ccc;
background: #eee;
width: 160px;
padding: 7px 5px 7px 5px;
margin: 3px 0px 5px 3px;
}
/* footer */
#footer {
background: #ddd url('rehabilitation-media/footerbg.jpg') no-repeat;
clear: both;
border-top: 2px solid #ccc;
color: #000;
margin: 5px 0px 0px 0px;
padding: 10px 0px 10px 0px;
text-align: center;
}
/* secondary elements */
#banner h1 { font-size: 45px; color: #fff; margin: 0; padding: 0px 0px 0px 5px; letter-spacing: -0.12cm; }
.bannertag { color: #fff; float: right; margin: 5px 15px 0px 0px; }
#content h2 { font-size: 1.3em; margin: 0; padding: 0px 0px 0px 17px; color: #9c3; background: url('rehabilitation-media/article.jpg') top left no-repeat; height: 16px; }
#content p { margin: 0px 0px 10px 0px; }
#leftbar ul { margin: 5px 0px 10px 0px; padding: 0; border-top: 1px solid #ccc; } #leftbar li { margin: 0; padding: 5px 0px 5px 0px; list-style: none; border-bottom: 1px solid #ccc; text-align: center; }
#leftbar a { color: #9c3; display: block; text-decoration: none; } #leftbar a:hover { text-decoration: underline; } #box p { margin: 0; }
#content a { color: #9c3; } .bottom a { color: #9c3; }
.title { font-size: 1.2em; margin:0px 0px 7px 0px; padding: 0px 0px 0px 20px; color: #9c3; background: url('rehabilitation-media/bomb.jpg') top left no-repeat; height: 16px; } .bottom p { margin: 0px 0px 5px 0px; }
acronym { color: #9c3; }
.detail { color: #9c3; font-variant: small-caps; padding: 2px; }
#footer a { color: #aaa; text-decoration: none; } #footer a:hover { text-decoration: underline; }
* html #footer { padding: 4px 0px 10px 0px; }
</style>
</head>
<body>
<div id="container">
<div id="banner">
<span class="bannertag">
<b><i>You could insert some kind of witty/cheeky quote here.</i></b>
</span>
<h1>rehabilitation</h1>
</div>
<div id="leftbar">
<ul>
<li><a href="/">home</a></li>
<li><a href="/">about</a></li>
<li><a href="/">articles</a></li>
<li><a href="/">message boards</a></li>
</ul>
<div id="box">
<p>You could put news here, or anything else you would like. It would be fun, I say! <b>FUN!</b> You could put news here, or anything else you would like. It would be fun, I say! <b>FUN!</b></p>
</div>
</div>
<div id="content">
<h2>Welcome to 1992 - rehabilitation</h2>
<span class="detail">By: <your name here> | On: date</span>
<p>
This is my first design I have submitted to OSWD. It is customizable and should validate as valid HTML and CSS. If you have any problems with this design, please e-mail me at <a href="mailto:buyable@gmail.com" title="My e-mail.">buyable@gmail.com</a>. Thank you! (You may customize this as you wish, I just ask you leave some sort of credit to me, but how you do it is up to you. Have fun with this design! :))
</p>
<h2>About the design</h2>
<span class="detail">By: <your name here> | On: date</span>
<p>
This design is about 725 px wide, validated <acronym title="Hypertext Markup Language">XHTML</acronym> 1.0, and validated <acronym title="Cascading Style Sheets">Cascading Style Sheets</acronym>. It is called "1992 - rehabilitation" for no reason in particular. It is easy to customize, and can be integrated into a CMS easily with a program. Known issues in this design: if a #content h2 (title of an article) spans for more than one line, it overlaps with the .detail text ("Posted by, etc"). If you know to fix this, please message me on AIM or e-mail me at <a href="mailto:buyabl@gmail.com">buyable@gmail.com</a>. If you would like, you can message me on AIM at "buyable" for questions/comments.
</p>
</div>
<span class="bottom">
<span class="title">Put something else here.</span><br />
This is a design I made especially for OSWD. I was extremely bored, and decided to make this my first. You may customize this as you wish, I just ask you leave some sort of credit to me, but how you do it is up to you. Have fun with this design! :)
</span>
<span class="bottom">
<span class="title">Put something here.</span><br />
This is a design I made especially for OSWD. I was extremely bored, and decided to make this my first. You may customize this as you wish, I just ask you leave some sort of credit to me, but how you do it is up to you. Have fun with this design! :)
</span>
<div id="footer">
© 2005 <your name here> // Designed by: Renato Maguire // <a href="http://validator.w3.org/check?uri=referer" title="Valid (X)HTML 1.0!">Valid HTML</a> // <a href="http://jigsaw.w3.org/css-validator/" title="Valid Cascading Style Sheets!">Valid CSS</a>
</div>
</div>
</body>
</html>
Related examples in the same category