Free CSS Templates

Welcome to the slicing and coding tutorial for the header. In this part you will slice each image used for the header and logo and code it using CSS and XHTML. The first thing you are going to have to do is to slice the image.

Slicing the image

The first image needed is the background for the header. The background for the header I am doing has a designed pattern which repeats in the horizontal direction. Since it has a gradient whereby the colour changes in the y-axis (light at top, dark at bottom) then it cannot repeat in the vertical axis. Since its a pattern you need to slice the image carefully. You need to make it so when it is copied side by side all patterns line up to make it flow.

To slice an image you use the slice tool in image ready. When you have an area selected with the tool go to file save as optimized. Make sure its .gif only and saved in the tutorial folder which you created. It should automatically go into an image folder.

You can see I only selected a portion of the header background. I selected from the middle of one folder to the middle of the next. That way it should go together perfectly (pattern is floral). You will also notice I have left a section of the header (darker colour). This isn’t included in the image because solid colour can be accomplished using CSS. We can define a colour and image for a background attribute. (No matter the positioning in the line of code the image will appear on top then areas where the image background does not cover the solid colour will. It will become more clear later.

Coding the header background

The header is a div container. It is a div which will take on the attributes given to the class header. We can define its height, width and background parameters to begin with.

.header{
width:800px;

height:131px;
background:#1E1B16 url(images/header_02.gif) repeat-x top;
}

We get the width 800px because it is the full width of the wrapper div. Height of 131px because the image we saved is 121px with a solid colour section below of 10px. The background is defined by the colour first which will be displayed below where the image is. The image is repeated only in the x-axis (repeat-x) and at the top of the div container. If you add the XHTML code to your template you should see the background repeat.

Add this code after the wrapper opening and closing tags. Its integral it goes inside the wrapper div. everything should go inside the wrapper div:

<div class="header"></div>

Slicing the logo

The logo is the "freecss" text in the header. I will be showing you how to code this using the image replacement technique. This is an SEO (search engine optimization) friendly way of doing things with text in images. This means when you look at the code all you will see is text but in reality there will be an image there.

First thing to do is to slice the logo. To do so select the text using the slice tool and save as optimized just as before:

Try to get as little of the background as possible. That way it will flow better and the image size will be smaller (save on bandwidth and loading time.

Calculate padding values

This is a simple thing which I do to calculate any padding values. If you look at the preview of the design you will see the logo section we sliced has a gap between the top of it and the top of the header div. If there was no padding it would simply be placed at the very top left of the header div container. We therefore will need to add padding left and padding top to the header div container so the logo is placed in the right position.

To calculate the top padding value I slice the image of the header which is above the logo like so:

Save as optimized and read the height value this is what we will be using. For padding to the left side of the header we will simple guess. From the image we can see it has a height of 45px. We therefore have to alter our header container’s css to this:

.header{
width:600px;
padding-left:200px;
padding-top:45px;
height:86px;
background:#1E1B16 url(images/header_02.gif) repeat-x top;
}

Why have the width and height values changed?

This is an important lesson to learn. When you add padding to a container its like adding a buffer space, an area which cannot have anything put into it, a sort of text indent. When you add padding you are adding to the width and height of the container. If you have padding-top:45px that means you will have a section 45px at the top of the container which is indented (content put into the container will not appear there, instead indented down). So when you add a padding value you must subtract the value from the appropriate value (height for padding-top or bottom and width for padding left or right).

Coding the logo using image replacement technique

The logo will be an h1 tag. This is the main heading of a website. If it was a newspaper it would be the title on the front page. This gives it more importance to search engine spiders. We will use the CSS image replacement technique so the image of the logo is clickable and if you read the code appears to be regular text. If you want to learn more about heading tags and how to use them check out: heading tags explained and how to style heading tags.

The coding for the heading (h1) tag is quite complicated so let me type it first then go through it. The following example is only going to work if your title is linked (best to link to your homepage):

h1{
width:201px;
height:83px;
margin:0;
overflow: hidden;
background:url(images/logo_05.gif) no-repeat;
}
h1 a:link, h1 a:hover, h1 a:visited, h1 a:active{
display: block;
width:201px;
height:83px;
text-indent: -100000px;
}

The XHTML code you will use must be place between the opening and closing tags of the header div. You can obviously change details in the code for your website.

<h1><a href="http://www.freecss.info">Free CSS </a></h1>

CSS Explained

The width and height are self explanatory. They are the values of the logo image. Important: all heading tags eg h1, h2 etc have margins as standard. You must put margin:0 onto these. The overflow hidden makes sure anything outside the width and height specified will not be visible (this will be the text). The background I also assume is self explanatory. The no-repeat means it will only display once.

Note: heading tags and other elements in XHTML don’t require the period in front of them when you are writing there CSS.

For links you write a:link, a:hover for different linking states. In this case it is the same for all. I could write each one out separately with the same content but its easier to list them and separate with commas.

The display block makes the area (width and height specified) clickable. The text-indent is the sneaky part to hide the text we write in the XHTML. This will be shifted out side the area and since we wrote overflow hidden it is not visible.

Outcome of this part

You should have something which looks like the following in design mode:

If you press F12 to preview the design you should find the logo clickable and links to your website. If you need further explanations or help please post a comment here. I had to write this part twice since I deleted the first version by accident. I might therefore have missed a couple bits out.

Step 4- CSS Horizontal Navigation