I am getting closer. I have the columns set up with the float left. Just need to tweak it a little. However, the gray bar is now screwed up and when I contract the page the columns move.
CSS -
background-color: #A8A06C;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: left;
margin:0px 0px 0px 0px;
padding: 0px;
color: #333333;
}
.subnav {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
}
.subnav a:link {
color: #336600;
text-decoration: none;
}
.subnav a:visited {
color: #999999;
text-decoration: none;
}
.subnav a:hover {
color: #990000;
text-decoration: none;
}
.subnav a:active {
color: #666666;
text-decoration: none;
}
.redtext {
color: #FF0000;
}
#container {
width: 945px;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
background: #FFFFFF;
border: 2px solid #000000;
overflow: hidden;
}
#logo {
float:left;
width:100px;
height:132px;
margin-left: 65px;
display:inline;/IE6 margin bug/
background: url(/…/images/artlogo.gif) no-repeat;
}
#indextopimage {
float:right;
width:500px;
height:132px;
background: url(../images/topimgindex.jpg) no-repeat;
}
#navbg {
clear:both;
width: 945px;
height:24px;
background-image: url(…/images/redbar.gif);
background-repeat: repeat-x;
}
/* Sprite Setup /
ul.menu {
padding: 0 0 0 75px;
list-style: none;
}
.displace {
position: absolute;
left: -5000px;
}
ul.menu li {
float: left;
}
ul.menu li a {
display: block;
width: 100px;
height: 23px;
background: url(…/images/artformsprite.png);
}
/ * Normal Links /
ul.menu li.home a {
background-position: 0 0;
}
ul.menu li.plan a {
background-position: -100px 0;
}
ul.menu li.identify a {
background-position: -200px 0;
}
ul.menu li.stages a {
background-position: -300px 0;
}
ul.menu li.products a {
background-position: -400px 0;
}
ul.menu li.clientele a {
background-position: -500px 0;
}
ul.menu li.portfolio a {
background-position: -600px 0;
}
ul.menu li.contact a {
background-position: -700px 0;
}
/ * Hover Links /
ul.menu li.home a:hover {
background-position: 0 -23px;
}
ul.menu li.plan a:hover {
background-position: -100px -23px;
}
ul.menu li.identify a:hover {
background-position: -200px -23px;
}
ul.menu li.stages a:hover {
background-position: -300px -23px;
}
ul.menu li.products a:hover {
background-position: -400px -23px;
}
ul.menu li.clientele a:hover {
background-position: -500px -23px;
}
ul.menu li.portfolio a:hover {
background-position: -600px -23px;
}
ul.menu li.contact a:hover {
background-position: -700px -23px;
}
/ * Clicked Links /
ul.menu li.home a:active {
background-position: 0 -23px;
}
ul.menu li.plan a:active {
background-position: -100px -23px;
}
ul.menu li.identify a:active {
background-position: -200px -23px;
}
ul.menu li.stages a:active {
background-position: -300px -23px;
}
ul.menu li.products a:active {
background-position: -400px -23px;
}
ul.menu li.clientele a:active {
background-position: -500px -23px;
}
ul.menu li.portfolio a:active {
background-position: 6006px -23px;
}
ul.menu li.contact a:active {
background-position: -700px -23px;
}
/ * Selected/Active Links */
ul.menu li.home a.selected {
background-position: 0 -23px;
}
ul.menu li.plan a.selected {
background-position: -100px -23px;
}
ul.menu li.identify a.selected {
background-position: -200px -23px;
}
ul.menu li.stages a.selected {
background-position: -300px -23px;
}
ul.menu li.products a.selected {
background-position: -400px -23px;
}
ul.menu li.clientele a.selected {
background-position: -500px -23px;
}
ul.menu li.portfolio a.selected {
background-position: -600px -23px;
}
ul.menu li.contact a.selected {
background-position: -700px -23px;
}
#submenu {
width:300px;
left: 182px;
}
#shadowbar {
width:945px;
height:6px;
background-color: #FF0000;
background-image: url(…/images/shadowbar.gif);
background-repeat: repeat-x;
margin-top: 13px;
}
#left_content {
position: absolute;
width:200px;
float:left;
margin-top: 80px;
}
#center_content {
margin-left: 300px;
margin-right:200px;
margin-top: 80px;
float:left;
}
#right_content {
position: absolute;
right:250px;
width:200px;
float:left;
margin-top: 80px;
}
#shadowbar02 {
width:945px;
height:6px;
background-image: url(…/images/shadowbar.gif);
background:#FF0000;
}
#footer {
clear:both;
}
#footer p {
font-size: x-small;
text-align: center;
}
#subnavbox01 {
width:230px;
}
#subnavbox02 {
width:145px;
}
#subnavbox03 {
width:120px;
}
HTML -
<!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>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Artform Signs and Lighting</title>
<meta name=“keywords” content=“Signs, Lighting, Signage, Architecture, Design, Environment, Safety, Art, Denver, Colorado, SBE, DBE, Residential, Project, Budget” />
<meta name=“description” content=“Sign design and Sign Manufacturing” />
<link href=“css/artform.css” rel=“stylesheet” type=“text/css” />
</head>
<body>
<div id=“container”>
<div id=“logo”><img src=“images/artlogo.gif” width=“100” height=“130” alt=“artform logo” /></div>
<div id=“indextopimage”></div>
<div id=“navbg”>
<ul class=“menu”>
<li class=“home”><a href=“#” class=“selected” title=“Home”><span class=“displace”>Home</span></a></li>
<li class=“plan”><a href=“plan.html” title=“Home”><span class=“displace”>Planning</span></a></li>
<li class=“identify”><a href=“identify.html” title=“Identify”><span class=“displace”>Identify</span></a></li>
<li class=“stages”><a href=“stages.html” title=“Stages”><span class=“displace”>Stages</span></a></li>
<li class=“products”><a href=“products.html” title=“Products”><span class=“displace”>Products</span></a></li>
<li class=“clientele”><a href=“clientele.html” title=“Clientele”><span class=“displace”>Clientele</span></a></li>
<li class=“portfolio”><a href=“protfolio.html” title=“Portfolio”><span class=“displace”>Portfolio</span></a></li>
<li class=“contact”><a href=“contact.html” title=“Contact”><span class=“displace”>Contact</span></a></li>
</ul>
</div>
<div id=“shadowbar”></div>
<div id=“left_content”>
<p><img src=“images/image01.jpg” width=“133” height=“177” alt=“Artform Signs” /></p>
<p>Artform Signs is a Colorado WBE/SBE/DBE company.</p>
<br />
<p>We have supplied commercial and residential projects with award winning signage throughout the nation. </p>
<br />
</div>
<div id=“center_content”>
<p><img src=“images/image02.jpg” width=“177” height=“133” alt=“Artform Signs” /></p>
<p>Guided by the architecture, environment, and interiors we design fabricate and install interior and exterior property signage. We strive to achieve the highest level of visibility and style while providing our clients with a distinctive, enduring sign system…</p>
<br />
<p><img src=“images/1_steamboat_pl.jpg” width=“177” height=“133” alt=“Artform Signs” /> </p>
</div>
<div id=“right_content”>
<p> <img src=“images/website034.jpg” width=“177” height=“133” alt=“Artform Signs” /></p>
<br />
<p> <img src=“images/trailhead_lodge.jpg” width=“177” height=“133” alt=“Artform Signs” /></p>
</div>
<div id=“shadowbar02”><img src=“images/shadowbar.gif” width=“945” height=“6” alt=“shadow bar” /></div>
<div id=“footer”>
<p class=“subnav”>©2005-2010 Art Form Signs and Lighting</p>
<p class=“subnav”>Telephone 303-975-4641</p>
<p class=“subnav”><a href=“help.html”>Help</a> | <a href=“privacy.html”>Privacy Policy</a></p>
<br />
</div>
</div>
</body>
</html>
