Pin Me

How to Make Your Own Website Header

written by: S. R. Obbayi•edited by: Amy Carson•updated: 3/10/2011

However complex it may seem, it is not that difficult to make your own website header that can be matched with any of those seen on any professionally designed website templates. Read on to get the details.

  • slide 1 of 4

    Before we Get Started

    It is important to note that when you are trying to make your own website header there are just a few basic things to keep in mind. However simple or complex the task is at hand, a website header is made up of three basic components. HTML code to mark-up the information, CSS code for styling the HTML mark-up and Images to enhance the website header. There are other components that can further enhance the website header such as embedded JavaScript, Adobe Flash, SilverLight and other rich contents plugins. Website headers usually but not limited to containing one or navigation menus, a logo, authentication menu and ad space. Check out this tutorial on creating a website header Drop down menu using Adobe Flash.

  • slide 2 of 4

    Website Header Design

    simple website header 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:

    <div id="main">

    <div id="wrapper">

    <div id="adspace">

    <div class="pad">

    <b>Section for Ads, and other information</b></div>


    <div id="logo">

    <div class="pad">

    <b>Logo Section</b><br />

    <img src="" border="0" width="180" height="70" />


    <div id="navigation">


    <li><a href="#">Home</a></li>

    <li><a href="#">Products</a></li>

    <li><a href="#">About</a></li>

    <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