Photoshop Tutorials

Welcome to part 2 of the header and navigation tutorial, This part will cover the CSS coding of the design I have shown you how to make in Part 1 I sugest you do that first, Or at least download the .psd to that (Found in tutorial) so you can follow along.
Now, Lets get started with the slicing and saving of our images. Use the rectangular marguee tool to select 1 x 100 of your header:

(Click for screenshot)
Now copy it (CTRL + SHIFT + C) Create a new document (CTRL +N) and paste (CTRL + V) And save it in your images folder as header-bg.gif Now go back to your main template window
Select one of your new navigation buttons, Without getting your dividers in the selected area, Now Copy, create a new document but WAIT, In the create document window, Whatever it wants the width to be, Double it. (You will understand in a bit) In my case it had 109 so I doubled it to 218, Here is mine:

(Click for screenshot)
Copy and paste the rollover version once, and then copy the same selection with the rollover layer not visible
In the document, Move the layer that is the rollover to the right and the regular to the left, Like mine.

Then save your search button, Like this:

(Click for screenshot)
Now that all of our images are saved, We will begin the coding. Lets start off with a file named style.css
First, We will put the basic body parts in there, Here it is:

That will make the page's background be the same color as the background in our photoshop file. and it styles the links on the page to be white (color:#ffffff;) and not be underlined (text-decoration:none;)
Here is the code for the header: That code makes the header as wide as the page is (width: 100%;) makes it 100 pixels high (height: 100px;) Sets the background as our header-bg.gif and tells the CSS to repeat it horizontally (x axis) As much as is needed to fill the 100% width.
Now we will do the navigation. Wow! Plenty of code there, Allow me to explain :P. the #navigation's code styles what the navigation div is, The #navigation a styles any links in the navigation div, the #navigation a:hover styles the links inside the navigation when the user hovers.
The regular #navigation is pretty much the same as our header's CSS but with a different height so I am not going to explain it.
Like I said before, The #navigation a styles links. The reason we are doing this is to get the links inside the navigation to display using that regular and rollover image we made earlier properly. I will explain the CSS code thats important for getting yours to work, the width: 109px is what the width of one of our links is (Remember the making a new file and doubling the width? well set the width to what it was before you doubled it.) the line-height: 45px makes the text vertically centered, Change the 45px; to whatever the height of your navigation is. the font-weight: bold; is optional, I think it looks better bold. The float: left makes each navigation item go to the left and the next one to go right beside it, Without the float: left the navigation images will each be on their own line, Try taking it out later to see :)
The navigation a:hover styles the navigation's link when the user is hovering their mouse over the link. In our case we are going to change what part of the background image is showing so that it will rollover, This is better than switching backgrounds out because it does not flicker and loads when the page loads. Change the negative 109px; to whatever the width of #navigation a is.
Now we will add the CSS code for our wrapper and search box.
This is all basic code, I am not going to explain it.
We are done with our CSS Code.
Now for index.html I have commented the code to help explain some parts.
And we are done. A few more things
If you get stuck, Feel free to download the full .zip of the coded version by clicking here If you got to this tutorial from a tutorial indexing website, Please take the time to go back and rate it. Thanks