muzzle
<!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>Muzzle</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type='text/css'>
/* Joseph Spurling 2004 */
/* .............................. */
/* Basic layout */
/* .............................. */
body {
cursor: crosshair;
text-align: left;
width: 750px;
margin: auto;
margin-top: 10px;
font-family: Verdana,Arial,sans-serif;
font-size: 11px;
background-color: #737373;
}
html, body {min-height:100.1%}
#wrapper {
float: left;
width: 750px;
background-color: #666666;
border: 1px solid black;
margin-bottom: 50px;
}
/* .............................. */
/* Link stylings */
a {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
border: none;
padding: 0px;
}
/* .............................. */
/* Wrapper elements */
/* .............................. */
#logo {
width: 750px;
float: left;
clear: both;
}
#menu {
width: 750px;
float: left;
clear: both;
}
#content {
width: 505px;
float: left;
}
#sidebar {
width: 220px;
float: right;
clear: right;
}
#footer {
width: 750px;
float: left;
clear: both;
}
/* .............................. */
/* Logo */
#logo {
height: 100px;
background-color: #333333;
}
#logo h1 {
margin: 0;
padding: 0;
padding-left: 20px;
font-size: 5em;
color: #BBBBBB;
}
/* .............................. */
/* Horizontal Menu */
#menu {
border-top: 1px solid black;
border-bottom: 1px solid black;
margin-bottom: 10px;
width: 740px;
text-align: left;
background-color: #660000;
padding: 5px;
font-size: 13px;
}
#menu a {
color: #FFCC00;
background-color: #660000;
text-decoration: none;
}
#menu a:hover {
color: #BBBBBB;
}
/* .............................. */
/* Main Content */
#content a {
text-decoration: underline;
color: #EEE;
}
#content a:hover {
text-decoration: none;
}
#content h1 {
font-size: 12px;
padding:0;
margin:0;
padding-bottom: 5px;
color: #FFFFCC;
}
#content h2 {
font-size: 12px;
padding:0;
margin:0;
padding-bottom: 5px;
color: #aaa;
}
#content {
padding:0;
margin:0;
padding-left: 10px;
padding-right: 10px;
color: #EEE;
}
#content .header {
border: 1px solid #000;
padding:2px;
width: 505px;
margin:0;
margin-bottom: 10px;
float: right;
background-color: #333333;
color: #BBBBBB;
font-size: 12px;
}
#content .entry {
border-bottom: 1px solid #CCC;
border-top: 1px #FFF;
border-left: 1px #FFF;
border-right: 1px #FFF;
padding:10px;
margin:0;
padding-bottom: 10px;
margin-bottom: 10px;
}
#content img {
border: 0px solid black;
margin-left: 5px;
}
#content .icon {
width: 50px;
height: 50px;
background-color: #333333;
float: left;
margin-right: 10px;
}
/* .............................. */
/* Sidebar */
#sidebar
{
font-size: 11px;
}
#sidebar h1
{
font-size: 11px;
padding:0;
margin:0;
color: #BBBBBB;
}
#sidebar .sidebarbox
{
float: right;
width: 180px;
border: 1px solid black;
padding: 5px;
margin-bottom: 10px;
margin-right: 10px;
background-color: #CCCCCC;
}
#sidebar .header
{
float: right;
width: 184px;
border: 1px solid black;
border-bottom: none;
padding: 3px;
background-color: #333333;
margin-right: 10px;
}
/* .............................. */
/* Footer */
#footer {
width: 740px;
text-align: center;
padding: 5px;
line-height: 1.5em;
font-size: 0.8em;
color: #BBBBBB;
background-color: #333333;
border-top: 1px solid #000;
margin-bottom: 0px;
}
#footer a {
text-decoration: none;
color: #BBBBBB;
}
#footer a:hover {
text-decoration: underline;
border: none;
padding: 0px;
}
</style>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
</head>
<body>
<div id="wrapper">
<!--Title-->
<div id="logo">
<h1> .: Muzzle</h1>
</div>
<!--Menu-->
<div id="menu"> <a href="http://www.free-css.com/"> Home </a> <a href="http://www.free-css.com/"> Profiles </a> <a href="http://www.free-css.com/"> Media </a> <a href="http://www.free-css.com/"> Board </a> <a href="http://www.free-css.com/"> Links </a> <a href="http://www.free-css.com/"> Contact </a> </div>
<!--Content-->
<div id="content">
<div class="header"> <b> .: News</b> </div>
<div class="entry"> <img src="" class="icon" alt="" /> <br />
<h1>Muzzle</h1>
<h2>21 December 2004 - Joe[y]</h2>
<br />
<p><i>"Muzzle - n. 4. A restraint on free movement or expression"</i></p>
<p>The title of this design is ironic... go figure.</p>
<p>I suppose this design would be suitable for most sites but if you feel it still needs tuning to your particular choice I believe I have made the design very easy to edit, even with little <acronym title="HyperText Mark-up Language" lang="en">HTML</acronym> knowledge.</p>
</div>
<div class="entry"> <img src="" class="icon" alt="" />
<h1>Standards and Accesisibility</h1>
<h2>21 December 2004 - Joe[y]</h2>
<br />
<p>Muzzle is 100% compliant with XHTML 1.0 Strict and uses CSS (see footer of page).<br />
No tables have been used to layout elements and text.</p>
<p>Muzzle conforms to the WCAG double A rating and 508 guidelines for web content accessibility... although, this is not a major issue in a simple website.</p>
</div>
<div class="entry"> <img src="" class="icon" alt="" />
<h1>Stylesheets</h1>
<h2>21 December 2004 - Joe[y]</h2>
<br />
<p>Muzzle uses 2 external stylesheets rather than one, and no, the second is not an alternative layout - the second stylesheet is in fact a stylesheet designated for print media. The original CSS structure was taken from Oriel by <a href="http://www.free-css.com/">RJShade</a>. </p>
</div>
<div class="entry"> <img src="" class="icon" alt="" />
<h1>Compatability</h1>
<h2>21 December 2004 - Joe[y]</h2>
<br />
<p>Yes, the design is cross-browser compatible and I can confirm that the design renders identically in Gecko
(<a href="http://www.free-css.com/">Mozilla</a> <a href="http://www.free-css.com/">Firefox</a> 0.10.1), <a href="http://www.free-css.com/">Opera</a> (7.01) and even Internet Explorer (6.0)!</p>
</div>
</div>
<!--Sidebar-->
<div id="sidebar">
<div class="header">
<h1>Contact:</h1>
</div>
<div class="sidebarbox"> <a href="http://www.free-css.com/">JSpurling@gmail.com</a> </div>
<div class="header">
<h1>Syndicate:</h1>
</div>
<div class="sidebarbox"> <a href="http://www.free-css.com/">Mozilla Firefox</a><br />
<a href="http://www.free-css.com/">Mozilla Thunderbird</a><br />
<a href="http://www.free-css.com/">OSWD.org</a> </div>
<div class="header">
<h1>Shoutbox:</h1>
</div>
<div class="sidebarbox"> Perhaps implement a shoutbox here with php and mySQL...<br />
<br />
Try <a href="http://www.free-css.com/">PHP.net</a> for a simple php script. </div>
</div>
<!--Footer-->
<div id="footer">
<p>Validate: <a href="http://validator.w3.org/check?uri=referer">XHTML</a>/<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>/<a href="http://www.access-board.gov/508.htm">508</a> | <a href="http://www.free-css.com/">© Joseph Spurling 2004</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category