PSD to HTML 3.6) Arranging the Social Media Icons

Previous: PSD to HTML 3.5) Preparing the Social Icons

Next: PSD to HTML 3.7) Styling the Body Text

PSD to HTML Complete Course

Transcription of PSD to HTML 3.6) Arranging the Social Media Icons

hello and welcome back to the PSD to HTML responsive portfolio build in thislesson we’re gonna move on and finish up our social media icons here before weget started we can see that there’s a little bit of space above our socialmedia icons they’re not up against the top of the snack bar instead they’redown closer to the bottom if you’re wondering why that is you can always gointo Chrome’s developer tools and try to figure it out so it seems that we wantedto explore that a little bit something right click on one of these icons andclick on inspect element so as we have over the element and the surroundingelements here at the bottom in her web developer tools we can see themhighlighted appear at the top so as we hover over the image we don’t seeanything in the images self thats causing it to lunch down like that if wecome up to the anchor tank surrounding it and click on it there’s nothing thereeither so will go up to the list item still with the list item we don’t seeanything that’s forcing them down so go to the unordered list still we don’t seeanything well if we go to the unordered list for the Annapolis we can see thisgreen rectangle going across the top of the screen and it looks like those iconsare right at the bottom of that green rectangle is that green rectangle thatis the padding for this nablus and we can come over here to our styles andtake a look at some of the stars that are being applied to the novelist so ifwe come up to the topwe can see it has a padding topic 10 pixels apply to it and using krone’stools we can uncheck that padding top and when we do that you’ll see that ouricons are my back up so you might be wondering why that padding is stretchingall the way across the background they are all the way across the navbar if ourelements here only come to rate here not even halfway across the screenwell and unordered list by the fault is a block-levelelement and a block-level element by default will stretch the entire width ofits containing element when come down here inside our styles and look at someof the styles there we can even look at the padding then we can see as we hoverover the padding area that that’s the green area that’s where we’re seeingthat green bar to have over the center area that gives us a blue color outsidethe padding and some border which is this yellow color inner margins are kindof a darker various medium dark orange color but that padding is what’s causingthe problems so we need to make sure that that padding doesn’t extend all theway across that nap bar so there’s a couple ways we can do that and I’m gonnago into our CSS and HTML files here and here we can see some of the rules forArnav list and here’s where we’ve set the top padding for that nebulous 210pixels another thing I want to do we’ve already set the socialist afloat rightlet’s set up the list to float left and let’s see if that changes anything we’llsave that thing first of all into the site 11th orders all the changes we makein this lesson will be safe there so it seemed that jump back into a browser andrefresh and we see that that gets rid of the top padding problem so then we cango into the social list and give it a padding top of not quite 10 pixelsbecause these are taller than the text these icons are a little bit taller soinstead for the socialist I’m actually gonna use a margin top instead of apadding top and either one would probably get you the right results butlet’s use margin here saying that and will jump back into chrome and refreshand there we goitems down exactly where we want them soon either vertically centered on thatnow are so now I want to space these icons apart a little bit and I’m in aspace those using left margin some reason left margins instead of rightmargins this if we use right margins and it would not sure all of these over tothe left including the Facebook icon and we want to make sure that that Facebookicon is right aligned with the rest of our content sowe’re gonna do a margin left back into our text me here and we’ll find the listitems for our social list and we haven’t created a rule for that yet so it’s comedown here to the bottom skip a couple lines and will create a new rule forsocial hi finalists face Li so all of the list items within that an order thiswith a class of socialist we’re gonna give them all a margin left property andset that equal 220 pixels so to say that refresher peach and they r ago neverspeech down a little bit and that looks much better so now that we’ve got oursocial media icon spaced out we’ve got our nav list in place we can move on tothe next video where we’ll get started on some of the rest of our content sothank you for watching and I’ll see you in the next video