- slide 1 of 4
Before we Get Started
- slide 2 of 4
Website Header Design
Before you make your own website header you need to have designed how it is going to look. For purposes of this tutorial I will use a simple header with a space for the website logo on the top left, a space for ads right next to it and below all that I will have space for a horizontal menu.
- slide 3 of 4
Putting it all Together
Normally you would want each section of you design represented by a <div> container and that is exactly what we will do here. The idea is to have a main <div> container which wraps the entire header. The reason you would want to do this is to control the overall width of the header. Say for example you would want it fixed at 800px then you would be able to define that width in the properties for the main <div> container. In this case we have left it undefined that way we can have a header that stretches the entire width of the web browser.
We would then need to place another <div> inside the main <div> to contain the image for the logo. We will also need to add two more <div> containers. One for the menu and another for the Ad section. To lay out the menu we use an Unordered list (<ul>) which is styled to be in-line. The general lay out of the containers for our basic header looks something like this:
<b>Section for Ads, and other information</b></div>
<b>Logo Section</b><br />
<img src="" border="0" width="180" height="70" />
<li><a href="#">Contact Us</a></li>
Trying to view the above code in any web browser will not give an appealing layout and that is where CSS comes in. In the attached website header source code file you can see the details of the actual complete CSS and HTML code used in this tutorial. Just to explain what the CSS does, is that it takes the <div> for the logo and moves it over to the top left of the page with a fixed width of 200px. The remaining space on the right of the logo and up to the end of the browser is then left available for Ads and other desirable content. The CSS then places the Menu below these <div> containers and arranges the menu Items as in-line.
You can download the entire code for this tutorial for a website header here. That way you can see exactly how to make your own website header in a simple and fun way. You can play around with the CSS to see how polished the design can get.
- slide 4 of 4
Source: author’s own experience.
Screenshots provided by writer