positioning modules Options

[venti-anemoi]

Hi. Need a little help here. I made a skin...... sort of....... and I've got the blog part down. I'd like to keep the things that normally show up in the left-side modules, but move them to the right side.

Here's what I have so far:

<!-- begin code provided by createblog.com -->
<img src="http://img7.imgspot.com/u/04/294/20/AutumnLight.JPG">
<!-- end code provided by createblog.com -->

<!-- begin code provided by createblog.com -->
<DIV style="margin-top: -410px; margin-left:
-155px; width: 550px;OVERFLOW: auto; height:375px; BACKGROUND-COLOR: transparent">
<!-- end code provided by createblog.com -->

<!-- begin code provided by createblog.com -->
<style type="text/css">
.#rblEprops{display:none;}
#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops
/* width of the comment page */
{width:399px;}
.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer
{display: none;}
</style>
<!-- end code provided by createblog.com -->

<!-- begin code provided by createblog.com -->
<style type="text/css">
body {
background-color: #FF9933;
scrollbar-arrow-color: #FF9933;
scrollbar-track-color: #FF9933;
scrollbar-shadow-color: #FF9933;
scrollbar-face-color: #FFCC99;
scrollbar-highlight-color: #FFCC99;
scrollbar-darkshadow-color: #FF9933;
scrollbar-3dlight-color: #FFCC99; }


.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p {
/* edits main text */
font:normal #11 FONT;
line-height:12px;
color: #CC6600;
letter-spacing:1px;
text-align:justify;}

table.footer TD {
/* this makes the footer at the bottom centered */
text-align: center;}

a:link, .footernav.link, a.footernav:link, a.footernav:active {
color: #CC6600;
text-decoration: none;}

a:visited, a.footernav:visited, {
/* edits the links that the user has visited */
color: #CC6600;
text-decoration: line-through;}

a:hover {
/* edits when user mouseovers the links */
color: #CC6600;
cursor: crosshair;
text-decoration: none;}

table.blogbody {
/* this edits the other the place where the blog is */
border: 0px solid COLOR;
background-color: transparent;
width:558px;}

table.search TD, table.announcements TH {
border: 0px solid #FFFFFF;
}
table.navigation, table.main, table.footer {
/* the width of your blog with modules */
width: 167px;
}
hr {
/* horizontal divider */
border: 1px solid #FF9933;
}
</style>
<!-- end code provided by createblog.com -->

So I want to move the left-side modules to that area under "navi." Except I have no clue how to do so.

Help.......?

[venti-anemoi]

sorry for double posting......

I looked in the tutorials section in webmaster's corner to see if they had anything about div layers there. They did...... but it only seems to work with websites, not xanga. I get how to make custom modules, but i don't get how to position them using div layers. Every time I try to use it, the modules end up in the place where the blog is when I want it to be on the right side.

So this is what I have.....

CODE

<!-- begin code provided by createblog.com -->
<img src="http://img7.imgspot.com/u/04/294/20/AutumnLight.JPG">
<!-- end code provided by createblog.com -->

<!-- begin code provided by createblog.com -->
<DIV style="margin-top: -410px; margin-left:
-155px; width: 550px;OVERFLOW: auto; height:375px; BACKGROUND-COLOR: transparent">
<!-- end code provided by createblog.com -->

<!-- begin code provided by createblog.com -->
<style type="text/css">
.#rblEprops{display:none;}
#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops
/* width of the comment page */
{width:399px;}
.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer
{display: none;}
</style>
<!-- end code provided by createblog.com -->

<!-- begin code provided by createblog.com -->
<style type="text/css">
body {
background-color: #FF9933;
scrollbar-arrow-color: #FF9933;
scrollbar-track-color: #FF9933;
scrollbar-shadow-color: #FF9933;
scrollbar-face-color: #FFCC99;
scrollbar-highlight-color: #FFCC99;
scrollbar-darkshadow-color: #FF9933;
scrollbar-3dlight-color: #FFCC99; }


.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p {
/* edits main text */
font:normal #11 FONT;
line-height:12px;
color: #CC6600;
letter-spacing:1px;
text-align:justify;}

table.footer TD {
/* this makes the footer at the bottom centered */
text-align: center;}

a:link, .footernav.link, a.footernav:link, a.footernav:active {
color: #CC6600;
text-decoration: none;}

a:visited, a.footernav:visited,  {
/* edits the links that the user has visited */
color: #CC6600;
text-decoration: line-through;}

a:hover {
/* edits when user mouseovers the links */
color: #CC6600;
cursor: crosshair;
text-decoration: none;}

table.blogbody {
/* this edits the other the place where the  blog is */
border: 0px solid COLOR;
background-color: transparent;
width:558px;}

table.search TD, table.announcements TH {
border: 0px solid #FFFFFF;
}
table.navigation, table.main, table.footer {
/* the width of your blog with modules */
width: 167px;
}
hr {
/* horizontal divider */
border: 1px solid #FF9933;
}
</style>
<!-- end code provided by createblog.com -->

<!-- begin code provided by createblog.com -->
<div id="navi" style="position:absolute; width:200; height:600; z-index:0; left:700; top:20">
<style type=text/css>
/* remove regular modules */
texttable.left, td.mainleft, table.left, table.navigation, table.search{display:none}
table.blogbody tr td {width:0px; padding: 0px;}

/* edit to your liking */
table.module { border: 1px solid #000000; width:160px; background-color:f2f2f2; }
table.module th { background-color: #336699;font: bold 11px arial; text-transform: uppercase;color: #FFFFFF; border: none; }
table.module td {color: #000000; text-align: left; border: none; background-image: none; }
</style>

<!-- add this below all the CSS -->

<table border=0 width="660"><tr><td valign="top" width="160">
<table border="1" cellspacing="0" cellpadding="4" width="100%" class="module"><tr><th valign="top" align="left" class="module"><b>About Me</b></th></tr><tr><td valign="top" class="module">
<center><img src="http://p.xanga.com/USERNAME/profile.jpg"></center><p>

<b>name:</b> uhhhh..<br>
<b>gender:</b> errr<br>
<b>hobbies:</b> blah blah<br>

</td></tr></table><br>

<table border="1" cellspacing="0" cellpadding="4" width="100%" class="module"><tr><th valign="top" align="left" class="module"><b>Subscriptions</b></th></tr><tr><td valign="top" class="module">

<!-- Add your subscriptions here -->

<a href="http://www.xanga.com/SOMEONE">someone</a><br>
<a href="http://www.xanga.com/SOMEONE2">someone 2</a>

</td></tr></table><br>

<table border="1" cellspacing="0" cellpadding="4" width="100%" class="module"><tr><th valign="top" align="left" class="module"><b>Bloggies</b></th></tr><tr><td valign="top" class="module">

<!-- Add your blogrings here -->

<a href="http://www.xanga.com/blogrings/blogring.asp?id=200537">Xangans.com</a>

</td></tr></table><br>


<!-- Here's your CUSTOM MODULE.. copy and paste as needed -->
<table border="1" cellspacing="0" cellpadding="4" width="100%" class="module"><tr><th valign="top" align="left" class="module"><b>CUSTOM MODULE</b></th></tr><tr><td valign="top" class="module">

La la la =]

</td></tr></table><br>

</td><td width="500" valign="top" align="left">
</div>
<!-- end code provided by createblog.com -->

I just put in random numbers, by the way......

So, does anyone know how to change it so that it'll end up outside of the area where the blog is?