Help!! move scrollable comments and friend section, I'm having trouble moving the scrollable freinds & comments se Options

[oblivionguitaris...]

I'm having trouble moving the scrollable top friends/comments section into a picture frame (it's a picture within a flash object background).

It's driving me crazy. Any help would be appreciated. (the picture frame that the scrollable comments/friends goes into is scrolled right & has instructions on it, in red and blue large text telling you where everything goes... you'll get it if you look at it)

Here's the link to the sight so you can see what it looks like as it is now: www.myspace.com/thuglifepb

and here's the coding I have so far..

In the about me section I have:

CODE

<div class="banner">
..</div>

<style type="text/css">
.banner {width: ##px; height:##px;position: absolute;margin-left: -405px;left: 50%;top: 0px;}
body {margin-top:670px;}
</style>

<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="700" width="2700" data="http://static.wix.com/client/app.swf">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://static.wix.com/client/app.swf" />
<param name="quality" value="high" />
<param name="flashvars" value="pageId=8KPaN3gkyHU-a&embedFormat=normal&embedID=Zyeyt_UTLMx4Drb4Xy0O1Qb4NaOCZiRs6sPkDA2B_kSa6zn_ItQTxH4LCjoHm_iUa&partner_id=WMGs4POB1ko-a" />
<param name="base" value="http://static.wix.com" />
<param name="wmode" value="transparent" />
<param name="scale" value="noscale" />
<param name="salign" value="tl" />
</object>




<style type="text/css">
body { position:relative; left:0px; top:0px; z-index:0; background-color:000000; } .bodyContent { background-color: 000000 }

a:link, a:visited, .redtext, .redbtext, a.redlink:link, a.redlink:hover { color:333333; }
a:link:hover, a:visited:hover { color:666666; }

.blacktext10, .orangetext15, .whitetext12, .nametext, .btext, table.friendsComments tr td { color:333333; }

object, embed { visibility:visible; position:absolute; top:1032px; left:50%; right:50%; margin-left:390px; z-index:9; }

.comments embed, .comments object { display:inline; visibility:visible; position:relative; top:0px; margin-left:0px; left:0px; right:0px; }

.navbar{visibility:visible;} .navigationBar font {visibility:hidden;} table,tr,td{background-color: transparent;border-style: none;} .navigationBar tr td { background-color:transparent; } .interestsAndDetails, .userProfileDetail, .userProfileURL, .contactTable, .profileInfo, .latestBlogEntry, .extendedNetwork, .orangetext15 { display:none; }

table.friendsComments img {max-width:300px; height:auto;} .friendsComments font {visibility:visible;} table tr tr td img { border-color:4e607b; }
table tr td div div a.text {visibility:hidden; border:0px!important; background-color:transparent;}

object, embed { visibility:visible; position:absolute; top:-35px; left:50%; right:50%; margin-left:-650px; z-index:1; }
</style>

and in the "I'd like to meet" section:

CODE

<div class="comments" style="overflow:auto; overflow-x:hidden; height:356px; width:500px; position: absolute; top:200px; left:50%; right:50%; margin-left:-300px; z-index:7; background-color:transparent;"><div style="margin-left:20px;"><div style="margin-top:-50px; margin-bottom:10px; margin-left:10px;"><a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTM2OTYzMjc1Mg=="><b>Add Comment</b></a></div><table><tr><td><table><tr><td>

<MOVE ALL HTML CODES (IMAGES/WIDGETS/SLIDESHOWS/VIDEOS) BELOW THIS CODE />

<div style="width:0px; margin-top:15px;"><img src="http://i200.photobucket.com/albums/aa62/lovemyflash/FlickrSpace-BETA/addcomment.gif" /><br/>
<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment" style="margin-top:0px;">
<input type="hidden" name="friendID" value="369632752">
<textarea name="f_comments" rows="7" style="width:448px; color:191816;"></textarea><br />
<div style="text-align:right;">
<input name="submit" type="image" id="submit" src="http://i200.photobucket.com/albums/aa62/lovemyflash/FlickrSpace-BETA/sendcomment.gif" alt="Send Comment" align="top" /></div></form></div>

Reason for edit: [codebox]'s - Thomas

[miyashu]

for the div for your comments, all you have to do is play around with the margin-left and top values until it's in the right spot. or, does it not move at all?

[oblivionguitaris...]

for the div for your comments, all you have to do is play around with the margin-left and top values until it's in the right spot. or, does it not move at all?

I've tried messing with the margin-left, but every time I get the friends/comments box in the right place, the flash background getts cut off on the left side of the page.. Any solutions??

[Relentless]

Move it to the far right?

Then, instead of using margin-left.

use.....

margin-right: 0px;

It will go to the very far right of any browser.

[oblivionguitaris...]

Move it to the far right?

Then, instead of using margin-left.

use.....

margin-right: 0px;

It will go to the very far right of any browser.

I'm not sure which margin right is supposed to make it work like that, cuz I tried and the one I used made it even further to the left (set at margin-right: 0px;)

Would it be possible for you to copy and paste my code from above, and put it in for me??

[fixtatik]

this should work: in your "who i'd like to meet section," in the div called "comments," remove this code:

CODE

style="overflow:auto; overflow-x:hidden; height:356px; width:500px; position: absolute; top:200px; left:50%; right:50%; margin-left:-300px; z-index:7; background-color:transparent;"

between your style tags in your "about me," add this:

CODE

.comments { overflow-y:auto; overflow-x:hidden; width:475px; height:520px; position:absolute; left:50%; margin:-198px 0 0 652px; _margin:-865px 0 0 655px; z-index:7; background-color:none; }

[oblivionguitaris...]

this should work: in your "who i'd like to meet section," in the div called "comments," remove this code:

CODE

style="overflow:auto; overflow-x:hidden; height:356px; width:500px; position: absolute; top:200px; left:50%; right:50%; margin-left:-300px; z-index:7; background-color:transparent;"

between your style tags in your "about me," add this:

CODE

.comments { overflow-y:auto; overflow-x:hidden; width:475px; height:520px; position:absolute; left:50%; margin:-198px 0 0 652px; _margin:-865px 0 0 655px; z-index:7; background-color:none; }

Thanks.. but it didn't fix it. That just moved the comments down below the add banner.. I need them to be in the frame on the far right (above the add banner)

If you have any more suggestions, PLEASE!! haha I've been trying to get this done for forever now.

[fixtatik]

your coding is messy, so it's going to be difficult to actually know what you're seeing. you're using a body margin of 670px (why might i ask?), so in every browser except for internet explorer, there's a huge area above your layout.

in the ".comments" part of the style sheet, mess with the margins until you get it to be where you want it. margin:-198px 0 0 652px; is going to adjust the positioning in firefox, safari and opera. _margin:-865px 0 0 655px; will adjust the positioning in internet explorer. it works like this:

margin:TOP RIGHT BOTTOM LEFT;

if it's too far from the top, lower the top margin. if it's too far to the left, lower the left margin. if it doesn't work no matter what you change, then there's a poorly coded section you'll need to change or remove.