collapsible modules Options

[xTINAA]

Alright, well I'm making a xanga site for my church and I'm trying to add the collapsible modules onto it. Well, it's not working. I'm not sure what's wrong but if I have the code so the original modules are not showing, the collapsible modules appear above the blog area. If I make it so the original modules are showing, the collapsible modules are kind of in the same place as the original modules (above them) but it needs to be aligned and I don't want the original modules there in the first place. I would very much like it to look like the preview provided in the script, but it's not working. Here's my code:

<!-- begin code provided by createblog.com --><br /><img src="http://img134.echo.cx/img134/7826/church3le.png"/><br /><br /><div style="<br />overflow: auto;<br />width: 550px;<br />height: 1000px;<br />margin-top: -265px;<br />margin-right: -240px;<br />overflow-x:hidden<br />"><br /><br /><style type='text/css'><br />table.footer, table.navigation, { display:none; }<br />#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops <br />/* width of the comment page */<br />{width:525px;}<br /></style><br /><br /><br /><style type="text/css"><br />/*Korean Full Gospel Church*/<br />/*by M1SSxCHR1SSY*/<br /><br />#rblEprops, #pnlEnabled table, #pnlEprops table { <br />width: auto !important; <br />}<br /><br /><br />body {<br /> scrollbar-arrow-color: #954E5E;<br /> scrollbar-track-color: #D0C7C0;<br /> scrollbar-shadow-color: #954E5E;<br /> scrollbar-face-color: #D0C7C0;<br /> scrollbar-highlight-color: #954E5E;<br /> scrollbar-darkshadow-color: #D0C7C0;<br /> scrollbar-3dlight-color: #D0C7C0; <br /> }<br /><br />table.blogbody {<br />width:525px;<br />font-family: Tahoma;<br />font-weight: none;<br />font-size: 8pt;<br />color: #000000;<br />text-align: justify;<br />padding: 0px;<br />margin-top: 2px;<br />}<br />div.smalltext{<br />width: 525px;<br />padding: 3px;<br />text-align: justify;<br />}<br />.caption, .blogheader {<br />width: 525px;<br />padding: 3px;<br />font-family: Tahoma;<br />font-size: 8pt;<br />text-align: right;<br />color: #000000;<br />background-color:;<br />text-transform:;<br />margin-top: 10px;<br />border-bottom: #ffffff 0px solid;<br />}<br /><br />P, B, I, TD, TH <br />{font-family: Tahoma; color: #000000; font-size: 8pt; }<br />A:link, A:visited, A:active<br />{color:#954E5E; text-transform: lowercaps; font-size:8pt;}<br />a:hover<br />{text-decoration: none; color:#954E5E; font-size: 8pt;;}<br />b, strong, {<br />/* edit colors when bold italic underline */<br />font-family: Tahoma;<br />font-size: 8pt;<br />color: #000000;<br />font-weight: bold; <br />text-transform: lowercaps;<br /><br /></style><br /><br /><style type=text/css><br />/* edit to your liking */<br />table.module { border: 0px solid #FFFFFF; width:160px; background-color:; }<br />table.module th { background-color: #;font: bold 11px Tahoma; text-transform: uppercase;color: #000000; border: none; }<br />table.module td {color: #000000; text-align: left; border: none; background-image: none; }<br /></style><br /><br /><!-- add this below all the CSS --><br /><br /><table border=0 width="660"><tr><td valign="top" width="160"><br /><table border="0" cellspacing="0" cellpadding="4" width="100%" class="module"><tr><th valign="top" align="left" class="module"><b></b></th></tr><tr><td valign="top" class="module"> <br /><style type="text/css"><br />.menutitle{<br />cursor:pointer;<br />margin-bottom: 5px;<br />background-color:#;<br />color:#000000;<br />width:140px;<br />padding:2px;<br />text-align:justify;<br />font-weight:bold;<br />/*/*/border:0px solid #000000;/* */<br />}<br /><br />.submenu{<br />margin-bottom: 0.5em;<br />}<br /></style><br /><br /><script type="text/javascript"><br /><br />/***********************************************<br />* Switch Menu script- by Martial B of http://getElementById.com/<br />* Modified by Dynamic Drive for format & NS4/IE4 compatibility<br />* Visit http://www.dynamicdrive.com/ for full source code<br />***********************************************/<br /><br />if (document.getElementById){ //DynamicDrive.com change<br />document.write('<style type="text/css">\n')<br />document.write('.submenu{display: none;}\n')<br />document.write('</style>\n')<br />}<br /><br />function SwitchMenu(obj){<br /> if(document.getElementById){<br /> var el = document.getElementById(obj);<br /> var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change<br />  if(el.style.display != "block"){ //DynamicDrive.com change<br />   for (var i=0; i<ar.length; i++){<br />    if (ar[i].className=="submenu") //DynamicDrive.com change<br />    ar[i].style.display = "none";<br />   }<br />   el.style.display = "block";<br />  }else{<br />   el.style.display = "none";<br />  }<br /> }<br />}<br /><br /></script><br /><br /><!-- Keep all menus within masterdiv--><br /><div id="masterdiv"><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub1')">Mission Statement</div><br /> <span class="submenu" id="sub1"><br />This is our church's mission statement:<br />It will be added shortly.<br />  <br /> </span><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub2')">Members</div><br /> <span class="submenu" id="sub2"><br /> These are the members of your youth group:<br />It will be added shortly.<br /> </span><br /><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub3')">Pictures<span class='searchlite'></span></div><br /> <span class="submenu" id="sub3"><br /> View our picture site:<br />It will be added shortly.<br /> </span><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub4')">Extras<span class='searchlite'></span></div><br /> <span class="submenu" id="sub4"><br /> It will be added shortly.<br /> </span> <br /></div></td></tr></table><br><br /></td><br /><br /><!-- end code provided by createblog.com -->

