Character Sheet HTML; moving menu under the body

So I found this Character Sheet, which i'm very much into.
However i dont like that the menu is not visible when you click on the different links in the navigation without scrolling up to see them again. So instead of having it over the body i want them under the body.
But every time i try it goes really wrong in some way or another.
So i wanted to hear if anyone could help me with it?

The site that its going to is : 
http://nionevrien.jcink.net/index.php?act=idx

Code:

[dohtml]<style>img {
    float: right;
    border: 0px dotted black;
    margin: 70px -5px 0px 0px;
}
</style>

<lj-raw><center><lj-cut text="LJCUT TEXT"><div style="width:634px;height:600px;text-align:justify;padding-top:5px;margin:5px 0px;padding:0px;box-shadow:3px 3px 3px 3px #ccc;border:3px solid #000;font-family: Didot,'Didot LT STD','Hoefler Text',Garamond,'Times New Roman',serif;font-size:14px;color:#fff;background:#0A1B29;border-radius:10px;">


<div style="width:200px;height:580px;padding:10px 5px;background:#153D5B;border-right:4px solid #2C80AE;float:left;border-radius:10px;">




   <div style="text-align:center;font-size:12px;font-family:'calibri',CenturyGothic,AppleGothic,sans-serif;font-weight:bold;letter-spacing:2px;">
      <a href="#1" style="text-decoration:none;text-transform:uppercase;color:#ffffff;"><div style="width:150px;height:25px;background:#2C80AE; margin-left:58px;margin-bottom:5px;padding-top:5px;-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;">Udseende</div></a>
      <a href="#2" style="text-decoration:none;text-transform:uppercase;color:#ffffff;"><div style="width:150px;height:25px;background:#2C80AE; margin-left:58px; margin-bottom:5px;padding-top:5px;-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;">Personlighed</div></a>
      <a href="#3" style="text-decoration:none;text-transform:uppercase;color:#ffffff;"><div style="width:150px;height:25px;background:#2C80AE; margin-left:58px;margin-bottom:5px;padding-top:5px;-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;">Magi & S+S</div></a>
      <a href="#4" style="text-decoration:none;text-transform:uppercase;color:#ffffff;"><div style="width:150px;height:25px;background:#2C80AE;margin-left:58px; margin-bottom:15px;padding-top:5px;-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;">Realisme</div></a>
   </div>


   <div style="margin-top:10px;padding:5px;background:#2C80AE;border-radius:10px;"><div style="height:120;overflow:auto;">
      <table style="color:#fffffff;font-family:'Calibri',CenturyGothic,AppleGothic,sans-serif;font-size:12px;width:100%;padding-right:5px;" cellpadding="0" cellspacing="0"><tr><td valign="top" style="text-align:right;padding-right:5px;opacity:.7;">Globalt</td><td>
         Awitin
      </td></tr><tr><td valign="top" style="text-align:right;padding-right:5px;opacity:.7;">Lokalt</td><td>
         Nitwa <br><br>
      </td></tr><tr><td valign="top" style="text-align:right;padding-right:5px;opacity:.7;">Alders grænse</td><td>
         140
      </tr><tr><td valign="top" style="text-align:right;padding-right:5px;opacity:.7;">Hovedkoloni</td><td>
         Ubax<br><br>
      
      </td></tr><tr><td valign="top" style="text-align:right;padding-right:5px;opacity:.7;">Ægteskaber</td><td>
         Polygami
      </td></tr><tr><td valign="top" style="text-align:right;padding-right:5px;opacity:.7;">Ca. antal børn</td><td>
         5
      </td></tr></table>
</div>
   </div>
</div>



<div style="width:400px;height:139px;padding:10px 10px;;float:left;border-radius:10px;">
   <div style="margin-top:20px;margin-left:0px;font-size:36px;font-family:'Century Gothic',CenturyGothic,AppleGothic,sans-serif;color:#D6E8F7;text-shadow:1px 1px #1F4460;letter-spacing:-1px;">AWITIN</div><br>
   <div style="margin-top:-10px;margin-left:30px;font-size:36px;font-family:'Century Gothic',CenturyGothic,AppleGothic,sans-serif;color:#164D5A;text-shadow:1px 1px #233B40;letter-spacing:-1px;"><i>Nitwa</i></div>
   <div style="margin-left:96px;margin-top:-139px;width: 200; height: 139;  background:linear-gradient(to left, transparent 10%, #000); background:-webkit-linear-gradient(right, transparent 0%, #0A1B29); background:-moz-linear-gradient(right, transparent 0%, #0A1B29);border-radius:20px;"></div>
<img src="http://imageshack.com/a/img901/6978/ZsaVz8.png" width="390" height="140">
</div>



<div style="width:390px;height:436px;margin-left:5px;padding:0px 10px;float:left;border-radius:10px;background:#153D5B;overflow:hidden;">


