FriendsterAddictz
Would you like to react to this message? Create an account in a few clicks or log in to continue.



 
HomeHome  portal1portal1  GalleryGallery  SearchSearch  Latest imagesLatest images  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 topic View next topic Go down 
Author Message
- ashdesignz -
Administrator
- ashdesignz -

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



CSS BOX Positioning "Simplified Explanation" Vide
PostSubject: CSS BOX Positioning "Simplified Explanation"   CSS BOX Positioning "Simplified Explanation" Icon_minitimeMon 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;

CSS BOX Positioning "Simplified Explanation" Boxpositioning

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

CSS BOX Positioning "Simplified Explanation" Overflow



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 top Go down
mc_dlp13
Promoter
mc_dlp13

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



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

hhahha ok ok

thank you thank you
manung ash
Back to top Go down
nimiel
Junior Member
nimiel

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



CSS BOX Positioning "Simplified Explanation" Vide
PostSubject: Re: CSS BOX Positioning "Simplified Explanation"   CSS BOX Positioning "Simplified Explanation" Icon_minitimeThu 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 top Go down
[ahnjje]
Moderator
[ahnjje]

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



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

i've edited some parts of ur posts kase inde makita lol.
Back to top Go down
- JoyChristian -
Moderator
- JoyChristian -

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



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

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

@nimieL - media box.. use .scrapbook{ CSS PROPERTIES; }
Back to top Go down
Sponsored content








CSS BOX Positioning "Simplified Explanation" Vide
PostSubject: Re: CSS BOX Positioning "Simplified Explanation"   CSS BOX Positioning "Simplified Explanation" Icon_minitime

Back to top Go down

CSS BOX Positioning "Simplified Explanation"

View previous topic View next topic Back 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 -