Grow your CSS skills. Land your dream job.

psd mock up to css tutorials

  • # April 21, 2008 at 7:57 am

    Hi,

    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?

    Thanks.

    # April 21, 2008 at 11:23 am

    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:

    Code:
    body#contact ul#menu li.contact 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.

    # April 21, 2008 at 3:30 pm

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

    Thanks :)

    # April 29, 2008 at 3:39 am

    :cry:

    this code doesnt work, why is that?

    here is the sample

    http://www.paginasprodigy.com/kindent/index.html

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

    ooooooooooo

    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……
    :arrow:

    # April 29, 2008 at 9:32 pm

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

    You have:

    Code:

    Which is Invalid

    You should change it to:

    Code:

    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.

*May or may not contain any actual "CSS" or "Tricks".