PSD to HTML 3.4) Styling the Menu Items

Previous: PSD to HTML 3.3) Setting Up the Navigation

Next: PSD to HTML 3.5) Preparing the Social Icons

PSD to HTML Complete Course

Transcription of PSD to HTML 3.4) Styling the Menu Items

hello and welcome back to the PSD to HTML responsive portfolio build another we’ve gotten our navigation bar set up what’s finished laying up the contentinside that navigation bar which includes two unordered lists so we’regoing to jump into text me going to change this to say05 moved everything into the site 09 folder so all the changes we make inthis lesson will be saved there so we’ll jump into our code and in a HTML file ifyou remember we have are never element here in inside that Neville and that wehave this development with a class of container that class of container as wementioned before is the class that’s going to restrict the you wit of ourcontent so it’s going to make a rule for that container class will go to sitethat CSS and this container classes not specific to the navigation so I’m notgoing to put it in the main navigation section and said I’m gonna put it uphere above the main navigation tool just create a rule four-dot container whichis the container class and for the whips I’m going to actually give it a max withinstead of just sitting there with to a solid 920 max with so somebody resizethe browser down the container will surgery size down with it but it won’tget any wider than we’re going to 7,900 pixels so max hyphen with a value of 900PSX and that will restrict the width but it will still be left alone if we savethis and refresh your page you can see that our texts over here has been cutoff900 pixels from the left edge of the browser but now we need to center all ofthat content so the way we do that is we simply had a margin property to ourcontainer inside the 20 space auto that will set the top and bottom margin 20and the left and right marginto auto which will basically even itself out so that all of the content insidethe container is centered in the browser’s let’s aim that refresh theirego so now when I pull our social icons list over to the right will pull in theimages later before 2002 the rights that out of the way and the way I’m gonna dothat isn’t going to float it to the right sort of come back to our CSS fileand we’re gonna create a new rule for just the social list will skip a couplelines and create a new rule four-dot social heightened list and we’re gonnafloated to the right of that and refresh and their ego so now that’s floating tothe right but you’ll notice it’s still staying within that 900 pixels of withthat we just set up so now what set up our text here go back into our final andthe text if we go back into HTML file its inside an anchor tag which is insidea list item which is inside are unordered list with the class of themhave list so let’s go back to site CSS we’ve got a rule for new list itemsinside both are novelist and our socialist but here we need to get alittle bit more specific and point to the anchor tags inside the list itemsfor just the name of lists class so . to.net hyphen list space Li space a soagain that’s going to point to any anchor tags within the list items of thenav list class so what we’re gonna do is really change the color of that textfirst of all to white or we can use the hex value of pound FSF and then we wantto get rid of the underline that underlined to be there so we’re gonnasit text hyphen decoration to know that and refreshand it’s already looking a lot better no its not get down a little bit by addingsome padding let’s go back to our CSS file and for our list class and we don’thave a rule just for the nebulous we have one just for the socialist let’scome down here and put a rule just for the nav list class by itself and letsthe padding top property to the value of 10 pixels save that and refresh and thatgets our texts about where we wanted centered in that file then we obviouslyneed a little bit more space in between these items because right now the roadsrunning together they’re all this flooding to the left so they’re bunchedup right against each other so I’m gonna add right margin to those lists itemsand we don’t have anything for the list items that are just inside the novelistclass yet we have this rule here which is for novelist and socialist but wewant to make one for just now lists face Li and for those lists items were gonnaset the margin right property 210 pixels and see how that lookssave it and refresh and that’s not quite enough what spread it out it’s going todouble that speed of 220 pixels save it and refresh and there goes that looks alot better so we’ve got those links where they need to be and it lookspretty good so in the next video will move on to these social list will getour images pulled out of Photoshop and separated out so that we can use them inour page and then we’ll style them in position them appropriately so thank youfor watching and I’ll see you in the next video