[NEW] Beginner's Guide to Profile Coding

How many poll clicks can we get?

+1	100.0%	[ 579 ]
Total Votes:			[ 579 ]

[miimix]

01

page visits
ABOUT&PREPARATION - !IMPORTANT!

»»WELCOME
This is the remake of my last guide, Miimic's Guide to Profile Coding. That guide is pretty successful, but re-reading it later, I realized that I can do much better. Not only that, but the guide was incomplete, it lacked many things about the profile that I will cover in this guide. New things include custom sections and contact bars which people were asking for. I hope you guys like this one as much as you did the last!

»»PREPARATION
There are a few things you need to know before you start my guide. First off, this is a step by step guide, you must start from the very top post and move down to the later posts for it to make absolute sense. This guide teaches you like a teacher would, I assume you understand previously taught subjects and teach you more based on the new knowledge. For example, let's say your mother teaches you how to put a leash on a dog. She would assume that you understand how to put a leash on the dog and then teach you how to walk the dog. But if you were taught to walk the dog before you know how to put on a leash, it might not turn out so well. Same thing, read in order so you don't get confused, from top to bottom.

This guide only teaches you how to make Classic profiles. Classic profiles are the ones you cannot insert pictures or move boxes in. So you need to set your profile to Classic. To do this, follow the steps below ( click the numbers):
[1] [2] [3] [4]

This guide takes sort of a hands-on approach. I will ask you to put codes into a profile so you can see exactly what they do. I understand if you do not want to alter your current profile's code. If you do not feel comfortable with changing your profile code, you can make a mule (new account) to mess with. There are things floating around that lets you test out codes without a profile, such as GaiaTools and CSS Toolbar, but I find those a pain and they are not always accurate to what would actually happen to a Gaia profile. If they float your boat, go ahead, I just suggest an actual account to work on. Wherever you put your codes to test them, make SURE that there are no other codes in the code box before you begin my guide. Other codes can alter your codes, causing them not to work. It will more than likely cause confusion if you are not an experienced coder.

[miimix]

02

CONTENTS

»»POSTS 01-06: Information
-Welcome&Preparation
-Contents
-Rules&Guidelines
-Labels
-Handy Codes
-Editable Codes

»»POSTS 07-09: PreCoding
-Getting Started
-Intro2Coding
-Before You Start...

»»POSTS 10-22: Coding
-Sizing
-Positioning
-Backgrounds
-Text&Links
-Borders
-Scrolling&Overflow
-Hovering
-Contact Bar
-Custom Sections
-Layering&Opacity
-Navigation Bar
-Filter
-Cursors

»»POSTS 23-30: Other
-Hex Codes
-Handy Links
-Useful Add-Ons
-Mein Kampf
-Rules of the Profile
-Quilt
-Handy Helpers
-Common Questions

[miimix]

03

RULES&GUIDELINES

There really 'aint that many rules! Please don't break them, I can't really do anything about it if you do, and it's really not a big deal if you break them. These rules just keep the thread in more of an orderly fashion.



-Don't quote any of the quotes on the first two pages, it'll help make the load time for people posting here a lot faster! If you have had a slow computer, you know exactly how much of a pain a slow internet is.
-Keep chat mostly profile-based, I'll be pissed if I wake up one morning and find this thread moved to the Chatterbox.
-Don't be rude, it's not cool.

[miimix]

04

LABELS

This section is for your convenience when you are coding a profile. If you forget what something is called, then come here. A label is the name of a section or part of a section. Things like the About Me or the Comments are considered sections. The list includes pictures of each one. If I forgot something or one of my labels have a problem, please please please PM me. I can't find all the mistakes alone!

THE OLDSCHOOL PROFILE

___#GAIA_HEADER
______#HEADER_LEFT
______#HEADER_RIGHT

___#HEADER

___#PROFILE
______#PROFILE H2
______#PROFILE .AVATAR
______#PROFILE .CAPTION
______#PROFILE #BAR
_________#BAR #ADDBUTTON
_________#BAR #MSGBUTTON
_________#BAR #TRADEBUTTON
_________#BAR #IGNOREBUTTON
_________#BAR #ONLINEBUTTON/#OFFLINEBUTTON/#HIDDENBUTTON
______#PROFILE .ITEMS
_________#PROFILE .ITEMS IMG