<a name="1"></a>
<div style="width:400px;height:436;padding-right:10px;overflow:auto;">
   <div style="font-family:'Garamond',CenturyGothic,AppleGothic,sans-serif;font-size:25px;text-align:right;border-bottom:1px solid #fff;letter-spacing:3px;line-height:28px;">udseende</div><p>
   <div style="height:393px; width:395px; border:0px solid #ccc;font:14px/26px serif, Georgia, Garamond, Serif;overflow:auto;letter-spacing:2px;">Personality paragraph.<br><br>

   Personality paragraph.<br><br>

   Final personality paragraph.<p></div>
</div>


<a name="2"></a>
<div style="width:400;height:440;padding-right:10px;overflow:auto;">
   <div style="font-family:'Garamond',CenturyGothic,AppleGothic,sans-serif;font-size:20px;text-align:right;border-bottom:1px solid #fff;letter-spacing:3px;line-height:28px;">personlighed</div>
   <div style="height:410px; width:390px; border:0px solid #ccc;font:14px/26px serif, Georgia, Garamond, Serif;overflow:auto;letter-spacing:2px;"><font style="font-size:18px;"><b>Ability</b></font><br>
   Ability paragraph 1.<br><br>

   Ability paragraph 2.<p>

   <font style="font-size:18px;"><b>Ability</b></font><br>
   Ability paragraph.<p></div>
</div>


<a name="3"></a>
<div style="height:440px; width:400px; border:0px solid #cc;">
<div style="width:400;height:430;padding-right:10px;overflow:auto;">
   <div style="font-family:'Garamond',CenturyGothic,AppleGothic,sans-serif;font-size:25px;text-align:right;border-bottom:1px solid #fff;letter-spacing:3px;line-height:28px;">magi</div>
   <div style="height:98px; width:390px; border:0px solid #ccc;font:14px/26px serif, Georgia, Garamond, Serif;overflow:auto;letter-spacing:2px;">History paragraph.<br><br>

   History paragraph.<br><br>

   Final history paragraph.<p></div><br>
   <div style="font-family:'Garamond',CenturyGothic,AppleGothic,sans-serif;font-size:25px;text-align:right;border-bottom:1px solid #fff;letter-spacing:3px;line-height:28px;">styrker</div>
   <div style="height:98px; width:390px; border:0px solid #ccc;font:14px/26px serif, Georgia, Garamond, Serif;overflow:auto;letter-spacing:2px;"><ul><li>Mon. #### - Semi-specific timeline entry
   <li>#### - General timeline entry
   <li>Mon. ####-Mon. #### - Spanned timeline entry
   <li>Mon. #, #### - Specific timeline entry</ul></div>
<br>

   <div style="font-family:'Garamond',CenturyGothic,AppleGothic,sans-serif;font-size:25px;text-align:right;border-bottom:1px solid #fff;letter-spacing:3px;line-height:28px;">svagheder</div>
   <div style="height:98px; width:390px; border:0px solid #ccc;font:14px/26px serif, Georgia, Garamond, Serif;overflow:auto;letter-spacing:2px;"><ul><li>Mon. #### - Semi-specific timeline entry
   <li>#### - General timeline entry
   <li>Mon. ####-Mon. #### - Spanned timeline entry
   <li>Mon. #, #### - Specific timeline entry</ul>
</div></div></div>

<a name="4"></a>
<div style="width:400;height:440;padding-right:10px;overflow:auto;">
<div style="font-family:'Garamond',CenturyGothic,AppleGothic,sans-serif;font-size:25px;text-align:right;border-bottom:1px solid #fff;letter-spacing:3px;line-height:28px;">Realisme</div>
   <div style="height:390px; width:390px; border:0px solid #ccc;font:14px/26px serif, Georgia, Garamond, Serif;overflow:auto;letter-spacing:2px;"><ul><li>Mon. #### - Semi-specific timeline entry
   <li>#### - General timeline entry
   <li>Mon. ####-Mon. #### - Spanned timeline entry
   <li>Mon. #, #### - Specific timeline entry</ul></div>
</div>
</div>


</div>


</div></lj-cut></center></lj-raw>
[/dohtml]

Is the forum your asking about a forumotion forum. As far as i know forumotion does not support [dohtml] tags.

Hello,

Also may you post a screenshot of the issue?

Where do you have this html placed? In an html page? In a post? Also yes as far as I knoa forumotion has no such tag... But whether it supports it or not, I am not sure.

-Brandon

Its not a forumotion site, but it do take advanced html codes. 
but the DoHTML tag is nothing to be concerned about since it doesnt have anything to do with the rest of the code..
Edit: The code is published in a post. 
http://nionevrien.jcink.net/index.php?showtopic=2

do you want this code on your fourm, or are you asking help for a non forumotion forum?

Well the code could be of use to my other site; www.vie-la-mort.forum-motion.com so it'll be for both

Are you asking for help with a code for a Forumotion forum?  If no, then this topic will be locked.