PSD to HTML 3.3) Setting Up the Navigation

Previous: PSD to HTML 3.2) Typekit and Google Fonts

Next: PSD to HTML 3.4) Styling the Menu Items

PSD to HTML Complete Course

Transcription of PSD to HTML 3.3) Setting Up the Navigation

hello and welcome back to the PSD to HTML responsive portfolio built now we’ve got enough funds imported I want to get started moving from top to bottom and will start in this lesson with our navigation so we’ve created a navigationin HTML we use an unordered list for Army navigation and another unorderedlist for our social media icons over here to the right now we just need tostyle it appropriately so first thing we see is this background color and F toturn on or toolbars again and see what their background color isms gonna clickdown here on our color selector in the toolbar and then just hover over thebackground color in click and we can see the hex value here da da da let’s goback into our HTML and see what it is we’re coding so we’ve got a navigationhere and inside that navigation we have it did with the class of containersremember we talked about this before they did with the class of containerthat container classes going to define the width of our content if we go backto our design and it’s just hit tab to minimize our toolbars there we can seethat our content goes from right here on the left edge of the home button toright here on the right edge of the Facebook button but the background forour navigation extends beyond thatnavigation extends all the way to the left and right edges of the browser sothat’s why we put this navigation elements outside that deal with theclass of container so we can give this navigation element that background colorand then we can put all of our content that’s inside this container we can setthe width of a content so that it doesn’t extend outside the boundariesthat we have defined so let’s start with the nav element let’s go to our site .CSS fileand and let’s skip a couple lines here in the put a line of comments here justsays Scott main navigation there we goso we’re going to create a rule for the nav element and since we’re pointing tothe element itself from orig typing in the name of the element we don’t need todo anything before so for the nav element we’re gonna give it a backgroundcolor so background Hyson color colon space given value of the pound da da daso it seems that looks like let’s save that when he jumped back into chrome andAnnie to navigate here to cite 08 all of our files have been moved now into thesite 08 focus all the changes we make in this lesson will be saved there and wecan see here that we have to our two unordered lists the unordered list forme navigation and the unordered list for social media icons those are allcontained within this gray background that’s what we’re looking forso far so good so now we can see that are unordered list the bullets have beentaken away from it would no longer have a bullet points there and the leftpadding that is usually there by default on an ordered list is no longer thereand and so we can start to slinging these up now by default a list item is ablock-level item which means that it’s going to be online by itself and thenext block level item which is the next ListItem won’t be online next to itinstead it’ll be below it so in order to get this menu to look like what wewanted to look like we’re going to need to change that we’re gonna change thesewe’re gonna leave it as a block-level element but we’re going to float them tothe left so let’s jump back into her code and let’s take a look at our HTMLherenotice we have a UL with the class of Nev list and another UL the class ofsocialist now both of these are going to have list items that flute to the leftbut this social list class the social list unordered list excuse me the listitself is gonna float to the right of the items within it are going to vote tothe left so let’s start with ourhave up here main navigation list so you get a class of nav list let’s create arule for that Neville list class so . now hyphen list and let’s go ahead andand create some properties here that we want to apply to both in NAV list andthe socialist so first of all going to create the appropriate selector herewe’re going to point to the novelist class and the socialist class by puttinga comment in between those two class names from both of these classes wereinside the list stylenow we can see on our page that looks like the list I’ll is already set toNone but if we were to undo this and let’s just say margin left is 20 pixelssave that refresh we can see that those lists bullet points are still there butbecause we took the padding off the list they’ve been nudged off the left edge ofthe stage we can see them so we do need to turn those lists are those bulletpoints off and again we do that by setting list style to not see thatrefresh and Rebecca restarted now we don’t have any bullet points coveringoff the left edge of your browser window so now I want to float those lists itemsinside this list in order to do that we need to create a rule for the list itemsinside both of these lists of nafta list face Li common spaceships common spacetheir ego and then that social health enlist face LA so for the list itemsinside of both of those lists were going to float those items to the left twowomen say that and take a look at how that changes things and now you can seethat everything is aligned horizontally for that navigation but we have a coupleof problems first of all our background color has collapsed we can no longer seethat light grey background color and that’s because everything inside thatnow is now floating and if you have nothing with floated elements inside aparent elementthan that parent element or those floated elements excuse me are not goingto render in the DOM in other words the browser just gonna pretend like they’renot there we can see them here but they’re not holding that containingelement holding that an avid element open they’re not holding that heightwhere it needs to be because everything inside its floating well if we didn’tknow how tall you want in this navigation menu to be then it wouldinvolve a little bit of trickery in order to get this to work right but weknow how to all this money was supposed to be so all we need to do is set theheight of that now elements we can come back over to our Photoshop file and I’mgoing to option right click on that green background there are few using aPC you would alt right click and when you do that we open up our layers againand shit tab to turn those panels back on we conceded that layers now selectedbecause we option right clicked on it or altering clicked on it again if you’reusing a PC now we know what layer that is we can command click or control-clickon the preview area thumbnail for that later and it will make a selection ofthat later and without selection active we can come over here to the info paneland see the width and height and we can see that height is 40 pixels so we wantthat now have to be 40 pixels tall to command the control the on a PC to turnoff that selection then we’ll jump back into our code and for this never elementwe’re gonna set the height 240 pixels and now that we’ve explicitly statedwhat the height is we say that and refresh your browser here we can getthat green background back to know we’ve got the navigation menuthe basics have it set up anyways in the next video over to go in and work on thecontents were gonna work on the text in the images for the navigation says thankyou for watching you know see you in the next video