___#DETAILS
______#DETAILS H2
______#DETAILS #STATS
_________#DETAILS #STATS DL DT
_________#DETAILS #STATS DL DD
______#DETAILS #INFO
_________#DETAILS #INFO DL DT
_________#DETAILS #INFO DL DD
______#DETAILS DL DD
______#DETAILS DL DT
______#DETAILS H3
______#DETAILS HR
______#DETAILS DL

___#WISHLIST
______#WISHLIST H2
______#WISHLIST .ITEMS
_________#WISHLIST .ITEMS IMG
_________#WISHLIST .DONATED
_________#WISHLIST .QUESTING
_________#WISHLIST .BOUGHT

___#ABOUT
______#ABOUT H2
______#ABOUT .LINKS

___#FRIENDS
______#FRIENDS H2
______#FRIENDS #FRIENDGROUP
_________#FRIENDS #FRIENDGROUP LI
____________#FRIENDS #FRIENDGROUP LI IMG
______#FRIENDS #FIND_FRIENDS_BANNER
______#FRIENDS .LINKS

___#JOURNAL
______#JOURNAL H2
______#JOURNAL H3
______#JOURNAL #ENTRIES
_________#JOURNAL #ENTRIES .JOURNAL-DATE

___#MULTIMEDIA
______#MULTIMEDIA H2
______#MULTIMEDIA EMBED, OBJECT

___#COMMENTS
______#COMMENTS H2
______#COMMENTS .LINKS
______#COMMENTS #ALERTS_BANNER
______#COMMENTS .CAPTION
_________#COMMENTS .CAPTION .MESSAGE
_________#COMMENTS .CAPTION:BEFORE
_________#COMMENTS .CAPTION:AFTER
_________#COMMENTS DL DT .AVATAR IMG
_________#COMMENTS .CAPTION .DATE
______#COMMENTS .CAPTION2

______#COMMENTS .CAPTION2 .MESSAGE
______#COMMENTS .CAPTION2:BEFORE
______#COMMENTS .CAPTION2:AFTER
______#COMMENTS DL DT .AVATAR2 IMG
______#COMMENTS .CAPTION2 .DATE


___#SIGNATURE
______#SIGNATURE H2

___OTHER (no images, see description in parentheses)
______A (all links)
_________A:LINK (a link that hasnt been clicked or isnt being hovered over)
_________A:ACTIVE (link that is being clicked on)
_________A:VISITED (link that has been visited by viewer)
_________A:HOVER (what the link looks like when the mouse goes on it)

[miimix]

05

HANDY CODES

This is a list of handy codes you can use in your profile. These codes are mainly codes commonly asked for, but some are here because they are clever or so commonly used in profiles, it's easier just to have it here to copy + paste. If you have any handy codes you want to share, please PM me or post it in the thread and I'll decide if it's handy enough.

Gets rid of the annoying blue line
___#content #main {border:none;}

Gets rid of the annoying black line on the right
___#content, #header {border-right:none;}

Gets rid of the "Viewing X out of X Comments" - Code from: Kayley FC
___#comments p {visibility: hidden;position: relative;top: -9999px;}#comments dl p {position: static;top: 0px;visibility: visible;}

Makes your friend's avatar like the ones in a v2 profile (square headshot) - Code from: Kayley FC
___#friends #friendGroup li img{height: 96px; width: 96px;} #friends #friendGroup li{height: 70px; overflow: auto; overflow-y: hidden; overflow-x: hidden;}

Gets rid of the interests section in the #details - Code from: Kayley FC
___#details{visibility: hidden;} #details dl{visibility: visible !important;} #details h3,#details hr {display:none;}

Centers your profile
___#site {margin-left:auto;margin-right:auto;}

Puts a background on your #header
___#extendedProfileBody #header h1 {background:url(URL HERE);}

Hides a section
___secion name {display:none}

[miimix]

06

EDITABLE CODES

This is a list of a bunch of skeleton codes to help you out on your profile journey. Just look here for a code you need and you just might find it! This is basically the Handy Codes section except you fill in the blank. Well not actually "blank", in the following codes there will be words that are in square brackets. For example, take a look at this: [section name]. It says "section name", this means you put a section's name in there. Make sure to take out the square brackets, otherwise the code won't work. Please PM me if you have any skeleton code ideas you think I should add.

»»BORDERS

Adds a border to the defined section.
__[section name] {border: [color] [width]px [style];}
_______________________________________________________________________

»»POSITIONING

Uses absolute positioning to position the defined section.
__[section name] {position:absolute;top:[number]px;left:[number]px;}

