PSD to HTML 4.5) Arranging the Feature Section

Previous: PSD to HTML 4.4) Styling the Responsive Menu

Next: PSD to HTML 4.6) jQuery Navigation

PSD to HTML Complete Course

Transcription of PSD to HTML 4.5) Arranging the Feature Section

hello and welcome back to the PSD to HTML responsive portfolio build in thislesson we’re going to tackle the Features section here and how it’s goingto behave when we hit that 640 pixel break point at that point I want to goahead and split it into these three separate stack two layers instead ofhaving them lined up in three columns we want it to be stacked on top of eachother so as we mentioned before in order to do that we’re going to take away thebackground image from the list itself a background image supplied to theunordered list we’re gonna take that away and then reapply that backgroundimage to each individual column which they won’t be columns anymore and we’rejust going to position that background image differently in each of those threecolumns so that even though they all come from the same image gives it alittle bit of variety and looks really nice so we’re gonna do that now let’sjump back into text made and we moved everything into the site 23 folderol thechanges we make in this lesson will be saved there and we’re going to bedealing with the same media query we’ve created with the max width 640 at thatpoint we’re going to break this feature list down so against our featuredsection in its contained inside a unordered list with a class of featurehyphen list so its point to that feature list class and in first of all we’regonna take away the background we’re gonna sit background equal to none werealso going to set the width to 100% so that it takes up the entire witof the browser we’re gonna take away margins set it to 0 and and let’s seehow it looks will see that jump back into chrome and refresh and there we goso as you can see once we get to that 640 our margins and padding go away onthe edges and our background image disappears also I want these Collins todisappear and I want them to be stacked on top of each other so we’re gonna haveto go into the list items themselves to do that so here’s our featureless rulehere now we’re gonna skip a couple lines include another rule for feature listspace allies of the list items themselves the individual list itemsinside that so for those lists items were going to grab that background imagego ahead and scroll back up to our original feature section and here wehave this background image of plane to the feature list we’re going to a playthat now it’s copy and we’re gonna play that now to each individual list iteminside that list and that’s gonna change when we reach 640 pixels let’s pasteproperty there only difference is I’m gonna get rid of all of this extra stuffhere I’m not gonna have the positioning in the new repeat instead reduce canhave the URL we’re going to position them separately because each individualsection is going to be positioned differently but they’re all going tohave the same image in the background so once we’ve done that we also want thoselists items to stop the loadings were gonna set the float property to nonereally set it at a height of 120 pixels which is the same height that was usedin this Photoshop file each of these is 120 pixels tall will jump back into ourcode here and we’re gonna get rid of the right borders on these soorder Hytrin right we’re gonna sit that and let’s also go ahead and make thatimportant as I’m not so sure that work without the important we need to makesure that it does override that and then we’ll sit border hyphen left to known aswell then instead of a left and right border if we go back to her photos showhow we can see that each has a bottom were on it so for those lists items willset border hyphen bottom to 1 pixel solid white each list item is going tobe 100% of the width of the browsers and bring that with up 200% we’re gonnachange our textile and is right now the text is aligned to the center in orderto get those icons and text centered in the news items those lists items but nowwe’re going to align the text to the left and let’s see how that would lookso it seemed that jump back into chrome and refresh and there we go we’regetting a little bit closer to what we’re going for but obviously we’restill not quite there yet if you remember when we originally createdthese columns we had a hundred pixels of padding placed in the top of these listsitems let’s get rid of that padding and that should pull our icons back up withthe where they need to be excuse me so for this feature list these Li elementswithin that featured list were gonna set or padding back 20 save that and refreshand that brings as icons back up closer to where they need to beand we’re getting there now we need to design services been kind of beingsucked up into that section and that’s because that section it’s having it’swhich set to exactly one hundred and twenty pixels so instead of doing that Iwant to set the heights to auto for that feature list so we’re gonna change thevalue here to do soautomatically adjust instead of being set specifically to a given high schoolsay that and refresh and it said 220 pixels I was confused 220 pixels iswhere we want those lists items to be but up here near the top when we firstcreated that feature list the fight was set to 300 pixels so even though we weretaking up more than 300 pixels of height it was still trying to set the height239 pixels so this design services was pretending like that I was set to 300pixels it was being kind of sucked up over that background image but now we’vegot that settled by setting behind down here at the bottom scroll the way backdown saying that height for the featured list unordered list to octo so now someback into our HTML real quickly so we can see what she looks like for thatfeatured section remember we have our list items and in inside that we have ananchor tag in the anchor tag we have an image with a classic feature icon andnh3 with a class of feature title so those still need to be arranged we go toa Photoshop file with the icon to the left and the text to the right so let’sdo that we’re gonna come down here blower feature list Li rule and create anew rule for feature hyphen icon which is again the class name given to thoseimages those iconic images and we’re gonna float those to the left and let’sset margin top because the right now that are aligned to the very top of thatlist item said margin top 228 pixels and that won’t get it where it needs to beit will notdown and to get a little space between the icon in the text that’s going toshow up next to it let’s also give its a margin right property of about 20 pixelsso it’s going to see that and refresh your page and we need to go into yourbrowser and refresh your page there we go in a little bit closer to where weneed to be now we just need to vertically center of that text in theway we’re gonna do that is pretty easy we’re going to set D line height forthat text to the same height as the list I’m itself which is a hundred and twentypixels when you set the line height to the same height as the container elementit will automatically vertically center the text for you if that text point thisout if that text is only one line of text if it’s two lines of text then itwon’t work at all so if you’ve got more than one line of text you don’t want todo it this way but we know that this text is only going to take up online sowhat we can do is let’s go back to the rule for those h3 tags so we have afeature actually they’re called feature title as h three tanks have a class offuture titles so we can just give that feature title Class A line height of 120pixels which again is the same as the height of the list item itself when wedo that and refresh your page you’ll see that our text is now vertically centeredand now that section is looking really nice thing I wanted to know as may beset some left margin to those icons feature icons the emergent operate let’sgo ahead just create a comprehensive margin rules emerging top is going to be28 pixels and then we hit two margin right which is gonna be 20 pixels and wehave the bottom margin will set that 20 in the left margin but said that 210pixels and then get rid of these other to the margin topping margin right let’ssave that and refresh and then manages it over so we have a little bit ofspacing between the lessthe icon in the left edge of the stage so then I wanna do one more thing andit’s gonna be pretty simple just went to vary the position of the backgroundimages for these three sections and those three sections if you rememberhave different class names the web section is called feature hyphen web andwe’re gonna said its background hyphen position property to top left cornercopy that and paste it two times our second one is called feature hyphengraphic and we’re gonna said its background position to bottom center youknow we’re really doing here is varying the position of it to give it a littlebit of variety there so our third one is called featured video and we’ll give ita background position of center right so we’ll save that jump back into ourbrowser refresh and we’ll see then nothing changed their we need to makesure that those are the right class names and we haven’t actually playedthose class names yet so inside our feature list also gonna give each one ofthese a separate class name so that we can position those so allies gonna haveour first allies gonna have a class of feature heightened new web and thisshould take care of everything her second one will have a class featurehyphen graphic and then finally our third list item will have a class offuture wife and video let’s try that again and refreshand it might help to set our background and said she’s in background we’re gonnaset this to background image and I think that might take care of it will see thatand will jump back into chrome and refresh and there we goso now our background images the same for all three they’re just positioneddifferently so now in a figure out why there’s a little bit of space in betweeneach of these items I might be a padding issue will just right-click inspectelement and it looks like it might be a margin issue because we hover over thatthere’s a little bit of orange space there you can scroll down to the bottomand margin is that weird species 5 pixels of margin according to this sowe’re looking for some top margin and we’ll just go into those lists itemsthere and we have no margin sets was just said margin 20 save that andrefresh and will maybe set will get a little more specifics emergent top 20and said it too importantsave it and refresh and it might have something to do with these h3 tags hereso for those h3 tags which are these feature titles were also gonna set themargin for those 20 save it and refresh and there we go that gets rid of theextra spacing sometimes when you have extra space in like that you want tolook at the elements around it and you’ll often find that when you haveweird spacing issues like that it it is often the result of an h1 or h2 h3 tagthat’s applying its own margins here in there so that takes care of that issueand we can move on with the next video thank you for watching