Sorry if that was a bit confusing.

[talcumpowder]

Sorry if I made this confusing. Really, all you edit now is the two div layers. Right now, they're set to appear directly over the blog. As the style is exactly the same.

<!-- begin code provided by createblog.com --><br /><img src="http://img134.echo.cx/img134/7826/church3le.png"/><br /><br /><script type="text/javascript"><br />/***********************************************<br />* Switch Menu script- by Martial B of http://getElementById.com/<br />* Modified by Dynamic Drive for format & NS4/IE4 compatibility<br />* Visit http://www.dynamicdrive.com/ for full source code<br />***********************************************/<br /><br />if (document.getElementById){ //DynamicDrive.com change<br />document.write('<style type="text/css">\n')<br />document.write('.submenu{display: none;}\n')<br />document.write('</style>\n')<br />}<br /><br />function SwitchMenu(obj){<br /> if(document.getElementById){<br /> var el = document.getElementById(obj);<br /> var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change<br />  if(el.style.display != "block"){ //DynamicDrive.com change<br />   for (var i=0; i<ar.length; i++){<br />    if (ar[i].className=="submenu") //DynamicDrive.com change<br />    ar[i].style.display = "none";<br />   }<br />   el.style.display = "block";<br />  }else{<br />   el.style.display = "none";<br />  }<br /> }<br />}<br /><br /></script><br /><br /><!-- Keep all menus within masterdiv--><br /><!-- You're editing this here. Make the div layer oversized... So it doesn't push your blog down. --><br /><div id="masterdiv" style="overflow: none;width: 550px;height: 1000px;margin-top: -265px;margin-right: -240px;overflow-x:hidden><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub1')">Mission Statement</div><br /> <span class="submenu" id="sub1"><br />This is our church's mission statement:<br />It will be added shortly.<br />  <br /> </span><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub2')">Members</div><br /> <span class="submenu" id="sub2"><br /> These are the members of your youth group:<br />It will be added shortly.<br /> </span><br /><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub3')">Pictures<span class='searchlite'></span></div><br /> <span class="submenu" id="sub3"><br /> View our picture site:<br />It will be added shortly.<br /> </span><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub4')">Extras<span class='searchlite'></span></div><br /> <span class="submenu" id="sub4"><br /> It will be added shortly.<br /> </span></div><br /><br /><style type="text/css"><br />/*Korean Full Gospel Church*/<br />/*by M1SSxCHR1SSY*/<br />table.footer, table.navigation, { display:none; }<br />#rblEprops, #pnlEnabled table, #pnlEprops table { <br />width: auto !important; }<br />#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops <br />/* width of the comment page */<br />{width:525px;}<br />body {<br /> scrollbar-arrow-color: #954E5E;<br /> scrollbar-track-color: #D0C7C0;<br /> scrollbar-shadow-color: #954E5E;<br /> scrollbar-face-color: #D0C7C0;<br /> scrollbar-highlight-color: #954E5E;<br /> scrollbar-darkshadow-color: #D0C7C0;<br /> scrollbar-3dlight-color: #D0C7C0; }<br />table.blogbody {<br />width:525px;<br />font-family: Tahoma;<br />font-weight: none;<br />font-size: 8pt;<br />color: #000000;<br />text-align: justify;<br />padding: 0px;<br />margin-top: 2px;}<br />div.smalltext{<br />width: 525px;<br />padding: 3px;<br />text-align: justify;}<br />.caption, .blogheader {<br />width: 525px;<br />padding: 3px;<br />font-family: Tahoma;<br />font-size: 8pt;<br />text-align: right;<br />color: #000000;<br />background-color:;<br />text-transform:;<br />margin-top: 10px;<br />border-bottom: #ffffff 0px solid;}<br />P, B, I, TD, TH <br />{font-family: Tahoma; color: #000000; font-size: 8pt; }<br />A:link, A:visited, A:active<br />{color:#954E5E; text-transform: lowercaps; font-size:8pt;}<br />a:hover<br />{text-decoration: none; color:#954E5E; font-size: 8pt;;}<br />b, strong, {<br />/* edit colors when bold italic underline */<br />font-family: Tahoma;<br />font-size: 8pt;<br />color: #000000;<br />font-weight: bold; <br />text-transform: lowercaps;}<br />.menutitle{<br />cursor:pointer;<br />margin-bottom: 5px;<br />background-color:#;<br />color:#000000;<br />width:140px;<br />padding:2px;<br />text-align:justify;<br />font-weight:bold;<br />/*/*/border:0px solid #000000;/* */}<br />.submenu{<br />margin-bottom: 0.5em;}<br />/* edit to your liking */<br />table.module { border: 0px solid #FFFFFF; width:160px; background-color:; }<br />table.module th { background-color: #;font: bold 11px Tahoma; text-transform: uppercase;color: #000000; border: none; }<br />table.module td {color: #000000; text-align: left; border: none; background-image: none; }<br /></style><br /><br /><div style="overflow: auto;width: 550px;height: 1000px;margin-top: -265px;margin-right: -240px;overflow-x:hidden"><br /><!-- end code provided by createblog.com -->