Skip to main content


This topic contains 4 replies, has 0 voices, and was last updated by  NikeAirforce1s 11 years, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #22582



    Chris, as you know I’ve been following your psd mock ups to xhtml/css which are great but have you forgotten about the 3 state sprite(hope that’s right) menu? You showed us the hover, off…what about the on? I hope I’ve described it right, when we’re on a page for example "articles", how do we have it so the menu shows we’re on that page.

    Also if you plan on future vid tutorials, can you do one on sliding door menu pls?



    Chris Coyier

    This reply has been reported for inappropriate content.

    Ah yes, I did forget to touch on the "on" state of the menu. I’ll try and remember to touch on that quickly in part four where I’m going to go back and show how the Photoshop mockup was built, but for now, the theory is that you need to set the background position of the on state to "background-position: top center;".

    My favorite way to do that is by giving the BODY tag a unique ID, like <body id="contact">. Then in the CSS, you can do something like:

    body#contact ul#menu a {
    background-position: top center;

    Because you are being so specific, this will supersede even the rollover state and the menu item will just stay in this "on" state.



    I was hoping that I was not the one that missed it.

    Thanks :)




    this code doesnt work, why is that?

    here is the sample

    why is making all this rare load, ok…..please help


    i have another question, how can i put some text in the footer, because it is in the wrap y cant put some text, like is in the page……..f*** i need to practice my english……



    kindent – Your css is using : where = should be.

    You have:


    Which is Invalid

    You should change it to:


    as well as change them on the other pages.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star