Hey,
Heres the website files: (just over 200kb)
http://www.megaupload.com/?d=S8X5BOQ0
Images/css/html so you can view exactly.
or Il provide css/html page and an explanation here.
Here is current homepage of site.
http://img812.imageshack.us/img812/4092/picb.png
That is homepage,
for all the other pages what I would like is to keep top menu, and keep the bottom section so it will look like this.
You can see where it had said 'your green business needs our green hosting' Id like that to carry on as far as the right hand side and get rid of the black box and also 'benefits of going green' area.
Id like it that I could write my text in a body or something so that it goes full length from left to right and all the way down.
http://img696.imageshack.us/img696/328/exmple.png
Heres the CSS
/* Handcoded by http://psdcssxhtml.com */
/* reset */
body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,blockquote,th,td{
margin:0;
padding:0;
}
fieldset,img{
border:0;
}
html{
height:100%;
margin-bottom:1px;
}
body{
position:relative;
}
:focus{
outline:hidden;
}
/* links */
a{
color:#282828;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
/* header elements */
h1, h2, h3, h4, h5, h6{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#282828;
line-height:100%;
}
h1{
font-size:28px;
}
h2{
font-size:23px;
}
h3{
font-size:18px;
}
h4{
font-size:15px;
}
h5{
font-size:14px;
}
h6{
font-size:11px;
}
/* page setup */
body{
background:#FFF url(../images/page_bg.png) 50% 0 repeat-x;
font-family:Arial, Helvetica, sans-serif;
line-height:140%;
color:#282828;
font-size:13px;
}
/* wrapper setup */
div.rapidxwpr{
margin:auto;
width:900px;
}
/* header */
div#header{
position:relative;
height:73px;
margin:0px 0px 15px 0px;
}
/* logo */
span#logo, img#logo{
position:absolute;
top:0px;
left:0px;
width:135px;
height:52px;
border:0;
}
/* main body setup */
div#middle{
width:auto;
margin:0px 0px 0px 0px;
clear:both;
border:#C6C6C6 1px solid;
padding:20px;
}
/* right column */
div#right{
width:277px;
padding:0px 0px 0px 18px;
float:right;
}
/* right column2 */
div#right2{
width:277px;
padding:0px 0px 0px 18px;
float:right;
}
* html div#right{
padding:0px 0px 0px 15px;
}
/* content column */
div#main{
width:auto;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
div#mainmiddle{
margin:0px 0px 0px 0px;
}
div#content{
width:auto;
}
/* footer */
div#footer{
width:auto;
padding:5px 0px 20px 0px;
clear:both;
color:#fff;
}
/* clearing & floating */
.clearingfix:after{
content:".";
display:block;
line-height:0px;
clear:both;
visibility:hidden;
}
.clearingfix{
display:block;
}
.floatbox{
overflow:hidden;
}
/* alignments */
.alignleft{
float:left;
margin:0 20px 0 0;
}
.alignright{
float:right;
margin:0 0 0 20px;
}
/* topmenu */
div#topmenu{
position:absolute;
top:46px;
right:0px;
height:27px;
}
div#topmenu ul{
padding:0px;
margin:0px;
list-style:none;
float:left;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}
div#topmenu li{
float:left;
display:block;
margin:0 0 0 6px;
}
div#topmenu li a{
float:left;
display:block;
position:relative;
background:transparent url(../images/menu-r.png) 100% 0 no-repeat;
height:27px;
padding:0 5px 0 0;
overflow:hidden;
color:#202020;
text-decoration:none;
text-transform:uppercase;
font-size:13px;
font-weight:bold;
line-height:27px;
}
div#topmenu li a span{
display:block;
background:url(../images/menu-l.png) 0 0 no-repeat;
padding:0 10px 0 15px;
}
div#topmenu li a.active, div#topmenu li a:hover{
background:url(../images/menu-r.png) 100% -28px no-repeat;
text-decoration:none;
}
div#topmenu li a.active span, div#topmenu li a:hover span{
background:url(../images/menu-l.png) 0 -28px no-repeat;
}
/* main image */
div.main-image{
margin:0 0 20px 0;
}
/* welcome */
div.welcome{
background:url(../images/green-hosting.jpg) 100% 0 no-repeat;
padding:0 220px 10px 0;
margin:0 0 10px 0;
}
/* welcome2 */
div.welcome{
padding:0 320px 10px 0;
margin:0 0 10px 0;
}
div.welcome h1, div.welcome h2{
font-weight:normal;
text-transform:uppercase;
margin:0;
}
div.welcome h1 span, div.welcome h2 span{
color:#3d821c;
}
/* benefits box */
div.benefits{
background:url(../images/benefits-top.jpg) 0 0 no-repeat;
padding:15px 0 0 0;
}
div.benefits-bg{
background:url(../images/benefits-bg.jpg) 0 100% no-repeat;
padding:0 13px 15px 13px;
}
div.benefits h3{
text-transform:uppercase;
font-weight:normal;
margin:0 0 20px 0;
}
div.benefits ul{
list-style:none;
margin:5px 10px;
}
div.benefits ul li{
background:url(../images/icon-leaf.png) 7px 50% no-repeat;
padding:10px 0 8px 33px;
border-bottom:#d4d3d3 1px solid;
}
div.benefits ul li a{
font-size:17px;
color:#282828;
}
/* signup */
a.signup{
background:url(../images/signup-bg.png) 0 0 no-repeat;
color:#FFF;
width:55px;
display:block;
padding:0px 10px;
line-height:16px;
height:18px;
margin:10px 0 0 0;
float:right;
}
/* features box */
div.box{
background:url(../images/box-top.jpg) 0 0 no-repeat;
padding:10px 0 0 0;
}
div.box-bg{
background:url(../images/box-bg.jpg) 0 100% no-repeat;
padding:0 10px 10px 10px;
}
/* features */
ul.features{
list-style:none;
}
ul.features li{
float:left;
width:240px;
margin:10px 15px;
height:60px;
}
* html ul.features li{
margin:10px 10px;
}
ul.features li img.features-icon{
float:left;
width:50px;
}
ul.features li div.details{
float:right;
width:180px;
}
ul.features li div.details h4{
margin:0;
}
/* footermenu */
ul.footermenu{
list-style:none;
margin:0 0 0 10px;
}
ul.footermenu li{
float:left;
margin:0 0 0 15px;
}
ul.footermenu a{
font-size:12px;
color:#747474;
text-transform:uppercase;
}
/* credits */
div.credits{
float:right;
margin:0 25px 0 0;
}
div.credits a{
font-size:12px;
color:#747474;
}
Heres the html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Green Website Hosting Company</title>
<meta name="robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="RapidxHTML" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]><link href="css/iehacks.css" rel="stylesheet" type="text/css" /><![endif]-->
<script type="text/javascript" src="js/jquery.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="js/ie6pngfix.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('img, ul, ol, li, div, p, a, h1, h2, h3, h4, h5, h6');
</script>
<![endif]-->
</head>
<body>
<!-- wrapper -->
<div class="rapidxwpr floatholder">
<!-- header -->
<div id="header">
<!-- logo -->
<a href="index.html"><img id="logo" class="correct-png" src="images/logo.png" alt="Home" title="Home" /></a>
<!-- / logo -->
<!-- topmenu -->
<div id="topmenu">
<ul>
<li><a href="" class="active"><span>Home</span></a></li>
<li><a href=""><span>Services</span></a></li>
<li><a href=""><span>Company</span></a></li>
<li><a href=""><span>About us</span></a></li>
<li><a href=""><span>Contact</span></a></li>
</ul>
</div>
<!-- / topmenu -->
</div>
<!-- / header -->
<!-- main body -->
<div id="middle">
<!-- main image -->
<div class="main-image">
<img src="images/main-image.jpg" alt="Image" />
</div>
<!-- / main image -->
<div id="main" class="clearingfix">
<div id="mainmiddle" class="floatbox">
<!-- right column -->
<div id="right" class="clearingfix">
<!-- benefits box -->
<div class="benefits">
<div class="benefits-bg clearingfix">
<h3>BENEFITS OF GOING GREEN</h3>
<ul>
<li><a href="">Stats Tracker</a></li>
<li><a href="">10GB to 120GB Storage</a></li>
<li><a href="">1TB to 3TB Bandwidth</a></li>
<li><a href="">PHP5, MySQL</a></li>
<li><a href="">Satisfaction Guaranteed</a></li>
<li><a href="">2GB Dedicated RAM</a></li>
</ul>
<a href="" class="signup">sign up</a>
</div>
</div>
<!-- / benefits box -->
</div>
<!-- / right column -->
<!-- content column -->
<div id="content" class="clearingfix">
<div class="floatbox">
<!-- welcome -->
<div class="welcome">
<h1>YOUR <span>GREEN</span> BUSINESS</h1>
<h2>NEEDS OUR <span>GREEN</span> HOSTING</h2>
<p><a href="http://studio7designs.com">Green Hosting</a> is your best choice when you need environmentally consious <a href="http://arbutusphotography.com">business</a> and hosting services. We love to work with businesses with a concience. Your intro text will go here, giving a brief overview.</p>
</div>
<!-- / welcome -->
<!-- features -->
<div class="box">
<div class="box-bg">
<ul class="features clearingfix">
<li>
<img src="images/icon01.png" alt="Image" class="features-icon" />
<div class="details">
<h4>Everything You Need</h4>
<a href="http://ecoki.com">Green </a>Hosting is your best choice when you need hosting. </div>
</li>
<li>
<img src="images/icon02.png" alt="Image" class="features-icon" />
<div class="details">
<h4>Green Hosting</h4>
Green Hosting is your best choice when you need hosting.
</div>
</li>
<li>
<img src="images/icon03.png" alt="Image" class="features-icon" />
<div class="details">
<h4>Using The Sun</h4>
Green Hosting is your best choice when you need hosting.
</div>
</li>
<li>
<img src="images/icon04.png" alt="Image" class="features-icon" />
<div class="details">
<h4>Reseller Plans</h4>
Green Hosting is your best choice when you need hosting.
</div>
</li>
</ul>
</div>
</div>
<!-- / features -->
</div>
</div>
<!-- / content column -->
</div>
</div>
</div>
<!-- / main body -->
</div>
<!-- / wrapper -->
<!-- footer -->
<div class="rapidxwpr floatholder">
<div id="footer" class="clearingfix">
<!-- footermenu -->
<ul class="footermenu">
<li><a href="">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="">About us</a></li>
<li><a href="">Contact</a></li>
</ul>
<!-- / footermenu -->
<!-- credits -->
<div class="credits">
<a href="http://studio7designs.com/branding">Designed by STUDIO7DESIGNS</a>
</div>
<!-- / credits -->
</div>
</div>
<!-- / footer -->
</body>
</html>