Ok, here's a partial. I've been up since 3PM yesterday, so I need to head to bed. I was working on an image-free faux column for you, but I'll have to continue working on that (I removed the relevant CSS for now) when I wake up. The code here supercedes the previous HTML/CSS code.
HTML Code:
<!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" xml:lang="en" lang="en">
<head>
<title>Page Title Goes Here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="keywords" content="Keywords go here" />
<meta name="description" content="A description of this page goes here." />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
background: #FFF;
color: #000;
font: 100%/1.2 "Lucida Console", sans-serif;
}
#container {
margin-bottom: -3em;
min-height: 100%;
}
* html #container {
height: 100%; /* IE 5.x and 6 don't understand min-height, but instead treat height as min-height */
}
html>body #container {
height: auto; /* for modern browsers as IE 5 and 6 treats height as min-height anyway */
min-height: 100%; /* squashes an IE 7 bug */
}
h1 {
background: #69F;
color: #FFF;
height: 90px;
padding-top: 15px;
text-indent: 10px;
}
#sidebar {
background: #69F;
color: #FFF;
float: left;
padding-left: 0.25em;
width: 9.75em;
}
#sidebar ul {
list-style: none;
}
#sidebar li {
background: #69F;
border-top: 1px solid #9A9A9A;
color: inherit;
}
#sidebar a {
background: transparent;
color: #FFF;
}
#content {
margin-left: 10em;
}
#content .section {
margin-bottom: 0.5em;
padding-left: 1em;
}
#sample-form {
margin-top: 1em;
}
#sample-form fieldset {
border: 0;
padding-top: 1em;
}
.fieldset {
border: 1px solid #000;
margin-bottom: 1em;
padding: 0 0 0.5em 0.5em;
position: relative;
}
legend span {
background: #FFF;
color: #000;
font-weight: bold;
padding: 0 0.5em;
position: absolute;
top: -0.55em;
left: 0.5em;
}
* html legend span {
left: 0;
}
legend span em {
background: #FFF;
color: #F00;
}
#sample-form label {
margin: 0.25em 0 0.25em 0.5em;
}
.fieldset label {
clear: left;
float: left;
}
#delivery label {
width: 7em;
}
#radio label {
margin: 0;
width: 10em;
}
.fieldset input {
margin: 0.25em auto;
}
#radio input {
margin: 0 0.25em;
}
#sample-form label span {
background: #FFF;
color: #F00;
}
#clear-footer { /* needed to make room for the footer */
clear: both;
height: 3em;
}
#footer {
background: #FFF;
clear: both;
color: inherit;
height: 3em;
}
#footer p {
border-top: 1px solid #000;
padding-top: 1em;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<h1>Header Text</h1>
<div id="sidebar">
<p>Text here?</p>
<ul id="menu">
<li><a href="reports.aspx">Reports</a></li>
<li><a href="admin.aspx">Administration</a></li>
</ul>
</div>
<div id="content">
<div class="section">
<h2>Heading Text</h2>
<form action="#" id="sample-form" method="post">
<div id="delivery" class="fieldset">
<fieldset>
<legend><span>Delivery Details</span></legend>
<label for="name">Name<span>*</span></label>
<input type="text" id="name" size="30" /><br />
<label for="address1">Address 1</label>
<input type="text" id="address1" size="30" /><br />
<label for="address2">Address 2</label>
<input type="text" id="address2" size="30" /><br />
<label for="town-city">Town/City<span>*</span></label>
<input type="text" id="town-city" size="30" /><br />
<label for="county">County<span>*</span></label>
<input type="text" id="county" size="30" /><br />
<label for="postcode">Post Code<span>*</span></label>
<input type="text" id="postcode" size="30" /><br />
</fieldset>
</div>
<div id="radio" class="fieldset">
<fieldset>
<legend><span>Is this address also your invoice address?<em>*</em></span></legend>
<label for="yes"><input id="yes" name="invoice-address" type="radio" value="Yes" />Yes</label><br />
<label for="no"><input id="no" name="invoice-address" type="radio" value="No" />No</label>
</fieldset>
</div>
<div>
<input type="submit" class="submit" value="Submit Form" />
<input type="reset" class="reset" value="Clear Form" />
</div>
</form>
</div>
<div class="section">
<h2>Just a sample heading.</h2>
<p>
Just a sample paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat.
Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla
scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue
quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum.
Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo
tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam
ultricies tempor magna. Sed vel tellus. Etiam sagittis est sagittis odio. Etiam mollis mi ac lacus.
</p>
</div>
</div>
<div id="clear-footer"></div>
</div>
<div id="footer">
<p>© Copyright here</p>
</div>
</body>
</html>
Bookmarks