Uses margin positioning to position the defined section.
__[section name] {margin-top:[number]px;margin-left:[number]px;}

Uses relative positioning to position a defined section.
__[section name] {position:relative;top:[number]px;left:[number]px;}
_______________________________________________________________________

»»SIZING

Changes the size of the defined section.
__[section name] {height:[number]px;width:[number]px;}
_______________________________________________________________________

»»TEXT

Changes the font family, color, size, and decoration of text in the defined section.
__[section name] {font-family:[family];font-size:[number]px;text-decoration:[decoration];color:[color];}

_______________________________________________________________________

»»LINKS

Changes the links that have not been visited or are not being hovered over.
__[section name] a:link {font-family:[family];font-size:[number]px;text-decoration:[decoration];color:[color];}

Changes the links that are currently being visited by the viewer.
__[section name] a:active {font-family:[family];font-size:[number]px;text-decoration:[decoration];color:[color];}

Changes the links that have been visited by the viewer.
__[section name] a:visited {font-family:[family];font-size:[number]px;text-decoration:[decoration];color:[color];}

Changes the links when being hovered over.
__
_______________________________________________________________________

»»HOVER

When the mouse goes over the defined section, it changes how you want.
__[section name]:hover {font-family:[family];font-size:[number]px;text-decoration:[decoration];color:[color];height:[number]px;width:[number]px;background:[color];}
_______________________________________________________________________

»»BACKGROUNDS

Changes the color of the background of the defined section.
__[section name] {background:[color];}

Adds a background image to the defined section
__[section name] {background:url('[url]');}
_______________________________________________________________________

»»OVERFLOW/SCROLLBARS

Makes the defined section scroll left to right and top to bottom when required.
__[section name] {overflow:auto;}

Makes the defined section scroll top to bottom when required.
__[section name] {overflow-y:auto;}

Makes the defined section scroll left to right when required.
__[section name] {overflow-x:auto;}

Hides everything that would normally go out of the defined section.
__[section name] {overflow:hidden;}

Makes it so that the defined section doesn't scroll top to bottom.
__[section name] {overflow-y:hidden;}

Makes it so that the defined section doesn't scroll left to right.
__[section name] {overflow-x:hidden;}

Makes a section scroll top to bottom with an invisible scrollbar.
__[section name] {overflow-y:auto;overflow-x:hidden;padding-right:3000px;} body {overflow-x:hidden;}

[miimix]

07

GETTING STARTED

Hello bud, I'm glad to see you want to learn to code profiles. Coding is some complex stuff if you jump right into it. I'm not going to make you jump into the coding puddle just yet. Let's chill on the edge for a bit. First of all I want you to think of an idea for your profile. This is the first step to getting your very own profile. Maybe you want to make a Naruto themed profile, or maybe you just want a bunch of colors. Anything works really, just go on and think of a profile idea. Sketch it on a piece of paper so you don't forget how it looks. Now shoo, go on and think of a profile. Oh and make sure it's not too complex! Think simple thoughts, you got to start humble if you want to be a superstar.

Welcome back, I see you've thought of a profile idea. It looks fantastic! Now let's learn to code this thing, yes? Please read the following posts in order (top to bottom), if you skip around it gets kinda confusing.

[miimix]

08

INTRO2CODING

Ok time to get into a little bit of coding. Here, take a look at this following code:

body { background : white }

If you didn't catch that, just ignore the punctuation, only read the words. The words are "body", "background", and "white". What do you think that does? Sounds like it makes the background of the body white, huh? That it does. Now look at this code:

section name { what it is you want changed : how you want it changed }

Let's compare the two codes I've showed you:

body { background : white }
section name { what it is you want changed : how you want it changed }

See whats going on? The body would be the name of the section you refer to in the code. The background would be what it is you want changed, right? You want to change the background of the body. And HOW do you want the background changed? You want it to be white.

Pretty simple right? A profile is just a bunch of those put together. You can compare a profile with the United States. All the codes in a profile are like all the states in the United States. If you know all the states in the United States, you can put together a United States jigsaw puzzle. Well if you know all the codes you need for your profile, you can put together your profile in a snap. At this point, if you understand what I've shown you so far, profile coding is just remembering what codes do what.

[miimix]

09

BEFORE YOU START...

Before you start coding, I want you to know how to do little things in your coding. First of all, I want you to learn how to combine codes to save space and time. Take a look at these two codes and test them out in your theme box:

