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.<\/p>\n
Links from video:<\/strong><\/p>\n In this series:<\/strong><\/p>\n 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 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"open","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":1475,"url":"https:\/\/css-tricks.com\/video-screencasts\/14-converting-a-photoshop-mockup-part-two-episode-three\/","url_meta":{"origin":1385,"position":0},"title":"#14: Converting a Photoshop Mockup: Part Two, Episode Three","date":"December 3, 2008","format":false,"excerpt":"We wrap up the mockup conversion here in Episode Three. We create the \"article area\" and the \"sidebar\" (semantic class naming!), and then we clear the float. We use Firebug to steal the typography from the live CSS-Tricks. Then we fix up the header a little bit in Photoshop and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1389,"url":"https:\/\/css-tricks.com\/video-screencasts\/3-converting-a-photoshop-mockup-part-3-of-3\/","url_meta":{"origin":1385,"position":1},"title":"#3: Converting a Photoshop Mockup (part 3 of 3)","date":"November 12, 2008","format":false,"excerpt":"I finish up the design in part three of this series on coverting an Adobe Photoshop website mockup into an actual HTML\/CSS website. This one focuses on the main content area. I create the the columns including the \"quick links\" section. I also talk a little bit about typography. Links\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1290,"url":"https:\/\/css-tricks.com\/video-screencasts\/1-converting-a-photoshop-mockup-part-1-of-3\/","url_meta":{"origin":1385,"position":2},"title":"#1: Converting a Photoshop Mockup (part 1 of 3)","date":"November 10, 2008","format":false,"excerpt":"In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is pretty rough here folks, I'm sure these will get more focused with time. Please let me have it with criticisms at my contact\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1469,"url":"https:\/\/css-tricks.com\/video-screencasts\/12-converting-a-photoshop-mockup-part-two-episode-one\/","url_meta":{"origin":1385,"position":3},"title":"#12: Converting a Photoshop Mockup: Part Two, Episode One","date":"December 1, 2008","format":false,"excerpt":"There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML\/CSS. So let's do it again! Every website is different will require different conversion technqiues so there will be plenty to learn this time around that will be different from last time. The\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1472,"url":"https:\/\/css-tricks.com\/video-screencasts\/13-converting-a-photoshop-mockup-part-two-episode-two\/","url_meta":{"origin":1385,"position":4},"title":"#13: Converting a Photoshop Mockup: Part Two, Episode Two","date":"December 2, 2008","format":false,"excerpt":"In Episode Two of this series, we continue on with the structure of the site. In Photoshop, we create the three different states of the menu, then slice them up and use the CSS sprites technique to create the rollover and \"on\" states for the tabs. We then create the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3157,"url":"https:\/\/css-tricks.com\/video-screencasts-2\/","url_meta":{"origin":1385,"position":5},"title":"Video Screencasts","date":"July 29, 2009","format":false,"excerpt":"#20: Introduction to jQuery Running time: 18:12 The popular javascript library jQuery is an amazing way to extend the design possibilities of your site beyond what CSS can do. But luckily, if you are already comfortable with CSS, you have a huge head start in jQuery! This is a very\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1385"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=1385"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1385\/revisions"}],"predecessor-version":[{"id":18066,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1385\/revisions\/18066"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=1385"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=1385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n
<\/p>\n","protected":false},"excerpt":{"rendered":"