Alignmnet of top modules, should be aligned on the right Options

[rids_score]

I just peacemealed a new layout for my xanga. As this is my first real involved layout, I'm not entirely sure how to fix the problem I ran in to.

Both the group of links, and the module at the top of the page should be lined up with the rest of the blog on the right, but I have no idea how to get them there. The code I used is below.

Also, I've found that I can't modify the width of the two right side modules. How does one do that?

Any help would be much appreciated!

Thank you,
Ridley


This is the header code:

CODE

<div style=" border: 0px solid #000000;width: 400px; height: 100%;"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 9px; COLOR: #FFFFFF; LINE-HEIGHT: 11px; FONT-FAMILY: verdana; LETTER-SPACING: 0pt">
<a href="http://www.xanga.com/"  target="_new">[ home base ]</a>  <a href="http://www.xanga.com/claf" target="_new">[ asthetics ]</a>  <a href="http://grouphug.us" target="_new">[ therapy ]</a>  <a href="http://zerofate.deviantart.com" target =_new">[ frustrations ]</a>  <a href="http://www.myspace.com/zerofate" target =_new"> [ anti-individuality ]</a>  <a href="http://www.createblog.com/" target="_new">[ heaven ]</a>  <a href="http://www.xanga.com/subscriptions" target="_new">[ instincts ]</a>   <a href="http://www.xanga.com/private/subscribeto.aspx?user=august_entered" target="_new">[ suicide ]</a></A></div>
<br><div style=" border: 0px solid #000000;width: 300px; height: 100%;"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 9px; COLOR: #FFFFFF; LINE-HEIGHT: 11px; FONT-FAMILY: verdana; LETTER-SPACING: 0pt"><img src=" http://img.photobucket.com/albums/v488/battousaifire/6152c6ce.jpg" alt="" align="right">
I'm getting there.  It's called patience.  Please use it.</div><BR>
<style type="text/css">
body {
background-image: url(http://img.photobucket.com/albums/v488/battousaifire/a15485ed.jpg);
background-color: #000000;
background-repeat: repeat;
background-attachment: fixed;
background-position: centered;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-shadow-color:#000000;
scrollbar-face-color: #313131;
scrollbar-highlight-color: #272727;
scrollbar-darkshadow-color: #0d0d0d;
scrollbar-3dlight-color:#000000;
}
.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p {
/* edits main text */
font:normal 9px verdana;
line-height:11px;
color:#FFFFFF;
letter-spacing:0px;
text-align:center;
}
table.footer TD {
/* this makes the footer at the bottom centered */
/* leave it alone unless you know what to do*/
text-align: center;
}
div.blogheader, .caption {
/* edits the dates */
font-family:verdana;
width:300px;
font-size: 12px;
line-height:16px;
color: #FFFFFF;
letter-spacing:1px;
font-weight:bold;
text-transform:lowercase;
text-align:center;
}
a:link, .footernav.link, a.footernav:link, a.footernav:active {
/* edits all links */
color:#FFFFFF;
text-transform:lowercase;
font: 9px verdana;
border-bottom: 0px #000000;

}
a:visited, a.footernav:visited, {
/* edits the links that the user has visited */
color:#FFFFFF;
text-transform:lowercase;
font: 9px verdana;
}
a:hover {
/* edits when user mouseovers the links */
color:#000000;
cursor: normal;
font:bold 9px verdana;
text-transform:lowercase;
border: none;
background-color: #101010;
}
input, select, textarea, .textfield, .button {
/* this edits the buttons, dropdowns, etc. */
border: 1px solid #000000;
font:normal 9px verdana;
background-color:#101010;
letter-spacing:0px;
color: #FFFFFF;
}
table.left {
/* this edits the menu module */
width:1px;
}
table.blogbody {
/* this edits the other the place where the blog is */
border: 0px solid #000000;
width:300px;
}
table.left th {
/* on your menu module, this edits the title part of it */
/* like BLOGRINGS, POSTING CALENDAR, etc */
background-color: #000000;
color: #000000;

}
table.left TD {
/* on your menu module, this edits the body part of it */
border: 0px solid #000000;

}
table.search TD, table.search, table.announcements {
/* border of search bar (if you have it) */
border: 0px solid #000000;
}
table.search TD, table.announcements TH {
/* this should be left alone */
/* unless you know what to do */
border: 0px solid #000000;
}
table.navigation, table.main, table.footer {
/* the width of your blog with modules */
width: 350px;
}
hr {
/* horizontal divider */
border: 1px solid #000000;
}
hr {
/* horizontal divider */
border: 1px solid #000000;
}
.blogbody b, .standard b, p b, strong {
/* edits bolded text in your entry */
font-weight:bold;
color: #FFFFFF;
border-bottom: 1px solid #F3F1F1;
letter-spacing: 0px;
}
u,{
color: #FFFFFF;
border-bottom: 2px solid #F3F1F1;
}
.blogbody i, .standard i, p i, em {
text-decoration:italic;
color: #FFFFFF;
background-color:#101010;
}
table.footer {display: none;}
</style>
<script language="JavaScript">document.title="so i just lay my head down beside this god of mine…"</script>
<!-- begin code provided by createblog.com -->
<style type="text/css">
table.navigation, table.footer { display:none; }
</style>
<!-- end code provided by createblog.com -->
<!-- start code provided by createblog.com -->
<div id="blog" style="position: static; margin-left: 350px;  height: 100%; background: none; overflow:;"><table border="0"></div>
<!-- end code provided by createblog.com -->

Webstats code:

CODE

<!-- start code provided by createblog.com -->
<!-- Script by Paul Chen -->
<td id="customRight" style="display:none" vAlign="top" width="200">
<!-- module:start -->
<table class="left" cellSpacing="0" cellPadding="4" width="100%" border="1">
<tr><th class="left" vAlign="top" align="center"><FONT style="FONT-WEIGHT: bold; FONT-SIZE: 9px; COLOR: #FFFFFF; LINE-HEIGHT: 11px; FONT-FAMILY: verdana; text-transform: uppercase; LETTER-SPACING: 0pt">super happy fun time</FONT></th></tr>
<tr><td class="left" vAlign="top">
interests... eventually
</td></tr>
</table>
<br/>
<!-- module:end -->
<!-- module:start -->
<table class="left" cellSpacing="0" cellPadding="4" width="100%" border="1">
<tr><th class="left" vAlign="top" align="center"><FONT style="FONT-WEIGHT: bold; FONT-SIZE: 9px; COLOR: #FFFFFF; LINE-HEIGHT: 11px; FONT-FAMILY: verdana; LETTER-SPACING: 0pt; text-transform:uppercase">pure volume goodies</FONT></th></tr>
<tr><td class="left" vAlign="top"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 7px; COLOR: #FFFFFF; LINE-HEIGHT: 9px; FONT-FAMILY: verdana; text-transform: normal; LETTER-SPACING: 0pt"> <a href="http://www.anberlin.com/"  target="_new">+</a> anberlin
<a href="http://www.myspace.com/andtheniturnedseven/"  target="_new">+</a> and then I turned seven
<a href="http://www.aperfectcircle.com/"  target="_new">+</a> a perfect circle
<a href="http://www.aqualungmusic.com/"  target="_new">+</a> aqualung
<a href="http://www.baysiderocks.com/"  target="_new">+</a> bayside
<a href="http://www.blindmelon.com/"  target="_new">+</a> blind melon
<a href="http://www.bleedthedream.com/" target="_new">+</a>  bleed the dream
<a href="http://www.breakingbenjamin.com/"  target="_new">+</a> breaking benjamin
<a href="http://www.chevelleinc.com/"  target="_new">+</a> chevelle
<a href="http://www.coheedandcambria.com/"  target="_new">+</a> coheed and cambria
<a href="http://www.coldplay.com/"  target="_new">+</a> coldplay
<a href="http://www.commonrotation.com/"  target="_new">+</a> common rotation
<a href="http://www.darlingvioletta.com/"  target="_new">+</a> darling violetta
<a href="http://www.deathcabforcutie.com/"  target="_new">+</a> death cab for cutie
<a href="http://www.dominiccastillo.com/"  target="_new">+</a> dominic castillo and the rock savants
<a href="http://www.eisley.com/"  target="_new">+</a> eisley
<a href="http://www.emerymusic.com/"  target="_new">+</a> emery
<a href="http://www.falloutboyrock.com/"  target="_new">+</a> fall out boy
<a href="http://www.fairveronamd.com/"  target="_new">+</a> fair verona
<a href="http://www.fingereleven.com/"  target="_new">+</a> finger eleven
<a href="http://www.beyondtheforest.net/"  target="_new">+</a> five am
<a href="http://www.myspace.com/fourletterlie.com/"  target="_new">+</a> four letter lie
<a href="http://www.ghostoftherobot.com/"  target="_new">+</a> ghost of the robot
<a href="http://www.guster.com/"  target="_new">+</a> guster
<a href="http://www.hawthorneheights.com/"  target="_new">+</a> hawthorne heights
<a href="http://www.purevolume.com/hitthelights/"  target="_new">+</a> hit the lights
<a href="http://www.junerock.com/"  target="_new">+</a> june
<a href="http://www.LastWinter.com/"  target="_new">+</a> last winter
<a href="http://www.linkinpark.com/"  target="_new">+</a> linkin park
<a href="http://www.LovedrugMusic.com/"  target="_new">+</a> lovedrug
<a href="http://www.marilynmanson.com/"  target="_new">+</a> marilyn manson
<a href="http://www.mattpondpa.com/"  target="_new">+</a> matt pond pa
<a href="http://www.modestmouse.com/"  target="_new">+</a> modest mouse
<a href="http://www.mychemicalromance.com/"  target="_new">+</a> my chemical romance
<a href="http://www.oasisus.com/"  target="_new">+</a> oasis
<a href="http://www.ourladypeace.com/"  target="_new">+</a> our lady peace
<a href="http://www.panicatthedisco.com/"  target="_new">+</a> panic at the disco
<a href="http://www.phantomplanet.com/"  target="_new">+</a> phantom planet
<a href="http://www.postbreaktragedy.com/"  target="_new">+</a> post break tragedy
<a href="http://www.myspace.com/prologuetospring"  target="_new">+</a> prologue to spring
<a href="http://www.rasputina.com/"  target="_new">+</a> rasputina
<a href="http://www.reggieandthefulleffect.net/"  target="_new">+</a> reggie and the full effect
<a href="http://www.riseagainst.com/"  target="_new">+</a> rise against
<a href="http://www.robdougan.com/"  target="_new">+</a> rob dougan
<a href="http://www.rockkillskid.com/"  target="_new">+</a> rock kills kid
<a href="http://www.smileemptysoul.com/"  target="_new">+</a> smile empty soul
<a href="http://www.snowpatrol.net/"  target="_new">+</a> snow patrol
<a href="http://www.straylightrun.com/"  target="_new">+</a> straylight run
<a href="http://www.theacademyis.com/"  target="_new">+</a> the academy is…
<a href="http://www.thedramasummer.com/"  target="_new">+</a> the drama summer
<a href="http://www.thehonourrecital.com/" target="_new">+</a> the honour recital
<a href="http://www.theused.net/"  target="_new">+</a> the used
<a href="http://www.theverve.co.uk/"  target="_new">+</a> the verve
<a href="http://www.thrice.net/" target="_new">+</a> thrice
<a href="http://www.thirtysecondstomars.com/"  target="_new">+</a> thirty sceonds to mars
<a href="http://www.thursday.net/"  target="_new">+</a> thursday
<a href="http://www.vederamusic.com/"  target="_new">+</a> vedera
<a href="http://www.zoekeating.com/"  target="_new">+</a> zoe keating
</td></tr>
</table>
<br/>
<!-- module:end -->
</td>
<script>
extra=false;
j=document.getElementById('MoreoverModule1_lblModuleTitle')
if(j){extra=true}
index=0;
var mytds = document.getElementsByTagName('td');
var i = 0;
for(i=0;i<mytds.length-1;i++){
if(mytds[i].width=="200"){
  index++;
  if(index==(extra ? 2 : 1)){break;}}
}
var sidebar = (extra ? mytds[i]: mytds[i].parentNode)
var tsibpc = document.getElementById('customRight');
var rightSide = tsibpc.cloneNode(true);
rightSide.style.display = "block";
sidebar.appendChild(rightSide);
</script>
<!-- end code provided by createblog.com -->

<!-- begin code provided by createblog.com -->
<style type="text/css">
/*
Did You Know? Remover - xanga.com/add_ons
*/
Table.Announcements TD {display: none;};
</style>
<!-- end code provided by createblog.com -->

<!-- begin code provided by createblog.com -->
<script type="text/javascript">
//
// ©2004 EasterEgg
//
// For use at Xanga only.
//
// While the date in your blogheader has a fixed format
// (e.g. "Tuesday, March 16, 2004") you may want to use
// another date format, accustomed to *your* preferences.
// This script enables you to apply pretty much any date
// format to your blogheader you like.
//
// Here's how it works:
// The script collects all blogheaders and applies to them
// a format you define by changing the value of the variable
// "dateFormatStr" in the code below. Currently that value is
// set to 'ddd, mm/dd/yy', which will result in a date that
// looks like this: 'Tue, 03/16/04'. If you want to use slashes
// instead of divisions as date separators, go right ahead; you
// can even add HTML to the date format string if you like!:-)
//
// =================
// listing of available constants (using the date
// "Tuesday, March 16, 2004" as an example):
//
// dd = 16
// ddd = Tue
// dddd = Tuesday
//
// mm = 03
// mmm = Mar
// mmmm = March
//
// yy = 04
// yyyy = 2004
//
// =================
//
// You can use any combination of the above constants. Examples:
//
// 'mm/dd/yyyy' will result in '03/16/2004'
// 'mmm dd, yy' will result in 'Mar 16, 04'
// 'mm-dd-yy (dddd)' will result in '03-16-04 (Tuesday)'
// '{ ddd, mmm dd, yyyy }', will result in '{ Tue, Mar 16, 2004 }'
//
// Get the general idea?;-)
//
// Copy this entire code and paste it in the webstats box of your
// Look and Feel page.
//
// You're free to use this script as long as this comment remains
// intact. Future modifications allowed if due credit is given.
//

function formatEntryDate()
{
    // ***** adjust the dateFormatStr below as you see fit
    // ===================================================
    dateFormatStr = '[ dddd, dd.mmmm.yyyy ]';
    // ===================================================
    

    function getMonthNr(sMonth)
    {
        months = new Array(
            "Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
        for (var n = 0; n < months.length; ++n)
        {
            if (months[n] == sMonth)
            {
                if ( n + 1 < 10)
                    return '0' + (n + 1).toString()
                else
                    return (n + 1).toString();
            }
        }
    }

    allDivs = document.getElementsByTagName('div');
    for (var i = 0; i < allDivs.length; ++i)
    {
        if (allDivs[i].className == 'blogheader')
        {
            newDateFormat = dateFormatStr;
            
            // day
            entryDate = allDivs[i].innerHTML;
            dayLong = entryDate.substr(0, entryDate.indexOf(','));  // dddd
            dayShort = dayLong.substr(0, 3);                        // ddd  
            tempStr = entryDate.substr(dayLong.length + 1);
            dayNr = tempStr.substr(tempStr.indexOf(',') - 2, 2);    // dd
            newDateFormat = newDateFormat.replace('dddd', dayLong);
            newDateFormat = newDateFormat.replace('ddd', dayShort);
            newDateFormat = newDateFormat.replace('dd', dayNr);

            // month
            monthLong = tempStr.substr(1, tempStr.indexOf(',') - 3);// mmmm
            monthShort = monthLong.substr(0, 3);                    // mmm
            monthNr = getMonthNr(monthShort);                       // mm
            newDateFormat = newDateFormat.replace('mmmm', monthLong);
            newDateFormat = newDateFormat.replace('mmm', monthShort);
            newDateFormat = newDateFormat.replace('mm', monthNr);

            // year
            yearLong = tempStr.substr(tempStr.indexOf(',') + 2);    // yyyy
            yearShort = yearLong.substr(2);                         // yy
            newDateFormat = newDateFormat.replace('yyyy', yearLong);
            newDateFormat = newDateFormat.replace('yy', yearShort);

            allDivs[i].innerHTML = newDateFormat;
        }
    }
}
formatEntryDate();
</script>
<!-- end code provided by createblog.com -->

<!-- begin code provided by createblog.com -->
<style type='text/css'>
.mainleft { display:none; }
</style>
<!-- end code provided by createblog.com -->
<!-- begin code provided by createblog.com -->
<script type="text/javascript">
//
// ©2004 EasterEgg
//
// For use at Xanga only.
//
// While the date in your blogheader has a fixed format
// (e.g. "Tuesday, March 16, 2004") you may want to use
// another date format, accustomed to *your* preferences.
// This script enables you to apply pretty much any date
// format to your blogheader you like.
//
// Here's how it works:
// The script collects all blogheaders and applies to them
// a format you define by changing the value of the variable
// "dateFormatStr" in the code below. Currently that value is
// set to 'ddd, mm/dd/yy', which will result in a date that
// looks like this: 'Tue, 03/16/04'. If you want to use slashes
// instead of divisions as date separators, go right ahead; you
// can even add HTML to the date format string if you like!:-)
//
// =================
// listing of available constants (using the date
// "Tuesday, March 16, 2004" as an example):
//
// dd = 16
// ddd = Tue
// dddd = Tuesday
//
// mm = 03
// mmm = Mar
// mmmm = March
//
// yy = 04
// yyyy = 2004
//
// =================
//
// You can use any combination of the above constants. Examples:
//
// 'mm/dd/yyyy' will result in '03/16/2004'
// 'mmm dd, yy' will result in 'Mar 16, 04'
// 'mm-dd-yy (dddd)' will result in '03-16-04 (Tuesday)'
// '{ ddd, mmm dd, yyyy }', will result in '{ Tue, Mar 16, 2004 }'
//
// Get the general idea?;-)
//
// Copy this entire code and paste it in the webstats box of your
// Look and Feel page.
//
// You're free to use this script as long as this comment remains
// intact. Future modifications allowed if due credit is given.
//

function formatEntryDate()
{
    // ***** adjust the dateFormatStr below as you see fit
    // ===================================================
    dateFormatStr = '[ dddd, dd.mmmm.yyyy ]';
    // ===================================================
    

    function getMonthNr(sMonth)
    {
        months = new Array(
            "Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
        for (var n = 0; n < months.length; ++n)
        {
            if (months[n] == sMonth)
            {
                if ( n + 1 < 10)
                    return '0' + (n + 1).toString()
                else
                    return (n + 1).toString();
            }
        }
    }

    allDivs = document.getElementsByTagName('div');
    for (var i = 0; i < allDivs.length; ++i)
    {
        if (allDivs[i].className == 'blogheader')
        {
            newDateFormat = dateFormatStr;
            
            // day
            entryDate = allDivs[i].innerHTML;
            dayLong = entryDate.substr(0, entryDate.indexOf(','));  // dddd
            dayShort = dayLong.substr(0, 3);                        // ddd  
            tempStr = entryDate.substr(dayLong.length + 1);
            dayNr = tempStr.substr(tempStr.indexOf(',') - 2, 2);    // dd
            newDateFormat = newDateFormat.replace('dddd', dayLong);
            newDateFormat = newDateFormat.replace('ddd', dayShort);
            newDateFormat = newDateFormat.replace('dd', dayNr);

            // month
            monthLong = tempStr.substr(1, tempStr.indexOf(',') - 3);// mmmm
            monthShort = monthLong.substr(0, 3);                    // mmm
            monthNr = getMonthNr(monthShort);                       // mm
            newDateFormat = newDateFormat.replace('mmmm', monthLong);
            newDateFormat = newDateFormat.replace('mmm', monthShort);
            newDateFormat = newDateFormat.replace('mm', monthNr);

            // year
            yearLong = tempStr.substr(tempStr.indexOf(',') + 2);    // yyyy
            yearShort = yearLong.substr(2);                         // yy
            newDateFormat = newDateFormat.replace('yyyy', yearLong);
            newDateFormat = newDateFormat.replace('yy', yearShort);

            allDivs[i].innerHTML = newDateFormat;
        }
    }
}
formatEntryDate();
</script>
<!-- end code provided by createblog.com -->

<!-- begin code provided by createblog.com -->
<style type='text/css'>
.mainleft { display:none; }
</style>
<!-- end code provided by createblog.com -->

This post has been edited by rids_score: Feb 19 2006, 10:33 PM