Header Help!

[Fancy Cat.]

Hey I was wondering what coding you used for the CS header. I'm working on making a header for the strawberry smoothie website and wanted to know how you did this one.

-catgirl

[Nick]

It's nothing particularly fancy, you can click "View Source" in your browser to check it out. We got the basic code design from CSS Sprites: Image Slicing’s Kiss of Death.

We have a <div> with a width and height set using CSS and this background image on it:

Code: Select all

.headerbar {
    width:830px;
    height:230px;
    position:relative;
    background-image:url(./styles/CSDullGreen/theme/images/head.jpg?v=4);
}

Inside that div we have a <ul> which is our main menu, positioned so that it ends up right on top of where the buttons appear:

Code: Select all

ul.mainmenu {
    position: absolute;
    left: 60px;
    top: 179px;
}

For each button we have an <li> tag, basically:

Code: Select all

<li id="nav_pets"><a href='/accounts/viewgroup.php?userid=65'></a></li>

And styled like this:

Code: Select all

ul.mainmenu li {
    float: left;
}
ul.mainmenu, ul.mainmenu li, ul.mainmenu a {
    height: 51px;
    display: block;
}

If each of our buttons were in a separate image file, we could just style them like this to light up when you hover over them:

Code: Select all

#nav_pets {
    width: 105px;
}
#nav_pets a:hover {
    background-image:url(./styles/CSDullGreen/theme/images/nav_pets.png);
}

But we combined all of the lit up buttons together into one image instead:



So it's styled like this:

Code: Select all

ul.mainmenu li a:hover {
    background-image:url(./styles/CSDullGreen/theme/images/nav.png?v=4);
}

Each button displays just a part of that image, so we use background-position to get the part we want:

Code: Select all

#nav_pets {
    width: 105px;
}
#nav_pets a {
    background-position:-96px 0;
}

[Fancy Cat.]

Thanks I'm sure this will help!