Encapsulating Style

Hello,
Maybe somebody can help me out. I am currently running rockero.com and I have had a large amount of my members request that I let them use HTML and CSS on their webpage/profile ALA MySpace.com. You can go to http://www.rockero.com/member/default.asp?username=rockero to view my profile. I was thinking of letting them do exactly what they do with their MySpace profile by letting them add the HTML and CSS in their "About Me" section. The difference between MySpace and what I want to do, is that I want to limit what they can change to only a limited space on their webpage. I don't want them to be able to change any of the top navigation or bottom navigation. I just want to let them change anything within the white background (About me, friends, Fan Club, Forums, Guestbook, Pictures, Online). Is there a way to encapsulate the code so that any CSS that they add will only apply to those areas?

I hope I was able to explain myself clearly.

Thanks,
Jose

 

I'm not sure if this is what you mean exactly, but this is how I'd do it.

Make each section editable by itself, and come up with a default stylesheet for that section. You can have more than one stylesheet for a page, so this is acceptable. e.g.

<link rel="stylesheet" type="text/css" href="pictures1.css" />
<link rel="stylesheet" type="text/css" href="aboutme1.css" />

Code (markup):

Both stylesheets will be used, so this coding standard is acceptable.

Next, give each one of your sections a containing div with a unique ID (or a table cell with the same, if you don't want to mess with your layout as much) for the purposes of being able to apply specific styles to specific sections.

e.g. One section could be "about_me", one could be "friends", etc.

This will allow you to apply individual styles to each section.

e.g.

#about_me a {
      color:  #123456;
}
#friends a {
      color:  #789ABC;
}

Code (markup):

The div coding (and the corresponding CSS) and multiple stylesheets will allow you to create individual stylesheets for individual sections and have them display properly.

The rest you should be able to take from here.

So, to get you started:

Multiple stylesheets
Unique IDs for divs (or table cells)

Hopefully, this will help you out.

 

AWD1,
Thank you. I will look into this.

Thanks,
Jose