CSS is a very powerful tool. Here we examine how to create a customer header with links, very much like the one seen at www.2spheres.co.uk.

First of all, decide if you want your header to have solid colour or a gradient of colour. If you decide to opt for the latter then you will need to open up Photoshop or you favourite graphics editor.

Creating a Gradient and Exporting It
We will make our header gradient in Photoshop first.

Create a new image, approx 100 pixels wide and 55 pixels high. Now, using the gradient colour picker in Photoshop (find this by selecting the gradient tool from the left hand tool bar and then selecting the drop down box on the top tool bar with a picture of a gradient on the front) choose 2 colours. My advice would be to choose 2 similar colours, for example, a dark red #9f0202 and an ever so slightly lighter red #c80404.

The Gradient Picker

Using the gradient tool, hold shift and draw a gradient on your art canvas, dragging from top to bottom. This will ensure your gradient is vertical.

This next step isn’t essential but it helps your website become more optimised when it loads. Go to Image > Image Size and untick the box which says ‘Constrain Proportions’. Now resize the image width to 1 pixel.

Now go to File > Save for Web and Devices. Save your 1 pixel wide image as a png-24 and call it something memorable like “headerbg”.

Adding Your Gradient To Your Web Site Using CSS
Here’s where we get down to some serious coding. Hand coders and Dreamweaver users will understand what to do.

Create your new HTML document and add a div. The code you will need for valid markup of your HTML doc with a div will look like this:

Our div spanning across the page with a gradient

With that complete, the final stage is to add some links. To do this, we will create a UL, or unordered list. There are some complex rules which need to be applied here to make this work so keep and eye on the code:

HTML CODE FOR THE UL IS LIKE THIS:

<div id=”header”>
<ul>
<li class=”first”><a href=”index.html”>HOME</a></li>
<li><a href=”link.html”>ABOUT</a></li>
<li><a href=”link.html”>GALLERY</a></li>
<li><a href=”link.html”>CONTACT</a></li>
</ul>
</div>

Notice that we have added a class of “first” to one of our list elements. This is very important for later on.

Next, we add the CSS in to our head to style the UL. You will need to create a new rules as follows:

#header ul li  {
border-left-width: 1px;
border-left-style: solid;
border-left-color: #F482B6;
list-style-type: none;
display: inline;
padding-top: 25px;
padding-bottom: 18px;
text-align: center;
padding-left: 20px;
padding-right: 12px;
margin: 0px;
}

And now, create another new rule to remove the first left aligned border from the links:

#header ul .first {
border: none;
}

To briefly run over what we have asked our code to do:
- We have specified a border on the left. This is used as a visual separator for our links.
- We have also specified border type and colour.
- We have told the browser that our UL is not a visual list and it needs to be displayed in a line.
- We have added padding to increase the hotspot area of each link and to give more space between the links.
- We have specified a zero margin

View Some Code
If you want to take a more in depth look at the code which we used to create this you can go to www.2spheres.co.uk. The header on this site is identical to what we have just created. The CSS and HTML in the tutorial is fully compliant and can be checked at W3C for official validation.

Tags: css, css header, css navigation, link style, styling header links, styling links

This entry was posted on Thursday, February 11th, 2010 at 10:06 pm and is filed under CSS Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.