Positioning The Content Section

This section will show you how to position the content section for your layout. I own this tutorial. If you need help or if it's helped you, let me know. =]


Below is the content coding I use, I'll explain what each code means and what it's purpose is.



Position - The most common uses of the position tag are absolute and relative. I find absolute easier to work with so if you're a beginner then this may be the better option for you. Relative is slightly more complex and can be a little harder to understand, they don't have much difference but either way I've always found absolute coding much more simple.

Top - This defines how close or far from the top of the screen you want your content section to be. If you want it quite close to the top then enter a low number such as 10px or 15px etc. If however you want it further away from the top then enter a higher number such as 50px or 70px.

Left - This code is similar to the "top" coding but instead of it altering how close or far from the top, this code alters how close or far to the left the content section would go. As before, if you want it close to the left side of the screen enter a low number such as 5px or 10px. If you want it further away from the left side of the screen then enter a higher number such as 70px or 80px.

Width - This code defines the width of your content section e.g. 800px would then make the content secion 800 pixels wide. This number can be altered to your personal liking.

Background Color - This allows you to customize the background color to match your layout, this code is optional and if you want it to have no background color then either leave it blank or delete it. For those who want a background color you need to either type the name of the code e.g. background-color: black; or you can enter the 6 digit hex code e.g. background-color: #000000; (black).

} - This is a mandatory code. Without it, the entire style sheet could go wrong. You must make sure you put one at the end of every section of coding (all codes provided for this tutorial have them done for you, therefore this is only to be used as a future reference when you go solo on your first layout)

This section of the tutorial has now been covered. You may proceed to the next stage.