Help needed with band layout Options

[dollywood]

Hi there

i was wondering if you could help me with a couple of issues with a site im doing - the address is www.myspace.com/tgvisualsbands

first off you can see from the page that the videos on the left side overlap the comments how can i make the comments move down?

also i wanted to move the tgvisuals number of friends over to the right more how do i do that?

here is my code:

CODE

<style>
.profileWidth table { margin-bottom:800px; width:800px; }
.rail { display:none; }
.gap {
background:url() top left no-repeat;
width:800px; height:800px;
position:absolute; top:0; left:50%;
margin:0px 0 -400px -800px;
</style>

<div class="gap"></div>

<style>

.orangetext15 {display: none;}
.whitetext12 {display: none;}

table table div embed, table table div object {position:relative; z-index:9;}

table, tr, td{
background-color:transparent;
border-style:none;
}

body {
background-color: ffffff;
background-image:url();
background-position: top center;
background-repeat: no-repeat;
background-attachment: scroll;
}

table table table table, table table table td{
background-image:none;
background-color:transparent;
}

body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{
color:000000;
font-size:9pt;
line-height: 10pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:sans-serif;
}

strong, .lightbluetext8, .btext, .redtext, .redbtext{
color:4b8780;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:sans-serif;
}

a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.man font, a.redlink, a.redlink:visited{
color:4b8780;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:sans-serif;
}

a {
color: 4b8780 !important;
font-family: sans-serif !important;
}

a:hover {
color: 666666 !important;
font-family: sans-serif !important;
}

a:hover, a:hover font, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.man:hover font, a.searchlinkSmall:hover, a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover{
color:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:normal;
text-transform:none;
font-family:sans-serif;
}

table table table table, div table table table{
border-style:none;
}

</style>

<style>

.topbanner {position:absolute; left:50%; top:173px; margin-left:-400px; _margin-left:-400px; width:800; height:752px; z-index:1;}

.shows {position:absolute; top:1380px; left:50%; margin-left:-55px; _margin-left:-65px; width:325px; height:40px; z-index:1;}

.toptext {position:absolute; left:50%; top:177px; margin-left:-500px; _margin-left:-500px; width:1000; height:206px; z-index:2;}

.ss1 {position:absolute; left:50%; top:1020px; margin-left:-390px; _margin-left:-390px; width:325px; height:350px; z-index:1;}

.ss2 {position:absolute; left:50%; top:1540px; margin-left:-380px; _margin-left:-390px; width:325px; height:350px; z-index:1;}

.ss3 {position:absolute; left:50%; top:1400px; margin-left:-265px; _margin-left:-390px; width:325px; height:350px; z-index:1;}

.ss4 {position:absolute; left:50%; top:1440px; margin-left:-310px; _margin-left:-390px; width:325px; height:350px; z-index:1;}

.ss5 {position:absolute; left:50%; top:1480px; margin-left:-320px; _margin-left:-390px; width:325px; height:350px; z-index:1;}

.ss6 {position:absolute; left:50%; top:2080px; margin-left:-390px; _margin-left:-390px; width:325px; height:350px; z-index:1;}

.ss7 {position:absolute; left:50%; top:1590px; margin-left:-390px; _margin-left:-390px; width:325px; height:350px; z-index:1;}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry{
background-color: transparent !important;
color: !important;
width: 450px !important;
border-collapse: collapse !important;
margin-bottom: 0 !important;
margin-left: 0px !important;
margin-right: 0 !important;
margin-top: 15px !important;
padding: 0 !important;
table-layout: fixed !important;
position: relative !important;
background-image: url(http://i378.photobucket.com/albums/oo222/tgvisuals/Hykya/hykyabandnews1.png);
background-repeat: no-repeat;
background-position: -2px 10px;
overflow: hidden;
_background-position: 0px 2px;
_margin-left: -10px !important;
_margin-top: 0px !important;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr{
display: inline;
margin: 0 !important;
padding: 0 !important;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr td{
display: block !important;
margin: 0 !important;
padding: 0 !important;
width: 449px !important;
font-family: sans-serif;
color: 000000 !important;
clear: both !important;
font-size: 0px !important;
line-height: 0px;
vertical-align: middle;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr td a{
float: right;
line-height: 35px;
color: ffffff;
padding: 0px !important;
margin: 0px !important;
padding-right: 5px !important;
position: relative;
z-index: 6;
font-weight: normal;
font-size: 10px !important;
display: block;
height: 35px;
text-transform: Capitalize;
_font-size: 10px !important;
_width:120px;
_text-align:right;
_font-weight: normal;
_postion: absolute !important;
_margin-top: -4px !important;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr td span.text{
line-height: 35px;
position: absolute;
display: block;
border-bottom: 1px dotted dimgray;
border-color:;
width: 443px;
color: 000000;
padding: 0px !important;
margin: 0px !important;
padding-left: 5px !important;
z-index: 5;
font-weight: normal;
font-size: 11px !important;
height: 35px;
_font-size: 11px !important;
_margin-top: -3px !important;
_font-weight: normal !important;
_margin-left: -3px !important;
_width:449px;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr td span.btext{
display: block;
float: left;
width: 50px !important;
height: 43px;
font-size: 1px;
overflow: hidden;
color: !important;
line-height: 300px;
}


html body.bodyContent table tbody tr td table tbody tr td.text table.friendSpace tbody tr td.text table tbody tr td span.orangetext15{
display: block !important;
height: 40px !important;
width: 325px !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0px;
overflow: hidden;
background-image: url(http://i378.photobucket.com/albums/oo222/tgvisuals/Hykya/hykyathefold.png);
background-repeat: no-repeat;
color: !important;
line-height: 10px !important;
margin-top: -3px !important;
background-color: transparent !important;
}

html body.bodyContent table tbody tr td table.friendsComments {
width: 720px !important;
margin: 0 !important;
padding: 0 !important;
margin-top: 20px !important;
overflow: hidden !important;
background-color: transparent !important;
margin-left: -1px !important;
_width: 720px !important;
_margin-left: -12px !important;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0px 0px !important;
background-color: transparent !important;
height: auto !important;}

table.friendsComments tbody tr td.text table tbody tr td {
background-color: transparent !important;
height: auto !important;}

table.friendsComments tbody tr td.text table tbody tr td span.orangetext15 {
background-image: url(http://i378.photobucket.com/albums/oo222/tgvisuals/Hykya/hykyacommentssmall.png);
background-repeat: no-repeat !important;
background-color: transparent;
display: block !important;
height: 40px !important;
color: 000000 !important;
width: 325px; position: relative;
overflow: hidden;
font-size: 0px;
text-align: right;
margin-top: 30px;
line-height: 300px !important;
_width: 325px !important;
_border-left: 1px 000000 !important;
_border-right: 1px 000000 !important;
_height: 40px !important;
_margin-bottom: -1px !important;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td b {
display: block;
position: absolute;
z-index: 9;
width: 750px;
height: 15px;
line-height: 15px;
overflow: hidden;
margin: -25px 0 0 8px;
text-align: right;
padding-right: 12px !important;
color: 000000;
font-weight: normal;
font-size: 12px;
_margin: 0px 0 0 15px;
_font-size: 12px !important;
_color: 000000;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td b span.redtext {
font-weight: normal;
color: 666666;
padding: 0px 2px;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td b a {
color: 666666 !important;
font-size: 12px !important;
text-transform: none;
margin: 0 -7px 0 -8px !important;
padding: 0 9px 0 9px !important;
background-color: transparent !important;
position: relative !important;
display: inline !important;
z-index: 9;
border: none !important;
letter-spacing: 0px !important;
_font-size: 11px !important;
_margin: 0 !important;
_padding: 0 !important;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table {
overflow: hidden !important;
border: 1px 000000 !important;
border-color: 000000 !important;
width: 100% !important;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td {
background-color: transparent !important;
text-align: left;
vertical-align: top;
overflow: hidden !important;
font-size: 12px !important;
line-height: 12px !important;
text-transform: none !important;
letter-spacing: 0px;
color: 000000 !important;
margin: 0 !important;
padding: 5px 0px 5px 0px;
border-bottom: 0px 000000 !important;
border-color: 000000 !important;
_line-height: 16px !important;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td span.blacktext10 {
color: 4b8780 !important;
text-transform: None !important;
margin: 0px !important;
padding: 0px important;
display: block !important;
font-size: 12px;
font-family: sans-serif !important;
font-weight: normal;
letter-spacing: 1px;
text-align: right;
margin: 10px 10px -12px 0px !important;
width: 650px;
border-top: 1px 000000;
_margin: 12px 0px -.5em 0px !important;
_width: 650px;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td {
background-color: transparent !important;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td a {
display: block;
border: 0px 000000 !important;
border-color: 000000 !important;
border-top-style: solid !important;
border-top-width: 0px !important;
text-align: center;
text-transform: Uppercase;
padding: 8px;
font-size: 12px;
letter-spacing: 1px;
color: transparent !important;
position: relative !important;
margin-top: -3px !important;
background-color: transparent;
_margin-top: -6px !important;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td a {
display: block !important;
color: 4b8780 !important;
margin: 0px !important;
padding: 10px 10px 0px 10px !important;
text-transform: none !important;
margin-bottom: -15px !important;
font-size: 12px !important;
line-height: 11px !important;
border: none !important;
letter-spacing: 0px !important;
text-align: center !important;
width: 110px !important;
overflow: hidden !important;
font-weight: normal;
_width: 124px !important;
_margin-bottom: -15px !important;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td a img {
visibility: visible !important;
border: 0px 008080 !important;
border-color: 000000 !important;
padding: 0px !important;
margin: 0px !important;
margin-top: -12px !important;
width: auto !important;
_margin-left: 0px;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td img.ImgOnlineNow {
display: block;
position: relative;
margin: 15px 0 -20px 26px !important;
border: none !important;
_margin: 15px 0 -20px 21px !important;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td img {
max-width: 100%;
margin: 0px !important;
margin: 0px 0px 12px 0px !important;}

table table table table td.text span.whitetext12 {
position: relative;
top: 0px;
display: block;
left: 0px;
visibility: visible;
width: 1px;
height: 10px;
text-indent: -999999px;
background: transparent url() bottom left no-repeat;
}


</style>

<div class="topbanner">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Hykya/hykyams-1.jpg" />
</div>

<div class="shows">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Hykya/hykyashows1.png" />
</div>

<div class="toptext">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Hykya/hykyams1000.png" />
</div>

<div class="ss1">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Hykya/topleftpic3.jpg" />
</div>

<div class="ss2">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Hykya/hykyabandmembers2.png" /></div>

<div class="ss3"><a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJZD00MzMwODY1NzA=">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Hykya/hykyaadd.png" /></a></div>

<div class="ss4">
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZVYzJmZyaWVuZElEPTQzMzA4NjU3MA=="><img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Hykya/hykyamessage.png" /></a></div>

<div class="ss5">
<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTQzMzA4NjU3MA=="><img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Hykya/hykyacomment1.png" /></a></div>

<div class="ss6">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Hykya/hykyavideos.png" /><br />
<center><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="265" width="320">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/n-baI6YCMSw&hl=en&fs=1&" />
<param name="wmode" value="transparent" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/n-baI6YCMSw&hl=en&fs=1&" height="265" width="320" wmode="transparent" />
</object></center></div>

<div class="ss7">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Hykya/bandmemberslast.png" />
</div>



<style>
table table table {visibility:hidden;}
td.text table {visibility:visible;}
</style>

<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Hykya/hykyaaboutus.png" /><br />
<center>
HYKYA have been writing together since late 2007, but have been mates for much longer. Steve and Matt attended Heathside School (Weybridge) together since '95. Matt had greasy hair and bad skin and Steve had a mushroom of curly hair. James came into play when he started working alongside Matt in a champagne warehouse some years later; the third musketeer instantly. James has the most tattoos. Besides generally mucking about, HYKYA consistantly strive to find the sound that suits all three members, this is pretty much their goal. If people like it then thats a happy bonus :)<br /></center><br />

any help would be great

thanks
dolly

Reason for edit: Please use [codebox] tags instead of [code] tags when posting longer codes. - Mike

[ZeT0]

The left side overlaps because the right side needs to move down more.
More top friends you have/more info in your about me, etc, etc the further it will move down so it wont overlap. ;)
As for the friends thing, I have no idea. Ahaha, sorry dude!
Also, next time make your background wider.
No one has a screen that small.
Hope I helped bro.

[dollywood]

thanks for your help

out of interest how big does a background have to be?

[Mickey]

For good practice, I'd say make your backgrounds at least 1680 pixels wide. Or you can make one smaller than that, but just make it so that it repeats seamlessly. To make your comments go lower, follow what ZeT0 suggested. To move the friend count over to the right, try this code:

CODE

<style>
.friendSpace .btext {padding-left:100px;}
</style>

Just adjust the value until it's where you want it.

[dollywood]

thanks for your help that code worked perfectly!

i have one more question...id like to put a info section in like this website...www.myspace.com/canterbury

how do i do that? is it a table?

thanks for all your help

dolly

[Mickey]

Yes. Here's a basic template:

CODE

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left"><b>Title</b></td>
<td align="right">Text</td>
</tr>
<tr>
<td align="left"><b>Title</b></td>
<td align="right">Text</td>
</tr>
<tr>
<td align="left"><b>Title</b></td>
<td align="right">Text</td>
</tr>
<tr>
<td align="left"><b>Title</b></td>
<td align="right">Text</td>
</tr>
<tr>
<td align="left"><b>Title</b></td>
<td align="right">Text</td>
</tr>
<tr>
<td align="left"><b>Title</b></td>
<td align="right">Text</td>
</tr>
<tr>
<td align="left"><b>Title</b></td>
<td align="right">Text</td>
</tr>
<tr>
<td align="left"><b>Title</b></td>
<td align="right">Text</td>
</tr>
<tr>
<td align="left"><b>Title</b></td>
<td align="right">Text</td>
</tr>
<tr>
<td align="left"><b>Title</b></td>
<td align="right">Text</td>
</tr>
</table>

Customize it to your liking.

[dollywood]

Hi Mike

Thanks for that really helpful

i forgot to ask how do i move my friends and comment headers they are too far over to the left?

cheers
Dolly

[Mickey]

Try this code:

CODE

<style>
.friendSpace .orangetext15 {position:relative; margin-left:-#px;}
.friendsComments .orangetext15 {position:relative; margin-left:-#px;}
</style>

Replace the pound symbols with appropriate values.

[dollywood]

thanks for all your help mike profile looks way better for it!

i had another question the white myspace music bar with shows, forums etc on is it against terms to cover that?

[Mickey]

It's not against TOS, no.