Positioning The Navigation

This section is actually optional. If you intend to have the navigation in the sidebars then you can proceed to the next stage but if you'd like to know how to position it in various places then stick around for this section as that's what I now intend to teach you. If you need help or if this has helped you, notify me. This tutorial courtesy of Plasteeq!

Below is the navigation 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 navigation 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 navigation 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 navigation e.g. 800px would then make the navigation 800 pixels wide. This number can be altered to your personal liking.

Height - The height of the navigation section can be altered here. E.g. 30px would make the navigation 30 pixels high. As the width, this number can be altered to your personal liking.

} - 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.