I have this simple little brochureware site that I am trying to put together the 'right' way with CSS and relative positioning, but it is not working for me. The site is at Very simple with one stylesheet. Not sure if it would be easier to post it here or for you to look at it online, so here is the apge:
AND THE STYLE SHEET:
I have spent too long looking at this, I don't see the problems with the style sheets.
Thanks for any help you can give me.
Willie
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>The Plumbers Pillow a product of AcheFreeman, Edmonds, WA</title>
<link type="text/css" href="includes/style2.css" rel="stylesheet" media="screen" />
</head>
<body>
<div id="container">
<div id="logo" class="clearfix"><img src="images/logo.png" width="216" height="245"></div>
<p>
<div id="testimonial" class="clearfix">
<p align="center">"The Plumbers Pillow ™ is ergonomically designed to
correctly support and stabilize the spinal vertebra and muscle structure while
working on the back. This support can help reduce and prevent neck and back
injuries."</p>
<p align="center">
Dr. Steve Sanderson, D.C.<p align="center">
<font size="2">Doctor of Chiropractic<br>
Seatac, Washington</font>
</div>
<div id="tbox" class="clearfix">Backbreaking work no longer means backbreaking
pain.</div>
<div id="bar"><img src="images/vbar.png" width="18" height="600"></div>
<div id="bluebox">The comfortable solution for awkward jobs</div>
<div id="beforeafter"><img src="images/beforeafterwide.png" width="353" height="190"></div>
<div id="lbox">The PLUMBER’S PILLOW™<br>
<ul>
<li>Fits over cabinet toekicks;</li>
<li>Folds to a compact 13x18x8 with an easy-to-carry handle;</li>
<li>Folds to a 36" length for full upper body support;</li>
<li>Separates into two pillows for versatility in different situations;</li>
<li>Is made of comfortable foam with a removable, washable, urethane coated
Cordura® cover.</li>
<li>Perfect for professional contractors and do-it-yourselfers</li>
<li><strong>Only $49.95</strong></li>
</ul>
</div>
<div id="footer">Copyright 2009 Achefreeman, All rights reserved</div>
</div>
</body>
</html>
AND THE STYLE SHEET:
Code:
/***CSS Document***/
div#container
{
margin: 0px auto;
width: 750px;
background-color:#F6F7F7;
}
div#logo
{
position:relative;
top:10px;
padding:15px;
}
div#logo #testimonial
{
top:20px;
background-color:#FFF5DD;
margin:5px 5px 5px 5px;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size:14px;
line-height:18px;
width:225px;
padding:10px;
}
div#logo #testimonial #tbox
{
top:25px;
background-color:#FFF5DD;
margin:5px 5px 5px 5px;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size:18px;
line-height:24px;
width:225px;
padding:10px;
text-align:center;
}
div#bar
{
left:255px;
top:-600px;
padding:15px;
}
div#bluebox
{
position:relative;
top:-1230px;
left:310px;
background-color:#00667D;
font-family: Arial, Helvetica, Verdana, sans-serif;
width:420px;
font-size:18pt;
font-style:italic;
font-weight:bold;
color:White;
text-align:center;
}
div#beforeafter
{
position:relative;
top:-1200px;
left:350px;
}
div#lbox
{
position:relative;
top:-1175px;
left:310px;
background-color:#FFF5DD;
margin:5px 5px 5px 5px;
width:400px;
}
div#footer
{
width:750px;
background-color:#00667D;
text-align:center;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size:small;
color:White;
}
.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
I have spent too long looking at this, I don't see the problems with the style sheets.
Thanks for any help you can give me.
Willie