CB profile Options

[*ersatz*]

Sooo on my CB profile, my main image is on top of everything. The reason you can see my comments is cause I resorted to making the image a gif and cut out the part where the comments are. You'll realize you can't click any of the links where the image would otherwise be. I want this to not happen, so I can put more divs in there and have more than just my comments, but I don't know how. Does anyone have any tips that can help me? You can just view my source if you want to see the code.

[*ersatz*]

Header

CODE

<style>
body{
background-image: url("http://img53.imageshack.us/img53/307/imgrepeatsf4.jpg");
background-repeat: repeat-y;
background-attachment: fixed;
background-color: #28303d;
}

h1, h2, h3 {color:#a9a160; background-color:transparent; font: 20px futura; font-weight: strong;}

body,table, td, li, p, div, textarea  
{font:normal 11px georgia; text-transform: none; letter-spacing: 1px; color: #000000;}
.innerbox{background-color: #FFFFFF; color:#000000;}
a, a:link, a:active, a:visited{font:normal 8px verdana; color: #000000; text-transform: uppercase; letter-spacing: 0px; font-weight:bold; text-decoration: none;}

a:hover{font:normal 8px verdana; color:#a9a160; text-transform: uppercase;letter-spacing: 0px; font-weight:bold; border-bottom: 2px solid #28303d;}

.comment_body a:link, .comment_body a:active {color: #28303d;}
.comment_body a:hover {color: #a9a160;}
.comment_body a:visited {color: #28303d;}

#profile div#bestfriends {display:none;}
#profile div#aboutme {display:none;}
#profile div#contactme {display:none;}
#profile div#recententries {display:none;}
#profile div#recentphotos{display:none;}
#profile div#favorites {display:none;}
#profile div#submissions {display:none;}
#profile div#skills{display:none;}
#header {display:none}
#splash {display:none;}
#links {display:none;}
#subprofile {display:none;}
#blog div#cats {display:none;}
#stats {display:none;}
#contactme {display:none;}
#favorites {display: none;}
#aboutme {display: none;}
#blog div#linkbox {display:none;}
#comments {text-align:center; z-index:4; margin-left: -40px; margin-top: 480px; visibility: visible;}
#outerbox {z-index: 3}
#footer {display:none;}
#container {margin-left: 50px;}
img.layout {left: 0px; top: 0px;}
.main img{position: absolute;border: 0;}
.main{background-color:transparent;visibility:visible;left:0px; top:0px;width:960px; height:900px; overflow:none;
position:absolute; z-index:1;margin-left:0px; margin-top:0px; text-align:left;}
.1{background-color:transparent;width:357px; height:43px; overflow:none;
position:absolute; z-index:2;margin-left:10px; margin-top:490px; text-align:left; visibility: visible; left: 0%; top: 0%;}
.2{background-color: #ffffff; margin-left: 100px; margin-top: 5px; width: 300px; height: 300px; overflow: none; position: absolute; z-index: 5; visibility: visible; left: 0%; top 0%;}
</style>

Footer

CODE

<div class="main" style="z-index:1;">
<img class="layout" src="http://img300.imageshack.us/img300/1286/imgfx2.gif"/>
</div>
<div class="1" style="z-index: 2;">
<a href="http://ersatz.createblog.com/friends">Friends</a>  
<a href="http://ersatz.createblog.com/blog">Blog</a>  
<a href="http://ersatz.createblog.com/wink.php?height=100&width=300&nocache=1182854064">Wink</a>  
<a href="http://ersatz.createblog.com/friends/add.php?height=100&width=300&nocache=1182854064">Add</a>  
</div>
<div class="2" style="z-index: 5;">
ABOUT MEEEEEE<br><br><br>ME
</div>