Friends in a DIV layout

MySpace Website Tutorials | Submited Nov 19, 2007

Written by:

Notes;

1.Best used with the hide-everything code from FeedTheDragon.net.
2.I'll add to it later to include the friends names, But it kinda looks sloppy so I did this first.
3.All codes go inside your Style Tags
4.I'm not done messing around with it, A few more options, or "tweaks" would be nice. =/

non-scrolling

This simply shows the friend list, it doesn't scroll, just kinda sits there.

.7F{'squash' the friends, from http://abrax.us}
td.text table table table, td.text table table td {width:0; padding:0}

.7F{Customize the friend space text}
.orangetext15{background-color:0a0a0a; color:333333; display:block; font-family:Geneva; text-transform:uppercase;}
.bText{color:333333;}
.redBText{font-size:25px; color:FF0000;}

.7F{shrink the pictures and hide the text to avoid constant editing}
.friendSpace a img{height:70px; width:70px; padding:0; border:0; margin-bottom:-10px}
.friendSpace a{font-size:0; letter-spacing:-30px}

.7F{position the actual friends}
.friendSpace{
position:absolute;
left:50%;
top:200px;
margin-left:-200px;
}

scrolling

The last section of the code is all that needs modifying for that;

.7F{'squash' the friends, from http://abrax.us}
td.text table table table, td.text table table td {width:0; padding:0}

.7F{Customize the friend space text}
.orangetext15{background-color:0a0a0a; color:333333; display:block; font-family:Geneva; text-transform:uppercase;}
.bText{color:333333;}
.redBText{font-size:25px; color:FF0000;}

.7F{shrink the pictures and hide the text to avoid constant editing}
.friendSpace a img{height:70px; width:70px; padding:0; border:0; margin-bottom:-10px}
.friendSpace a{font-size:0; letter-spacing:-30px}

.7F{position the actual friends}
.friendSpace{
position:absolute;
left:50%;
top:200px;
margin-left:-200px;
display:block;
overflow:auto;
height:300px;
width:400px;
}

It took me about 30 minutes to have the display:block; revelation again, lolz.