HomeHome  portal1portal1  GalleryGallery  SearchSearch  Link Rotation  Donate  RegisterRegister  Log inLog in  


Global Announcement

FriendsterAddictz Forum is on-search for Moderators. For more information, click THIS.
Please promote FriendsterAddictz Forum.


CSS BOX Positioning "Simplified Explanation"

View previous topicView next topicGo down
Author Message
- ashdesignz -
Administrator
avatar

Male
Age : 32 Registration date : 2008-08-02 Number of posts : 33 Location : Philippines



PostSubject: CSS BOX Positioning "Simplified Explanation" Mon Aug 04, 2008 12:05 am

Pure CSS Box Positioning/ How to Relocate Boxes "simplified explanation"
original concept of switpotato of friendsterforum


permission granted by switpotato of friendsterforum

take note for
the following
CSS Properties:
Quote :

position:absolute !important;
left: ??px;
top: ??px;
width: ??px;
height: ??px;
overflow: auto !optional;



if you want your box
to be scrollable according to its
place and content,
add this code to your box
properties:
Quote :
overflow: auto;





Here's the box IDs where you wou'd
paste the codes:

Control Panel Box
Quote :
#content_0{
position:absolute !important;
left: ??px;
top: ??px;
width: ??px;
height: ??px;
overflow: auto !optional;
}

Photo Gallery Box
Quote :
#content_1{
position:absolute !important;
left: ??px;
top: ??px;
width: ??px;
height: ??px;
overflow: auto !optional;
}

Featured Friends Box
Quote :
#content_2{
position:absolute !important;
left: ??px;
top: ??px;
width: ??px;
height: ??px;
overflow: auto !optional;
}

More About Me Box
Quote :
#content_6{
position:absolute !important;
left: ??px;
top: ??px;
width: ??px;
height: ??px;
overflow: auto !optional;
}

Fan Of Box
Quote :
#content_7{
position:absolute !important;
left: ??px;
top: ??px;
width: ??px;
height: ??px;
overflow: auto !optional;
}

Group Box
Quote :
#content_8{
position:absolute !important;
left: ??px;
top: ??px;
width: ??px;
height: ??px;
overflow: auto !optional;
}

Media Box
Quote :
#content_10{
position:absolute !important;
left: ??px;
top: ??px;
width: ??px;
height: ??px;
overflow: auto !optional;
}

My Review Box
Quote :
#content_12{
position:absolute !important;
left: ??px;
top: ??px;
width: ??px;
height: ??px;
overflow: auto !optional;
}

My Blog Box
Quote :
#content_13{
position:absolute !important;
left: ??px;
top: ??px;
width: ??px;
height: ??px;
overflow: auto !optional;
}

Google Ads Box
Quote :
#content_14{
position:absolute !important;
left: ??px;
top: ??px;
width: ??px;
height: ??px;
overflow: auto !optional;
}

Meettrail Box
Quote :
#content_15{
position:absolute !important;
left: ??px;
top: ??px;
width: ??px;
height: ??px;
overflow: auto !optional;
}

Testimonials and Comment Box
Quote :
#content_18{
position:absolute !important;
left: ??px;
top: ??px;
width: ??px;
height: ??px;
overflow: auto !optional;
}

NOTE: use the following division IDs on top for precision of box relocation rather than classes.

don't use this in repositioning boxes:
Quote :

/* Control Panel */
.controlpanel

instead:
Quote :
/* Control Panel */
#content_0



How To Relocate Headers of an Individual Box:
Classes may be used in
relocating the Headers of an individual box
or hide and individual header.

example:

Quote :
/* PHOTO GALLERY HEADER */
.photos h2{
YOUR CSS PROPERTIES
}

The word h2 after classname means secondary headers,
the word h1 means primary header so h1 is used obviously in control panel box only.

Quote :
/* CONTROL PANEL HEADER */
.controlpanel h1{
CSS PROPERTIES
}

In this case, you may now edit
different properties of individual
headers.

For different classes:

Friendster Div IDs/Classes
permission granted by xavierkym of FriendsterTalk