#about { background : green }
#about { color : white }

Notice how they are both referring to the #about section. Why don't we combine these two codes to save some time.

#about { background : green ; color : white }

Now the code is looking sexy! But that's not all. You can organize your codes even more using coding comments. Take a look at this code:

/* About Codes */
#about { background : green ; color : white }

Wait, what's this /* About Codes */ business? Well, anything in the /* */ things do not effect your profile at all. So you can add little notes like /* Dont forget to add background color to body */ or /* profile by ko12n */. Some people add little /*PROFILE BY ko12n*/ things all over their code so people who steal their profile will get busted if someone reads their code. Really just use these if you want to, it's just handy sometimes you know?

[miimix]

10

SIZING

Let's start out with a fairly simple concept, sizing your sections. Here, look at this code:

section name { width : 100px }

The most confusing thing you should see is "px". Now what in the world is a px? It stands for pixels. Pixels are the tiny little squares on your computer screen that change color to form images Pixels are the main measuring value in computers. So what that code did was make a section only 100px. To get a feeling on how much 100px is, take a look at my avatar. I'm about 100 pixels tall. This same concept goes for the height of a section.

section name { height : 100px }

There's another way to size sections, auto sizing. Now this is how it works, let's say you put a 500px picture in your about section. Your about stretches 500px to fit the image. Here's the code to make that happen:

section name { height : auto ; width : auto }

There's one last way to size sections. You can use percents to size your sections. Take a peak at this code:

section name { width: 100% ;}

This would make the section 100% as wide as the viewer's screen. So the section would stretch from end to end of the computer screen. This is useful for making little bars and stuff like the navigation bar.

__________________________

CODES FROM THIS SECTION
__________________________
section name {height:__px;}
section name {width:__px;}
section name {height:__%;}
section name {width:__%;}
section name {height:auto;}
section name {width:auto;}

[miimix]

11

POSITIONING

Ok, positioning is kinda tricky, but it soaks in after a while and it becomes a breeze. What is positioning? You may ask, well positioning is where a section is on your profile. Ok first off, take a look at this code:

section name { margin-top: 20px }

I know you probably don't understand what margin top means, so I'll explain it. Margin-top:20px means 20 pixels are between the section and the top of the profile. Look at this:

I added margin-top:20px to this little guy and he went 20 pixels away from the top of the page!

Take a peek at this code:

section name { margin-left: 20px }

Well, same thing will happen. Your section will go 20 pixels away from the left side of your profile. With margin-left and margin-top, you can put a section where ever you want!

Another type of positioning is called absolute positioning. Personally, this is my favorite. Now, first lets talk a little bit more about margin positioning (what I just explained earlier in this post). Lets say by default, your about section is around 200 pixels from the top. Now lets say you added this code:

#about { margin-top: 20px }

That moves your about section 20 pixels from the top. But the thing is, your about section was already 200 pixels from the top. So if you add an extra 20 pixels to that 200, your about becomes 220 pixels from the top, not just 20 pixels from the top like you might expect.It adds on to where the section already is, it doesn't reset the section's positioning.

That's where absolute positioning comes in! First off, to get absolute positoning to work, you must add this code:

section name { position: absolute }

This code says "Yo, I want this section to be positioned with absolute positioning" If you do not put this code, Gaia has no idea that you want absolute positioning. Ok, now I bet you're wondering what exactly absolute positioning is. Let's say you added this code:

#about { position: absolute }
#about { top: 0px }
#about { left: 0px }

Pretty scary, I know. Well break it down, put your finger over that top line so it only shows these codes:

#about { top: 0px }
#about { left: 0px }

Thats a little better, isn't it? Take a closer look at these codes. What are they saying? They are saying the about section should go 0 pixels from the top and 0 from the left. Basically shoved in the top left corner of the profile. Wait... notice anything? The default positions of the about section do not apply when you use absolute positioning! Instead of staying 200 pixels from the top, instead the about section went straight to the top.

One last type of positioning, it's called relative positioning. It's basically like margin positioning, I'm honestly not sure of the difference between the two. But I should probably cover it anyway. Take a look at this code:

#about { position: relative }
#about { top: 100px }
#about { left: 100px }

Again, it might look a little scary. Take a look at the second code, top : 100px. This code tells the section to move an extra 100px from the top. Same thing as margin positioning, it just adds onto the default position of the section. Same goes for the third line, it would move an extra 100 pixels to the left.

