Placement Help... >_< Options

[Psyonara]

Yeah. I'm designing my first skin.

Man Machine Interface


but, that is not the point.

Alright, I read the div positioning tutorial,

and I have it in the correct position, but now it ends up under the image of the skin...


Here is a visual representation of my problem:



PLEASE HELP ME OUT HERE! IT'S ONE MORE THING THAT I GOTTA DO!!!

[Psyonara]

CODE

<!-- begin code provided by createblog.com -->


<script language="Javascript">
<!--title changer... set title below-->
var msg = "::...Man Machine Interface...::";
document.title = msg;

</script>

<!-- Image Mapping Junk... Leave this alone! -->
<img src="http://img45.exs.cx/img45/7792/partcompleteskin2.jpg" border=0

usemap="#mymap">

<!-- add or delete the elements below with your own shapes (i.e. rectangles,

circles, etc.) -->

<!-- replace the coordinates and URLs below with your own values -->

<map name="mymap">

<!-- Private -->
<area shape=rect coords="101,223,231,199" href="http://www.xanga.com/private/home

.aspx">

<!-- Subscribe -->
<area shape=rect coords="101,274,230,249" href="http://www.xanga.com/Private/

Subscribeto.aspx?user=username">

<!-- Jack In -->
<area shape=rect coords="101,324,229,299" href="http://www.xanga.com/signin.aspx">

<!-- Jack Out -->
<area shape=rect coords="101,379,229,354" href="http://www.xanga.com/logout.aspx">
</map>


<style type=text/css>
table.blogbody tr td { padding: 0px;}
texttable.left, td.mainleft, table.left, table.navigation, table.search, table.footer{display:none}
</style>
<div style="
overflow: auto;
width: 300px;
height: 280px;
margin-top: -350px;
margin-right: 30px;">

<style type="text/css">
body {
background-image:url();
background-repeat: repeat-y-x;
background-color: #000000;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #808080;
scrollbar-highlight-color: #808080;
scrollbar-3dlight-color: #808080;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #000000;
}

#rblEprops, #pnlEnabled table, #pnlEprops table {
width: auto !important;
}

table.blogbody {
width:300px;
font-family: Arial;
font-weight: none;
font-size: 8pt;
color: #ffffff;
text-align: justify;
padding: 0px;
margin-top: 2px;
}

.caption, .blogheader {
width: 200px;
padding: px;
font-family: verdana;
font-size: 12pt;
background-color: #000000;
text-align: left;
color: #FFFFFF;
text-transform: none;
margin-top: 10px;
}

div.smalltext{
width: 300px;
padding: 3px;
text-align: left;
}

P, B, I, TD, TH
{font-family: arial; color: #ffffff; font-size: 8pt; }
A:link, A:visited, A:active
{color:#0000FF; text-decoration:none; font-size:8pt;}
a:hover
{text-decoration: underline; font-size: 8pt; );}
b, strong, i, u, {
/* edit colors when bold italic underline */
font-family: arial;
font-size: 8pt;
color: #000000;
font-weight: bold;
text-transform: lowercaps;
</style>

EDIT:

BTW, my comments box, within the xanga previewer, is always far off to the left. How do I fix that?