for the search, my way to preload images! haha

Search for in

Friends in a DIV layout

MySpace Website Tutorials | Submited Nov 19, 2007

Written by: User Picture..

How to position only the friends in a div layout.

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.

tags Tags: div scrolling friends without comments

3Thumbs up  Thumbs down0

Related Tutorials
How to Create Scroll Boxes
Hide Default Layout
Hide Friends
Hide Comments
Simple div / overlay tutorial
Marquee comments
Hiding tables on your profile
Div Boxes
Friends in a DIV layout
Comment Dividers
Scrolling comments
All Members Space:Make Friends Here!
Poster Friends Space
Adding the bottom links to an overlay
DIV layout tutorial - version 2008
Hiding subscribe to blogs, view all friends, and comment links
How to get Header images in a Friendster Layout
No Comments Found
Sorry, you have to be a member to comment tutorials