The #stripe was totally removed instead a .gif image will be used, this will be specified in the css. Here's the html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div id="container">
container <!--This title here is for visualization when loaded on
the browser you can remove it afterwards-->
<div id="mast"> <!-- div right here (#mast) will act as the container
for the #theTopLogo, #theLogo, #theHead -->
masthead
<div id="theTopLogo">Louisville, Ky the top Logo</div>
<div id="theLogo"> the Logo</div>
<div id="theHead">the Head</div>
</div>
<div id="theRightStripe">
the Right Stripe
<p>Content Here</p>
<p>Content Here</p>
<p>Content Here</p>
<p>Content Here</p>
<p>Content Here</p>
<p>Content Here</p>
<p>Content Here</p>
<p>Content Here</p>
<p>Content Here</p>
<p>Content Here</p>
<p>Content Here</p>
<p>Content Here</p>
<p>Content Here</p>
<br />
</div>
</div>
</body>
</html>
Here's the CSS:
body {
margin:0; padding:0;
/* the next 3 css rules are for the stripe image */
background-image:url(../images/stripe.gif);
background-repeat:repeat-x;
background-position: 0px 70px;
}
#container{
position:relative;
top:0px; /* you can remove this by default it's offset 0px from the top */
width:900px;
height:auto;
background-color:#d6ae84;
overflow:hidden;
margin:0 auto;
border:2px solid red; /*for visualization creates the outline
you can remove it */
}
#mast{
position:relative;
top:0px; /* default - can be remove if you want */
width:920px;
margin:0 auto;
border:1px solid blue; /* can remove it */
}
#theHead{
position:absolute; /* absolute instead of relative to close the gap
that the #theHead creates in the document flow*/
top:20px;
left:650px;
/* image goes here*/
background-image:url('images/leatherhead_head_b.gif');
width:250px;
height:265px;
margin:0px;
margin-left:5px; /* can remove it, lower or increase the margin
you decide how close you want #theHead to be
to the #theLogo */
border:1px solid orange; /*can remove it */
}
#theLogo{
position:relative;
top:0px; /*default - you can remove */
left:0px; /* default - you can remove */
/* your image goes here */
background-image:url('images/logo_c.gif');
width:650px;
height:220px;
border:1px solid red;
}
#theTopLogo{
position:relative;
top:0px; /*default - you can remove */
left:100px;
background-color:#b67444;
width:550px;
height:45px;
border:1px solid red; /* remove */
}
#theRightStripe{
position:relative;
top:0px; /* this is the default you can remove it */
left:656px;
background-color:#8c5931;
width:250px;
height:100%;
padding-bottom:15px;
border:1px dashed gray; /*can remove*/
}