__________________________

CODES FROM THIS SECTION
__________________________
section name {margin-top:__px}
section name {margin-left:__px}
section name {position:absolute;top:__px;left:__px}
section name {position:relative;top:__px;left:__px}

[miimix]

12

BACKGROUNDS

Hey look, we're already at backgrounds! Backgrounds are a piece of cake to understand. First off what do you think a background is? You probably have a basic idea of what a background is. For example, this post's background color is white. If you go into the default Classic profile, you'll notice the body's background is a light blue color and all the sections have a white background.

Changing the background color of a section is pretty straight-foward. You'll understand this no problem. Oh, and why don't you put this little code in your theme box to see what it does!

#comments { background : green }

Now, take a moment to dissect this code's meaning. First, it's referring to the #comments section so obviously the comments section is going to get messed with. Hm, then it says background, must be the comments background! So what color is the comment's background going to be?

I bet you're wonder how to get an image as a background, well that is pretty simple as-well.

body { background : url('http://i234.photobucket.com/albums/ee71/Rare-Floof-Penguin/ghm.png') }

You can position your image like this:

body { background : url('http://i234.photobucket.com/albums/ee71/Rare-Floof-Penguin/ghm.png') top right }

See the underlined text? It says "top right" after your image url, guess what it does!! It moves your image to the top right of the body, which is the section being messed with in this code. Here are more positioning codes:

Top Left
Top Center
Top Right
Left
Center
Right
Bottom Left
Bottom Center
Bottom Right

As you may have noticed, that code I gave you above did not actually put your image on the top right of your body. It repeated over and over all over your background. To fix this, take a peak at the underlined:

body { background : url('http://i234.photobucket.com/albums/ee71/Rare-Floof-Penguin/ghm.png') no-repeat top right }

The effect this will do is pretty obvious, it will stop the image from repeating and plop it in the place you want it to go (the top right, in this case). There is a code to make the background image repeat, but it is pretty useless because the background image already repeats by default. So now I've showed you how to position an image, repeat an image, and change your background color. But hm, what if you want to have a background color AND an image? You may have noticed that even though you put down a background image, the background color still stayed the default light blue.

body { background : orange url('http://i234.photobucket.com/albums/ee71/Rare-Floof-Penguin/ghm.png') no-repeat top right }

Ahhhh, now that is much better. The background color is now orange, and we still have our little alien friend in the top right of our background. By the way, you should be putting these codes in your theme box to see what they do.

To make these codes work, there are a few requirements. First of all you need to have a space between your color and your url:

body { background : orange url('http://i234.photobucket.com/albums/ee71/Rare-Floof-Penguin/ghm.png') no-repeat top right }

Second, you must have a space between your url and your no-repeat:

body { background : orange url('http://i234.photobucket.com/albums/ee71/Rare-Floof-Penguin/ghm.png') no-repeat top right }

Third, your no-repeat and your positioning code must have a space between them:

body { background : orange url('http://i234.photobucket.com/albums/ee71/Rare-Floof-Penguin/ghm.png') no-repeat top right }

Notice those little quote marks between the parentheses and the actual image url? Those are NOT required, but I strongly suggest them. They help make sure that ALL internet browsers correctly read your codes.

__________________________

CODES FROM THIS SECTION
__________________________
section name {background:__}
section name {background:url('__') }
section name {background:__ url('__') }

[miimix]

13

TEXT&LINKS

I know I've said this in the beginning of pretty much every post before this, but honest to god text & links are the easiest s**t ever. Before starting this section, I assume you know what text is and I assume you know what links are. Take a look at this code:

#about { color : purple }

This code should have made the text in your about section purple. You can change "purple" to any color name and the code should change your about text to the color you want. If you want a more specific color you can replace the color name with a hexadecimal color code. Scary name, but a fantastic thing to know. Hexadecimals are the code version of any and every color recognized by a computer. The codes consist of 6 digits of 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e or f. For example, black is 000000 and white is FFFFFF.

#about { color : #FFFFFF }

This should have changed your about text to white, because the code name for white is FFFFFF. You must add a number sign in front of your color code or else Gaia will try to read "FFFFFF" as a color name and not a color code. You can see more hexadecimal codes by looking at the hex code section on page 2 or generate a custom color code here.

To change your text size, use this code.

#about { font-size : 10px }

