You really just need to study this code. Check out how I groupped the HTML (such as the D elements) and look at the header.
Look at the CSS associated wtih each section. Break it down. Floating is the best way to structure a page. This isn't as good as the code can get, however this is an excellent attempt to get you started on your way 
.
Good luck.
Edit-Should attach code..
Code:
<!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>Untitled Document</title>
<style type="text/css">
body {
background-image:url(ReStoreMain.jpg);
max-width: 100%;
max-heght:100%;
background-attachment:fixed;
line-height:1.4;
font-size:88%;
}
#wrapper
{
width:81%;
margin:0 auto;
overflow:hidden;
}
#header
{
overflow:hidden;
margin-bottom:5px;
}
#logo {
height:180px;
width:361px;
float:left;
}
#add {
width:300px;
float:right;
color:#090;
font-family:"Minion Pro", sans-serif;
text-align:right;
}
ul {
list-style-type:none;
padding:4px;
overflow:hidden;
margin:0;
clear:right;
float:right;
}
li
{
float:left;
}
a:link,a:visited
{
display:inline;
width:150px;
font-weight:bold;
color:#FFFFFF;
background-color:#91E287;
border:1px solid white;
text-align:center;
padding:8px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#74C9E4;
}
#d1 {
width:560px;
height:370px;
background-color: #FFF;
border: 2px solid #74C9E4;
padding:5px;
}
div#d2 {
width:410px;
height:505px; background-color:#FFF;
border: 2px solid #74C9E4;
padding:5px;
}
div#d3 {
width:560px;
height:565px; background-color:#FFF;
border: 2px solid #74C9E4;
padding:5px;
}
div#d4 {
width:410px;
height:430px; background-color:#FFF;
border: 2px solid #74C9E4;
padding:5px;
}
.sidebar
{
float:left;
width:574px;
}
.content
{
float:left;
width:424px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"> <img src="restorelogo.jpg" width="361" height="168" /></div>
<div id="add"><h2>622 North Market Street<br />Frederick, MD 21701<br />
(301)-662-2988<br /> erestore@frederickhabitat.org</h2></div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Shop</a></li>
<li><a href="#contact">Donate</a></li>
<li><a href="#about">News</a></li>
<li><a href="Habitat">Habitat for Humanity of Frederick County</a></li>
</ul>
</div>
<div class="sidebar">
<div id="d1"><h1 style="font-size:45px;font-family:'Minion Pro SmBd', 'Minion Pro Med', 'Minion
Pro';color:#0C3;"><center>Don't Dump it, Donate it!</center>
</h1>
<p style="font-size:18px;">Habitat ReStore is a home improvement center that sells new and still
usable goods to the public at a fraction of retail cost. </p>
<p style="font-size:18px;">Your decision to donate to or shop at Habitat ReStore impacts the
Frederick community in a tremendous way. You not only become part of the solution to keep
resusable materials out of Frederick County landfills, but you also help local families in need
of affoardable housing as money raised at Habitat ReStore directly supports Habitat for Humanity
of Frederick County's mission to <em>bring people together to build homes, communities and
hope.</em></p>
</div>
<div id="d3"><a href="http://www.diggerslist.com/frederickrestore"
class="diggerslist-listingsbox" data-height="580" data-title="Just In at ReStore!!"
data-width="560"></a><script type="text/javascript"
src="http://www.diggerslist.com/js/widgets.js"></script></div>
</div>
<div class="content">
<div id="d2"><iframe
src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Habitat-for-
Humanity-of-Frederick-Co-ReStore/285362990195&width=407&height=497&colorscheme=light
&show_faces=true&border_color&stream=true&header=true&appId=306388216066339"
scrolling="yes" frameborder="0" style="border:none; overflow:hidden; width:407px; height:497px;"
allowTransparency="true"></iframe></div>
<div id="d4">
<h3 align="center">Have questions about donating? Email us!</h3>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td><iframe width="400" height="370" frameborder="0"
src="http://www.foxyform.com/form.php?id=209311&sec_hash=0ae9442063e"></iframe></td></tr><tr><td
align="center"></td></tr></table>
</p>
</div>
</div>
</div>
</body>
</html>
). Any suggestions on how(and also why) I could change the absolute positioning? Thanks!
Reply With Quote
Originally Posted by cboice8127
Bookmarks