x

CSS Template Tutorial – Slicing + Coding Header


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.

slicing tips

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:

free css

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:

css tutorial

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:

css navigation tutorial

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

Like this post?

If you liked this post and want to keep up-to-date with the website, please consider subscribing to our rss feed or following us on twitter.

Want to learn CSS fast?

Sick of reading tutorial after tutorial? Just want to learn CSS quickly and simply? Why not try lynda css screencast tutorials. You can learn everything you need to know about CSS in one place. The website is a great learning resource for all languages, CSS included. Why not check the website out for more details.

x

Related CSS Tutorials

  • CSS Template Tutorials – Coding the Basics

    July 20, 2008 / 8 Comments

    The part of the tutorial will code the very basic things. It will use CSS to define the main holding div and style the text and links for the template

    Read
  • CSS Template Tutorial – Finishing Off

    September 16, 2007 / 34 Comments

    I will show you in this part how to finish the template off with a footer and just make our coding a little neater.

    Read
  • CSS Template Tutorial – Right column links

    September 16, 2007 / 3 Comments

    The tutorial is almost over and the template is almost finished. In this part I will show you how to create the simple navigation which is on the right column in the design preview.

    Read

Comments

  1. Dane says:

    This tutorial is great. One little issue I wanted to mention that I found while putting a site together using this:
    The shorthand version for “background: url… color… etc…” where all it’s attributes are in the same line, does not get picked up in IE for some reason.

    After changing them to their single-line versions (background-image: url… , backgound-repeat:…) it worked fine.

  2. Ian says:

    This tutorial is superb! I’m new sort of new to Photoshop and I am a web designer and have to move into the future with PSD to XHMTL/CSS and this is a great help, thanx!

  3. kvlaxmii says:

    The tutorial is really helping.One can easily understand & proceed from this tutorial.I need some more help regarding conversion of given PSD file to WordPress theme.If any tutorial is there it’s also appreciated.anyone who knows such example please send the link or specify the site.

  4. Ramesh says:

    Excellent tutorial. Really amazing!!! Thank you for this.
    And i have a doubt about this. when i placed the logo in the header i couldn’t set into that exact position that you have placed and also i see another text “CSS” below the logo in dreamweaver. Would you tell me that how can i place it in the exact position and how to clear the text below the logo.

  5. admin says:

    There should be not text below the logo. Simply select the text and delete it. That will be the reason the logo is not in hte correct position.

  6. shaheel says:

    Removing the line text-indent: -100000px; from css makes no difference in the appearance of layout. I am not clear with this. Could anyone clarify.

  7. Thanks for putting together the tutorials!

  8. Hanin says:

    Really nice tutorial, was long time searchnig for something like this.
    THANKS a lot!

  9. Jon says:

    thanks for the easy-to-follow tutorial

    In response to Ramesh’s comment, I to had the same issue with CSS appearing as text below the Logo image but found that If I changed text-indent:-100000px(one hundred thousand) to text-indent -10000px(ten thousand) or less, it seems to solve the issue, might just be a dreamweaver thing.

  10. Kristbjörg Olsen says:

    Simply brilliant! Exactly what I needed 🙂 You explain each part very well. I think there might be some links missing in your text e.g. heading tags explained

  11. Darhena says:

    Thanks for this tutorial, it is very useful for me. But I have a problem and I can’t fix it by myself: only in IE the header is centered, in FF and Chrome it is left-aligned (wrapper is centered – I was copy/paste your script, so everything should work, but it don’t). Could you tell me why? Please, help me…. Im very new in css styles… Thanks!

  12. Katie says:

    regarding the logo not aligning properly, I found that if I added the line:
    text-align: left;
    to the .header item, everything lined up correctly for me with the padding values. I think the header was automatically centering the logo because we set the center text-alignment for the entire body.
    (I am a total newbie, and I have no idea what I’m doing really, but this fixed the issue for me).

  13. Ravinder Singh says:

    sir logo work well in google chrome and mozilla what not in internet explorer ..

  14. Ros says:

    Hi thanks for the tutorial. I tired to slice my blogger header image. But it shows the gab in between the image. This is the trial page
    http://premiumbeautyware.blogspot.com/. Tried to figure out the padding and margin but still don’t have idea which in the css code should I look at. Thank you. Hope you’ll help 😀

Leave a Comment

Awake is an amazing wordpress theme with over 30 unique style variations. Its our star buy at only $42!

Wordpress Themes

Other Websites

CSS Books