Page is a not externally linkable
- WebmasterWorld
-- Accessibility and Usability
---- The Bare Essentials

bedlam - 12:27 am on Mar 2, 2006 (gmt 0)


A starting point in case anyone wants to play. Rough and kind of rushed, but satisfies the criteria I think ;-)

<!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>Minima!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
padding:0;
margin:0;
}

body {
background:#efefef;
font-family:georgia,palatino,"times new roman",serif;
color:#003;
padding:0 5%;
}

h1 {
background:#e0e0e0;
color:#003;
font-weight:normal;
padding:1em .5em;
}

p {
width:81%;
float:left;
text-align:left;
padding:0 1%;
margin:0 2% .75em 0;
}

a { color:#009; }

address {
width:100%;
float:left;
font-size:85%;
text-align:center;
font-style:normal;
}

#main_navigation,
#footer_navigation {
background:#d0d0d0;
clear:both;
text-align:center;
padding:.5em 0;
margin-bottom:1em;
}

#main_navigation li,
#footer_navigation li {
display:inline;
padding:.25em .75em;
}

#secondary_navigation {
list-style-type:none;
width:15%;
float:right;
}

#secondary_navigation li a {
display:block;
text-align:right;
text-decoration:none;
font-weight:bold;
border:1px solid #e0e0e0;
padding:.25em;
}

#secondary_navigation li a:hover,
#secondary_navigation li a:active {
text-decoration:underline;
border:1px solid #777;
}

#footer_navigation {
float:left;
width:100%;
margin-top:2em;
}
</style>
</head>

<body>
<h1>Lorem ipsum dolor sit amet consectetur</h1>
<ul id="main_navigation">
<li><a href="#">Praesent lobortis</a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Suspendisse diam</a></li>
</ul>

<ul id="secondary_navigation">
<li><a href="#">Curabitur condimentum</a></li>
<li><a href="#">In convallis</a></li>
<li><a href="#">Vestibulum</a></li>
<li><a href="#">Morbi ornare</a></li>
<li><a href="#">Nam eleifend</a></li>
</ul>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse feugiat enim mollis nisi. Pellentesque auctor diam ut justo. In faucibus, orci nec condimentum venenatis, orci pede dignissim diam, sit amet rutrum mi nisi eget pede. Integer imperdiet, sapien molestie tristique iaculis, nisl arcu suscipit felis, nec aliquet orci dolor a neque.</p>

<p>Nam eleifend mi at lorem.</p>

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse nonummy orci in urna. Aenean tristique elit sed purus. Duis ultricies diam et neque auctor laoreet.</p>

<p>Curabitur condimentum mauris vitae ligula. Vestibulum dictum rutrum nulla. Etiam euismod libero eu erat. Nulla tellus velit, nonummy ut, tristique at, volutpat quis, nibh. Etiam pulvinar, augue vitae dignissim pretium, nisl augue gravida purus, id malesuada lectus mi quis mauris.</p>

<ul id="footer_navigation">
<li><a href="#">Nulla</a></li>
<li><a href="#">Vestibulum</a></li>
<li><a href="#">Phasellus</a></li>
</ul>

<address>
Pellentesque pretium lacus<br />
ornare lorem<br />
Vestibulum<br />
<a href="mailto:nascetur@dapibus.rem">nascetur@dapibus.rem</a>
</address>

</body>
</html>

-b

Thread source:: http://www.webmasterworld.com/accessibility_usability/35.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com