Welcome to Gaia! :: View User's Journal | Gaia Journals

Ok, so I recently tried to make a profile, and then it hit me. I finally know why CSS is so difficult. It's all the numbers. But, through this little tutorial, I might clear some things up....hopefully. Now, let us begin.

Positioning is a very complicated process, unless you can understand this: it's all based on the location of the header. That's right, the "extendedprofilebody" stylesheet is the header, and that also determines the positioning of your items. If you have a graphics program, such as Photoshop, positioning is much easier than it seems. If you select one corner of the page (Top left or bottom left most of the time), and drag it to where you want your picture to go, then you have your top (the height) and the left (the width.) Now, sometimes, the profiles can do very tricky things. If you are placing a picture inside the header, like I did mine, then the top positioning should be a negative value, and should be calculated from the bottom left corner of the picture. Here is an example:



That is the code to my header in my profile. As you can see, the entire background of my profile is considered the header, so therefore a lot of my top values will be negative. Such as this:



That is the code for my avatar. As you should notice, the top value is a negative number, which means it is calculated from the bottom left corner. That means that the avatar section is calculated from the header (extendedprofilebody) to avatar ratio. If your top value is positive, then the avatar would be below the extendedprofilebody image.

There are exceptions to this though, but I did not know them. It also depends on the type of positioning, whether it be relative or absolute. The majority of profiles are done with absolute positioning, simply because no matter what you add to your profile, it will always remain in that spot. Relative, however, is the exact opposite. As the name suggests, its position is relative to the content for that section. Take the comment section for instance. If you have it set to relative, when another user posts a comment on your profile, you will have to re-position it once again. So it is wise to always use absolute when making your profile. Keep that in mind.

Some sections, as you may know, use top-left, meaning they remain on the header without a negative value. Such as this:



The friends box that I have is one example of a top-left corner positioning. It uses a positive value for the top setting, so it collides with the header. It is really complicated to position a lot of things, as it is hard to tell if you need a negative or positive value for anything. Keep in mind though that the left setting should rarely ever need a negative value, if even one at all. Positioning an be a very difficult part of CSS, but the power of a graphics program stops that. I really hope you enjoyed this small tutorial, and I will be updating it as I go, as well as adding new tutorials. Take care!