Profilist Pal
Offline
- Quote
- Report Post
- Posted: Wed, 06 Aug 2008 01:26:26 +0000
OVERFLOW
I bet you are wondering what overflow is. Well, it's where any content too big for the section goes. It could take care of the extra content with a scrollbar, by just hiding the extra content, or even forgetting about all the extra content spilling out into the profile. Before you start, make sure you put a lot of stuff in your about.
First, let's talk about giving a section a scrollbar. I'm sure you know what a scrollbar is, it's a little bar to the right that lets you see the rest of a webpage. Well, imagine a section is a webpage, it is given a scrollbar and works the same. Here is the base of a scrolling section:
section name {
overflow : auto ;
}
Just replace 'section name' with whatever you want, and try it out at Gaiatools or even your theme override box. I suggest doing it on a mule with no other coding in it's profile to interfere with the coding. Make sure your profile is set to classic.
Well, chances are that didn't work. It's because on the default classic profile, the sections just extend to however much content is in the section. So, just tell the section to stay a certain height, let's say 100 pixels:
section name {
height : 100px ;
}
Kk, so now with those two codes, you should see a scrollbar on the section you chose. Make sure you chose the same section in each of those codes. Next, is simply hiding the extra content.
It's basically the same as scrolling overflow, except you just change one tag. Ok, take out everything in your theme override box and put this in:
#about {
overflow : hidden ;
}
Now, that probably didn't work because of extending issue with the default profiles. So, let's make it 100 pixels tall so you can understand what hidden overflow is:
#about {
height : 100px ;
}
See what hidden overflow is now? Yep, it's pretty dandy. The following is more advanced, and I am not about to explain how it works. This adds an invisible scrollbar to any section.
Requirements for this to work:
-No overflow settings for your body or #site
-An amount of content that would overflow out of the section without an overflow code
-Nothing to interfere with the selected section's overflow.
Ok, so here is the code for an invisible scrollbar:
section name {
overflow-x : hidden ;
overflow-y : auto ;
padding-right : 3000px
;}
body {
overflow-x : hidden ;
}
This brings us to something else before I'm done with the overflow code. What if you only want a vertical scroll bar [up and down] but not a horizontal scrollbar [left and right]? Well it's pretty simple. Look at what I added to this overflow code from around the top of the overflow section of the guide. The red indicates what I added:
section name {
overflow-y : scroll ;
}
Ok, now -y means that it will go up and down, -x means it will go left and right. Simple enough? I hope so.
Maybe this needs further clarification. If you want it to work form left to right, then change -y to -x. Also, you might need to hide either -x or -y so only one scrollbar will show up.
