treehouse : what would you like to learn today?
Web Design Web Development iOS Development

psd mock up to css tutorials

  • 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.
  • 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 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.
  • I was hoping that I was not the one that missed it.

    Thanks :)
  • :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:
  • kindent - Your css is using : where = should be.

    You have:
    <body id:\"inicio\">

    Which is Invalid

    You should change it to:
    <body id=\"inicio\">

    as well as change them on the other pages.