Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body, table {
margin: 0;
padding: 0;
font-size: 100%;
}
object, iframe, blockquote, fieldset, form, legend, table, caption, th, td {
margin: 0;
padding: 0;
border:none;
}
h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul { margin:0 0 .75em }
ol, ul { list-style: none; }
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align:top;
}
/* end reset styles */
body {
line-height:1.4;
font-size:88%;
}
#outer {
width:68em;
margin:auto;
background:f2f2f2;
padding:20px 0;
}
.logo, .logo span {
width:200px;/* width of logo*/
height:100px;/* height of logo */
margin:0;
position:relative;
overflow:hidden;
float:left;
}
.logo span {
position:absolute;
top:0;
left:0;
background:red url(restorelogo.jpg) no-repeat 0 0;/* red for testing only */
}
#nav {
padding:6px 0;
float:right;
}
#nav li { display:inline; }
#nav li a {
font-weight:bold;
background:#91E287;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
#nav li a, #nav li a:visited { color:#fff; }
#nav li a:hover, #nav li a:focus, #nav li a:active { background:#7A991A; }
#main {
clear:both;
overflow:hidden;
width:100%;
padding:10px 0 1px;
}
#sidebar {
float:left;
width:27em;
background:#eee;
}
#content {
width:40em;
float:right;
background:#eee;
}
.section {
border: 2px solid green;
padding:5px;
margin:0 2px 5px;
}
</style>
</head>
<body>
<div id="outer">
<h1 class="logo">Habitat for Humanity of Frederick County<br>
ReStore<span></span></h1>
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">Donate</a></li>
<li><a href="">Volunteer</a></li>
<li><a href="">Habitat for Humanity of Frederick County</a></li>
</ul>
<div id="main">
<div id="content">
<h2>Main content goes here</h2>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam mi, interdum eu sodales nec, viverra porttitor arcu. In consectetur sem quis neque convallis quis vestibulum dolor porttitor. Aliquam diam odio, dictum at venenatis sed, dignissim quis arcu. Sed lectus leo, luctus eu convallis a, sollicitudin ac leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam mi, interdum eu sodales nec, viverra porttitor arcu. In consectetur sem quis neque convallis quis vestibulum dolor porttitor. Aliquam diam odio, dictum at venenatis sed, dignissim quis arcu. Sed lectus leo, luctus eu convallis a, sollicitudin ac leo.</p>
</div>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam mi, interdum eu sodales nec, viverra porttitor arcu. In consectetur sem quis neque convallis quis vestibulum dolor porttitor. Aliquam diam odio, dictum at venenatis sed, dignissim quis arcu. Sed lectus leo, luctus eu convallis a, sollicitudin ac leo.</p>
</div>
</div>
<div id="sidebar">
<h3>Left Sidebar content goes here</h3>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam mi, interdum eu sodales nec, viverra porttitor arcu. In consectetur sem quis neque convallis quis vestibulum dolor porttitor. Aliquam diam odio, dictum at venenatis sed, dignissim quis arcu. Sed lectus leo, luctus eu convallis a, sollicitudin ac leo.</p>
</div>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam mi, interdum eu sodales nec, viverra porttitor arcu. In consectetur sem quis neque convallis quis vestibulum dolor porttitor. Aliquam diam odio, dictum at venenatis sed, dignissim quis arcu. Sed lectus leo, luctus eu convallis a, sollicitudin ac leo.</p>
</div>
</div>
</div>
</div>
</body>
</html>
You should take some time to read up on floats and positioning and general page layout otherwise you will keep running into a brick wall until you grasp how things can be laid out and how they interact with each other. It's a steep learning curve at first but don't give up and do some research and you will soon start getting the right idea. read through the in formation you were given in the other thread also.
Reply With Quote
Originally Posted by cboice8127
Bookmarks