If you test this out, you will notice that your about text shrunk to 10px. Change this number to however big you want your about text to be, the default is usually 12px.

You can change how far apart your letters are with this code:

#about { letter-spacing : 3px }

You can change how far apart your words are with this code:

#about { word-spacing : 5px }

You can change how far apart your lines of text are with this code:

#about { line-height : 18px }

You can also decorate your text. You can put lines all around it, make it blink (annoying but neat) and stuff like that.

#about { text-decoration: : underline }

This code should have given your text an underline. You can replace "underline" with any of these:

none
underline
overline
line-through
blink

This code makes your text bold:

#about { font-weight : bold }

and this one makes it italic:

#about { font-style : italic }

To mess with the section's caps use this code:

#about { text-transform : lowercase }

You can change "lowercase" to any of these:

Uppercase
Lowercase
Capitalize

To change your text's align, use this code:

#about { text-align : right }

You can change "right" to any of these:

Left
Right
Center
Justify

Now for the links. Links actually ARE text, the difference is that if you click a link, it directs you to another web page. Being text, they are effected by the same codes as normal text EXCEPT they have their very own selector.

a:link { color : white }

This code will change all links that you have not clicked to white. The link selectors are:
a:link
a:active
a:visited
a:hover

a:link are links that have not been clicked (a:visited), are not being clicked (a:active) or are not being hovered over (a:hover)

a:active is what happens to the text while it is being clicked, so while you're holding down the mouse button on the link. When you release the button, it will go to the webpage as normal, but DURING that click is called a:active. It can be used for some neat things!

a:visited are the links that have been clicked already.

a:hover is a link being hovered over, which means if your mouse cursor is on the link, it is being hovered over.

If you only want to effect the links of a specific section, use this code:

section name a:link {color : white}

For example:

#about a:link {color : white}

This code would only change the a:link inside the about section.

__________________________

CODES FROM THIS SECTION
__________________________
section name {color:__}
section name {font-size:__}
section name {text-transform:__}
section name {text-align:__}
section name {letter-spacing:__}
section name {font-style:__}
section name {word-spacing:__}
section name {line-height:__}
section name {text-decoration:__}
section name {font-weight:__}
section name {text-align:__}

[miimix]

14

BORDERS

To make a border on all 4 sides of a section or whatever you want, use this code:

#profile .avatar { border: 1px solid green }

That code will make a solid one pixel wide green border around your avatar. The "1px" and "green" are pretty straight-forward, but "solid" may be a little confusing to you. Solid is a border type, there are several types of borders. You can replace "solid" with any of these:

solid
double
groove
dotted
dashed
inset
outset
ridge

If you only want to change one side's border, use this code:

#profile .avatar { border-top: 1px solid red }

That code should make the top border of your avatar red. You can do this with all 4 of the sides of any section or selector you want. Just replace "border-top" with any of these:

border-top
border-bottom
border-right
border-left

__________________________

CODES FROM THIS SECTION
__________________________
section name {border:__px __ __}
section name {border-top:__px __ __}
section name {border-bottom:__px __ __}
section name {border-left:__px __ __}
section name {border-right:__px __ __}

[miimix]

15

SCROLLING&OVERFLOW

You should know what scrolling is, you scrolled down this guide to get to this post. Overflow is the extra stuff in a section that won't fit inside it. For example, if you have a 100 pixel tall #about section but you have 300 pixels worth of words, there are 200 pixels too many to fit in the section. But there is a solution, you can add a scrollbar to your section. Take a look at this code:

#about { overflow : auto }

This means that when your #about section has too much stuff to fit inside it, a scrollbar will be made to fit it all. This is similar to "height : auto" where the height is automatically changed to fit everything. But what if you only want a scrollbar up & down but not left & right? Well look at this:

#about { overflow-y : auto }

See what I did there? I added -y to the end of "overflow". This means the about section will scroll up and down if it is overflowed but not left and right. Overflow-y means up & down and Overflow-x means left & right. You may already know this if you have taken an algebra/geometry course and have studied grids. The Y-Axis is up and down while the X-Axis is left and right.

But lets say you just want your overflow GONE, you do not want a scrollbar.

#about { overflow : hidden }

So now, any extra overflow will be completely hidden, no scrollbars, no funny business.

To learn how to do hidden scrollbars, visit this page.

__________________________

CODES FROM THIS SECTION
__________________________
section name {overflow:__}
section name {overflow-y:__}
section name {overflow-x:__}