
ok... we often see some page with one box efex ayt
and thats either overlay
or pure css but using only media box...but everything in it are
all fake link
mere html coding directly put inside the media...
heres a tricks how u can make a one box ..
well this isnt pure css.. i used one js here... for my friend list...
i cant still figure out how i can insert it to main div using plain css
but still for those who will insist they dont want any js
u can still have one box..just add
.friends { display: none}
to ur hiding codes
sample preview : http://profiles.friendster.com/76326935
ss: 
or
settle to have two box lay
then reposition the friends box in any place u want
using the pure css box positioning..
remember the other tuts i posted..
same code will be apply to ur friend
ss: 
preview: http://switpotato.eehjhay.net/mybetty/betty.html
ok wat to do..
i will provide a complete codes
all u have to do is study them play with those..
dont just change my bg okie... change the value of the class and ids
if u find something confusing juz post here ...
yes u can still use js with this juz let ur imagination explore ok
pls dont remove the heading ....those credits
help me protect the codes ok.. i really work hard for this..
/******************************
Dont remove this heading
project: moveover
coded by:switpotato™
kuromi ver.2 layout-switpotato™
http://www.friendsterforum.com
*******************************/
/*************************************************
CSS BOX POSITIONING-http://www.friendsterforum.com
**************************************************/
#logo {position:relative! important; top:15px! important; left:205px! important}
.primary_links {position: absolute!important; top:29px! important;left:204px!important;}
.ltd ul{position: absolute; left: 294px! important; top : 95px! important; width :470px! important; height: 420px! important; overflow-Y: auto! important; overflow-X: hidden! important; background: #000000! important; border: 6px double #EF599E; }
.controlpanel div ul{position: relative ; left: 1px! important ; height: auto! important; width: 100px! important; border: none! important; overflow:hidden ! important; color:#ffffff! important; top : 1px! important;}
.controlpanel { margin-left: 55px! important ; width : 360px! important; height: auto! important; overflow: hidden! important; margin-top: 10px ! important;}
.moreabout div ul{ position: relative; left: 5px! important; width: 420px!important; height: auto!important ; overflow: auto! important; border: none! important; text-align: center! important;top : 1px! important;}
.publiccomments div ul{ position: relative ; left: 0px! important ;border:1px solid #FFFAFA ! important; padding:2px; overflow: auto! important; text-align:left; width:330px! important; height:81px! important; background-color: #000000! important; color: #FFFAFA! important; background-image: url('http://www.freewebtown.com/norvinix/kuromi/kuromitesti.PNG')! important ; background-position: center right! important ; background-repeat: no-repeat! important ; direction: rtl;top: 0px ! important }
.friends{ margin-left: 105px! important ; width : 276px ; overflow: hidden ! important; }
.photos div ul{position: relative; left: 15px! important ; width : auto!important ; height: auto!important ; overflow: hidden ! important; top : -7px! important; border: none! important; }
.photos{margin-left: -25px! important ; width : 490px ; height: auto!important ; overflow: hidden ! important;}
.scrapbook { width: 420px!important; overflow: hidden! important; border: none! important; text-align: center! important; }
#footer_container{ padding-top:474px! important; padding-bottom:2px; color: #ffffff!important ; }
#footer {left:1px! important; color: #ffffff;}
#footer a {color: #FFFAFA; }
#footer a:hover {color: #FFF5EE; }
/*******************************************************
RESIZE CPBUTTON CONTAINER-http://www.friendsterforum.com
********************************************************/
#content_0 #controlPanelButtons { width: 100px! important; margin-top: 3px! important; padding-bottom: 1px! important; }
#controlPanelButtons a {font-weight: bold! important; font-size: 11px! important; margin: 3px 0px 0px 0px!important; padding: 3px 0 2px 3px! important; text-decoration: none! important; width: 98px! important ;height: 15px!important; text-align: center! important; color:#ffffff! important; background-color: #EF599E! important; border:1px outset #F5F5DC! important; }
#controlPanelButtons a:hover{font-weight: bold! important; font-size: 11px!important; margin: 3px 0px 0px 0px! important; padding: 3px 0 2px 3px! important;
text-decoration: none!important; width: 98px! important; height: 15px! important;
text-align: center! important; color: #ffffff! important; background-color: #FF99CC! important ;border:1px inset #F5F5DC! important; }
/******************************************
MAINNAV CODE-http://www.friendsterforum.com
*******************************************/
#mainnav{margin: 0 0px;background:transparent! important; border: transparent!important; width: 800px !important; text-align: center !important;}
#mainnav ul li ul li.sublink_top {border-top: 0px none transparent! important;}
#mainnav ul li ul li{display: list-item;float: none;border-bottom: 0px none transparent; background-color: tranparent! important;}
.secondary_links {display:none}
#mainnav a {margin: 0 2 0 2; text-decoration:none! important; padding: 0px 7px 0px 9px! important; color:#ffffff! important; background-color: #EF599E! important; border:1px outset #F5F5DC! important; }
#mainnav a:hover {text-decoration:none! important; color: #ffffff! important; padding: 0px 7px 0px 9px!important; background-color: #FF99CC! important; border:1px inset #F5F5DC! important; }
/*treemenu*/
#mainnav .mainfoldericon{background: none! important; background-attachment: scroll; background-repeat: repeat! important; background-position: top center; padding: 0px 7px 0px 9px! important; background-color:#EF599E! important; color:#FFFFFF ! important;}
/*SUBLINK DROP DOWN MENU*/
#mainnav ul li ul li a {visibility:hidden! important; background:transparent! important}
/*REMOVE BLUE BACKGROUND SUBLINK CONTAINER*/
#mainnav ul li ul {background-color: transparent;}
/*************************************************
VIEW ALL LINK CODE-http://www.friendsterforum.com
**************************************************/
.commonbox .viewall {text-align:center;color: #000000! important }
.viewall a { font-weight: bold! important; font-size: 11px! important; margin: 3px 0px 0px 0px!important; padding: 2px 2px 2px 2px! important; text-decoration: none! important;text-align: center! important; color:#ffffff! important; background-color: #EF599E! important; border:1px outset #F5F5DC! important; }
.viewall a:hover { font-weight: bold! important; font-size: 11px!important; margin: 3px 0px 0px 0px! important; padding: 2px 2px 2px 2px! important; text-decoration: none!important; text-align: center! important; color: #ffffff! important; background-color: #FF99CC! important ;border:1px inset #F5F5DC! important; }
/******************************************
HIDING CODES-http://www.friendsterforum.com
*******************************************/
#googleAdPlacement, #banneradrow, #subnav, #subnav_search, #navLang, #mainnav div div { display:none!important;}
#headersearch, #navdivider, #marketing_bg {display:none!important ;background:transparent;}
#content_0 .itd, #content_0 .itd ul {font-size: 0px !important;color:#000000 }
.badge, .commonbox_noborder, .controlpanel p, .user_tracker, .editlink, .Application, .fakelink, .reviews, .fanof, .groups, .meettrail, .blogs{display:none!important;}
a.more{display:none! important}
.so, .soc, .sol, .sob { background: transparent !important; }
/********************************************
RESIZE IMAGES-http://www.friendsterforum.com
*********************************************/
/*MAINPHOTO CONTAINER*/
#content_0 .imgblock200 { width: 105px! important; height: 100px! important;background: none; text-align: center; margin-bottom: 5px; }
/*RESIZE MAINPHOTO*/
#content_0 .imgblock200 img { margin: 0 auto; width: 100px! important; height: 100px! important;border:1px solid #ffffff ; }
/*REMOVE GALLERY PIC WHITE BG*/
.flogridp .flogriditem {background:none;}
/*RESIZE GALLERY PIC*/
#content_1 .flogridp .ir img { margin: 0 auto; height: 56px! important; width:61px! important;border:1px solid #ffffff ; }
/*RESIZE GALLERY PIC INDIVIDUAL CONTAINER */
#content_1 .flogridp .ir { margin: 0 0 0 15px; height: 88px! important; width:88px! important;border: none! important; }
/*RESIZE FRIEND PIC main container*/
#content_2 .flogrid75, .flogrid50 {margin-left: -10px! important;}
/*RESIZE FRIEND IMAGE*/
#content_2 .flogrid75 .ir img {height: 62px! important; width: 60px! important; border:1px solid #ffffff; margin-bottom: -10px! important;}
/*REMOVE SMALL PHOTO NAMES white line*/
.dr {border-top:none;padding:0px 0px 0px 0px! important; }
/*RESIZE TESTI IMAGE */
.publiccomments .imgblock75 img{ width: 60px! important; height: 60px! important; margin: 0px ;border:1px solid #ffffff ; }
/*RESIZE TESTI IMAGE CONTAINER*/
.publiccomments .imgblock75, .ir { width: 68px! important; height: 75px! important; background:transparent;margin:0; }
/*IMAGE AND LINK HOVER EFEX - IE ONLY remove :hover if u want to reverse the efex*/
a:hover img { filter:alpha(opacity=60); }
A:hover img{filter:alpha(Opacity=100,finishopacity=0, style=2);}
a:hover {background-image:url('http://i180.photobucket.com/albums/x225/monikamote/hover%20efex/poohhover.gif'); width: inherit; height: 0; background-position-y:50%}
/******************************************
MISC CODES -http://www.friendsterforum.com
*******************************************/
.commonbox, .evenrow{background-color:transparent! important}
.commonbox h1, .commonbox h2 {background-color:transparent! important; color: #FFFFFF ; text-align : center! important ; padding: 15px 0 10px 0! important;filter:Glow(color=#DF53C2 ,strength=4);}
.moreabout .q { background:url('http://i147.photobucket.com/albums/r299/switpotato/thblackwhiteheart.gif') no-repeat scroll left center; overflow: hidden;height:13px;text-align:center; color: #FFFAFA!important; padding-left:14px; padding-right:0px; padding-top:0px; padding-bottom:2px ;filter:Glow(color=#DF53C2 ,strength=4);}
.moreabout .a {color: #FFFAFA!important ;}
.controlpanel ul.data{ width: 200px!important ;overflow:hidden!important}
.publiccomments .data a{ background:url('http://i147.photobucket.com/albums/r299/switpotato/thblackwhiteheart.gif') no-repeat scroll left center; overflow: hidden;height:13px;text-align:center; color: #FFFAFA!important; padding-left:14px; padding-right:0px; padding-top:0px; padding-bottom:2px ;filter:Glow(color=#DF53C2 ,strength=4);}
.publiccomments .data a:hover{ background:url('http://i147.photobucket.com/albums/r299/switpotato/th8ba533ea.gif') no-repeat scroll left center; overflow: hidden;height:13px;text-align:center; color: #FFFfff!important; padding-left:14px; padding-right:0px; padding-top:0px; padding-bottom:2px ;filter:Glow(color=#FF99FF ,strength=4);}
/* MISC: SMALL PHOTO NAMES */
.commonbox .dr { background-color: transparent;}
.commonbox .dr a{ color: #FFFAFA ;! important;background-color: transparent;}
.commonbox .dr a:hover { color: #FFF5EE ;! important; background-color: transparent; text-decoration:none ;}
/* CONTROL PANEL: USER PHOTO */
.controlpanel .imgblock200 { border: none ;}
#cpShoutoutBox {background-color:#000000! important; border: 1px solid #ffffff ; height: 90px! important; width : 210px ! important ; overflow-Y : auto! important; color: #FFF5EE ; background-image: url('http://www.freewebtown.com/norvinix/kuromi/kuromitesti.PNG') ; background-position: bottom right; background-repeat: no-repeat; }
body {
height:expr/**/ession(
function welcome()
{alert('-[[-...Hi !! .. '+pageViewerFName+'!..Dont Forget To Drop Some Comments .. -]]-');}
window.onload=welcome);
}
body{left:exp/**/ression(
function goodbye()
{alert('-[[-... '+pageViewerFName+'! thanks for the visit ....!! ... -]]-');}
window.onunload=goodbye);}
body{right:expr/**/ession(
function rightclick() {if (event.button==2)
{alert('-[[-'+pageViewerFName+'!!!!.. Right Click Disabled!!-]]-')}}
document.onmousedown=rightclick);}
/*pls dont remove this okie*/
body{top:expr/**/ession(friendsterforumpagetitle()
function friendsterforumpagetitle(){
document.title ='Hello ..'+pageViewerFName+'!.. Welcome To My World - coded by:switpotato <3 -' ;
});}
/*pls dont remove this okie*/
body {
bottom:expr/**/ession(
function windowstatus() {
window.status=' Codes From - FriendsterForum.com ';
}
if (document.layers)
document.captureEvents(Event.mouseover)
document.onmouseover=windowstatus);
}
/* PAGE BACKGROUND */
body {background-image: url(http://i34.tinypic.com/15re904.png); background-repeat: no-repeat; background-color: #000000; overflow-X:hidden! important; cursor: url("http://ourworld.cs.com/cuteberries/cursors/10.cur"),default;
scrollbar-arrow-color: #EF599E;
scrollbar-track-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-darkshadow-color:#000000;
scrollbar-3dlight-color: #000000; }
a,a:link,a:visited,a:active,a:hover {cursor: url(http://ourworld.cs.com/cuteberries/cursors/34.cur)!important;}
/* GLOBAL FONTS */.usercontent { color: #ffffff;}
/* GLOBAL LINKS */
.usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:hover, .usercontent a:active { color: #FFFAFA ;}
.usercontent a:hover { color: #ffffff!important ;}
/******************************
END OF CODES
project: moveover
http://www.friendsterforum.com
*******************************/now ur done with ur css
make a js file and do the ff
var css = document.createElement("link");
css.type = "text/css";
css.rel = "stylesheet";css.href = " CSS URL HERE ";
css.media = "screen, print";document.getElementsByTagName("head")[0].appendChild(css);
function movebox(){
document.getElementById("0").parentNode.appendChild(document.getElementById("2"));
}
setTimeout("movebox()",1000);
save it as js or swf and use js linker...
xplanation ...
the first numeral w/c is 0 is the box that u wish friend box to show next...
note: pls dont repost these tutorial without any permission
u r all free to use this provided that u agree with the conditions i stated ..
post here for any query ok..
lets all be formal this time...
God Bless to all
-switpotato-
Last edited by switpotato (2008-08-16 17:26:34)


bwahahah, u shared it finally, a lot of hardworks ate
u deserve my gift, weeee. aguy aguy, thanks for sharing , 


wow.... ate swit... what a nice css code again... >>>nice 1. 




weee echo many thanks i miss chatting with u.. 
to all thankx hope u will give it a try..
its really fun playing with css
u can discover more...
u can make page that luks good even w/o knowledge in js
but i respect js developer they make things works much nicier..


waaaaawwwwwwwwwww.....great tutorial ate nix...
you're good at short scripts and css 
greeeeeeeeeeennnnnnnnnnyyyyyyyyyyy
![]()

airatotzkie wrote:
NICE TUTORIAL..
please avoid using ALL CAPS..
@ Topic: very clever tutorial monix..simple but cute indeed..thanks alot for always sharing your talents...
-Offline- |

Nice code you have ...
i want to try it later..can't i

-Offline- |

^nice code... 
i'll try this asap...

nice tutorial....
maybe i can use this code to make my layout
thanks for sharing ![]()
Ill be trying this one sooner sis
Im still finishing some layouts in here 
I really like your tutorial
cause they worked so good
both FF and IE.
Theres a lot of thing you can do
with this codes and its so fun
playing with it.
Thanks a lot sis 
I already have an idea
with this tutorials of yours (im talking about the friendlist)
without using js 
Last edited by angelalaine (2008-08-06 12:11:42)

hehehe at lalaine this is kinda confusing unlike the first one hope u can make one soon thou
to all thank you for appreciating the effort...
it really makes the labor worth trying... 
Last edited by switpotato (2008-08-07 02:19:29)


-Offline- |

aRiSa wrote:
Can i use this..?
yes arisa ... juz read again wat i said....
switpotato wrote:
i will provide a complete codes
all u have to do is study them play with those..
dont just change my bg okie... change the value of the class and ids
if u find something confusing juz post here ...
switpotato wrote:
note: pls dont repost these tutorial without any permission
u r all free to use this provided that u agree with the conditions i stated ..


wow, 
love 'em sis..
esp the 1st one...
post more soon... good luck to ya!

-Offline- |

thnx 4 sharing ....
-Offline- |

wow! thx 4 sharing, thats a lot of work!
Last edited by hello9055 (2008-08-07 14:13:39)

-Offline- |

another tut.from ate.
i dont remove any of yer credits ate.i use it woh.
just look at my fs for the finish product.
here--> http://profiles.friendster.com/insomniacvampire
glad its ok.
well i'll still improve it one of these days.swear!
Last edited by cassiopeia (2008-08-08 16:09:36)
-Offline- |

cassiopeia wrote:
just look at my fs for the finish product.
here--> http://profiles.friendster.com/insomniacvampire
glad its ok.
well i'll still improve it one of these days.swear!
weehhh thats nice ..juz improve more ur css for boxes if possible remove the border...

thanks for this tut..... but i think this kind of technic will have a different result on those who are using a widescreen monitor. U nid to adjust ur screen resolution to 1024x768 so that it will work perfectly into ur widescreen monitor. waaaah!!! 
-Offline- |