Positioning The Header

This section will show you how to position your header image for your layout. This is one of the easiest parts as the coding is a little smaller than the rest. I own this tutorial. If it's helped you or if you need help, notify me.


Below is the header 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 header 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 header 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.

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