Can someone help me code the navigation? I've tried using div layers, but each time I insert the div layer, it will end up in my blog space. I want the links to appear below the flowery box and also another div with a brief intro on the top image (the pale box). What would I need to type for the code?

This is where my Xanga is: http://xanga.com/raspb3rry

This is the code I have so far (in the header)

<!-- begin code provided by createblog.com -->
<!-- ImageReady Slices (Untitled-1) -->
<table id="Table_01" width="750" height="900" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="http://img15.imgspot.com/u/06/16/23/rain011137559106.gif" width="750" height="24" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://img15.imgspot.com/u/06/16/23/rain021137559135.gif" width="40" height="876" alt=""></td>
<td>
<a href="http://clix.to/lunoriginal">
<img src="http://img15.imgspot.com/u/06/16/23/rain031137559175.gif" width="68" height="12" border="0"></a></td>
<td rowspan="2">
<img src="http://tinypic.com/kevq0h.gif" width="642" height="876" alt=""></td>
</tr>
<tr>
<td>
<img src="http://tinypic.com/kevq7p.gif" width="68" height="864" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
<!-- end code provided by createblog.com -->
<!-- begin code provided by createblog.com -->
<div style="
overflow: auto;
width: 500px;
height: 400px;
margin-top: -425px;
margin-left: 40px;">
<!-- 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:245px;}
.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">
/*Rain With Style*/
/*by Emily Phan*/
body {
background-image:url(http://img15.imgspot.com/u/06/16/23/bg1137558874.jpg);
background-repeat: repeat-y-x;
background-color: transparent;
text-align: justify;
font-style : normal;
font-weight : normal;
font-size : 8pt ;
font-family : Arial;
color : #74454e;
}

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

table.blogbody {
width: 450px;
font-family: Arial;
font-weight: none;
font-size: 8pt;
color: #74454e;
text-align: justify;
padding: 0px;
margin-top: 2px;
}
div.smalltext{
width: 420px;
padding: 3px;
text-align: left;
}
.caption, .blogheader {
width: 380px;
padding: 3px;
font-family: Arial;
font-size: 16pt;
text-align: center;
color: #74454e;
background-color: transparent;
text-transform: lowercaps;
margin-top: 10px;
}

P, B, I, TD, TH
{font-family: Arial; color: #74454e; font-size: 8pt; }
A:link, A:visited, A:active
{color:#62303a; ; text-decoration:none; font-size:8pt;}
a:hover
{text-decoration: underline; color:#4f1f28; font-size: 8pt; background-color:#f9f9ef; cursor: crosshair;}
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>
<!-- end code provided by createblog.com -->

well you should put a div code like this;

<div align="left"><div style="position: static; width:181px; height: justified;overflow:auto; margin-top:-80px; margin-left:5px;">

after all of your codes, and put in the navigation links...change the bolded so you can move the div to wherever you want it to be/how wide you want it to be.

um make sure you write </div> after every time you want the box to end, and then there will be separate boxes