#2: Converting a Photoshop Mockup (part 2 of 3)

by: Chris Coyier

Nov 12 2008

In part two of this series on converting a Photoshop mockup to an HTML/CSS Website I continue on with the header/menu section of the site. I change the way in which the site is centered when I decide to wrap the entire site in a page-wrap div instead of centering each major page element. Then I plug in some "filler" content for the main area before I end with building the footer.

In this series:


Running Time: 17:10

Download Video File

Subscribe to The Thread

  1. Flavio

    great ,im learning a lot with that

    Reply ↓
  2. Kudzai

    Excellent!

    Reply ↓
  3. Melissa

    I did everything exactly the same as you (downloaded the files and following along), but my links are all on different levels, like stair steps :(. Not sure why.

    Reply ↓
  4. James

    @Melissa dont let yourself get stuck on one part. Just go with the tutorial and things will work out themselves.

    Like the step-stair will get solved once u get to 05:50.
    Plus, you can check your code with the downloaded example files at the end if your website doesnt like exactly like the mockup(which i doubt would ever happen). Cheers !

    Reply ↓
  5. Niels

    Awesome tutorial. Exactly what i was looking for. The information you give on the CSS is reaaaally helpful. Keep it up!

    Reply ↓
  6. Fouad

    heheheh . thanks :))

    hope to be one of your Students :DD

    Reply ↓
  7. Robin

    Thanks,
    Very helpful for a css starter like me.

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~