These are the div ids (CSS) :

Quote :
/*-- Control Panel --*/
#content_0
Quote :

/*-- Photo Gallery --*/
#content_1
Quote :
/*-- Featured Friends--*/
#content_2
Quote :
/*-- More About --*/
#content_6
Quote :
/*-- Fan of Box --*/
#content_7
Quote :
/*-- Groups --*/
#content_8
Quote :
/*-- Media Box --*/
#content_10
Quote :
/*-- Reviews --*/
#content_12
Quote :
/*-- Blogs --*/
#content_13
Quote :
/*-- Google Ads--*/
#content_14
Quote :
/*-- Meettrail Box--*/
#content_15
Quote :
/*-- Testi & Comments*--/
#content_18


example:

Quote :
/* Control Panel Box */
#content_0{
font-color: #ffffff;
}





For Friendster Classes

Quote :
/*-- Control Panel --*/
.controlpanel

/*-- Photo Gallery --*/
.photos

/*-- Featured Friends--*/
.friends

/*-- More About --*/
.moreabout

/*-- Fan of Box --*/
.fanof

/*-- Groups --*/
.groups

/*-- Media Box --*/
.scrapbook

/*-- Reviews --*/
.reviews

/*-- Blogs --*/
.blogs

/*-- Meettrail Box--*/
.meettrail

/*-- Testi & Comments --*/
.publiccomments

NOTE: If you want to
relocate the headers of individual
boxes, use classes that's why i post
the classes here:

example:
Quote :
/* PHOTO GALLERY HEADER */
.photos h2{
YOUR CSS PROPERTIES
}




Enjoy making layouts without
confusing Javascripts.


Click Here for Sample Preview


* Use friendster classes when in repositioning to make it applicable in both internet explorer and mozilla firefox.

Credits:
DIV ID's permission granted by Xavierkym of FriendsterTalk and
CSS Box Positioning by switpotato of FriendsterForum

simplified explanation by ashdesignz of other forum
Back to topGo down
View user profile
mc_dlp13
Promoter
avatar

Male
Age : 27 Registration date : 2008-08-05 Number of posts : 210 Location : LoS aNgeLes , caLi



PostSubject: Re: CSS BOX Positioning "Simplified Explanation" Tue Aug 05, 2008 3:28 am

hhahha ok ok

thank you thank you
manung ash
Back to topGo down
View user profile
nimiel
Junior Member
avatar

Male
Age : 23 Registration date : 2008-03-09 Number of posts : 186 Location : Universe
Character sheet
Tagline: Proud Member



PostSubject: Re: CSS BOX Positioning "Simplified Explanation" Thu Sep 18, 2008 8:31 pm

hey. uh, how about the names of the others like the mediabox? sorry, not really an expert in codes.
Back to topGo down
View user profile
[ahnjje]
Moderator
avatar

Female
Age : 24 Registration date : 2008-08-15 Number of posts : 47 Location : duon oh! ;)



PostSubject: Re: CSS BOX Positioning "Simplified Explanation" Sun Sep 28, 2008 3:42 pm

i've edited some parts of ur posts kase inde makita lol.
_________________
i may have failed...
but i have LOVED you from the start...
Back to topGo down
View user profile
- JoyChristian -
Moderator
avatar

Male
Age : 25 Registration date : 2008-07-14 Number of posts : 611 Location :



PostSubject: Re: CSS BOX Positioning "Simplified Explanation" Sun Sep 28, 2008 3:50 pm

@ anje.. pLis use engLish Language in p0sting.. tnx!

@nimieL - media box.. use .scrapbook{ CSS PROPERTIES; }
Back to topGo down
View user profile
Sponsored content








PostSubject: Re: CSS BOX Positioning "Simplified Explanation"

Back to topGo down

CSS BOX Positioning "Simplified Explanation"

View previous topicView next topicBack to top
Page 1 of 1

Permissions in this forum: You cannot reply to topics in this forum
FriendsterAddictz :: FRIENDSTER SECTION :: Friendster Codes and Tutorials -