PSD to HTML 3.12) Laying Out the Columns

Previous: PSD to HTML 3.11)  Preparing the Portfolio Images

Next: PSD to HTML 3.13)  Styling the Captions

PSD to HTML Complete Course

Transcription of PSD to HTML 3.12)  Laying Out the Columns

hello and welcome back to the PSD to HTML responsive portfolio build now butwe exported our images for use in the portfolio section here it’s time tostart styling and getting it to look great and if we jump back into Photoshopwe can see what it’s supposed to look like and as we mentioned before we’regonna be using these images as back ground images four of those sections andthen as we resize our browserthe size of those blocks of content are going to grow or shrink depending onwhich way you’re moving your browser and as they grow and shrink the imagesinside them aren’t gonna grow and shrink with them instead we’re gonna berevealing in concealing parts of the image inside them and I think it’s goingto make for a really cool effect as when resizing your browser so let’s start bytaking a look at our each team and we’re working on the site 16 folder it’s thesame folder we had open in the last video we didn’t change need the codeitself so we’re going to work with the same files here the only difference isnow we’ve moved our images are saved or images in the site 16 images folder sowe now have those available to us here and if we come down to the portfoliosample section we can see that it’s all contained within a section element witha class of portfolio section inside that section is a did with the class ofcontainer because remember we go back to her Photoshop the portfolio section hasa background in light grey background that supposed to extend all the way tothe edges so these section itself takes up 100% of the width of the browser butthe div inside that section of the class of containers what’s going to continueour content and keep that contentthe same width as the rest of our content so again the portfolio samplesclass will have that great background that extends all the way to the edgesand in the container inside it will have our content so let’s go ahead and startwith a portfolio samples class here let’s jump into our CSS and scroll downto the bottom and create a new section here and will call the section portfolioor portfolio samples whatever you want to call it and will point to the portfolio hyphen samples class there which is the name for the class name that wegave to that section and we’re gonna give it a background color is gonna belike great color we’re going to get a value of da da dee a good and save thatand jump back into your browser and refresh and now we can see our portfoliosection has that background and now that we have that light grey background wecan actually see those icons showing up there and that’s a good start so nowwe’re gonna go in to go back to HTML and take a look at our portfolio itemsnotices contained in an unordered list with a class of portfolio list and eachlist item is another one of the columns in that layout so we go back to ourcurrent each you know how we can see that we still have bullet points hereand we want to get rid of those let’s make some edits or add some new styles Ishould say we’re gonna point to that portfolio list class that portfolio wasclass the class applied to the unordered list itself and we’re gonna give it alist style of known as a refresher page and now the bullet points a gun so nowwe’re going to add it to the list items within that list in these lists itemsare againthe items that are going to serve as the four columns or be four sections of ourportfolio samples and we need to point to the list items inside that list sowe’ll put portfolio l’espace Li and for each of those lists items were gonna goahead and give it a darker gray background color just think he’s theimages don’t import right or whatever but let’s give it a different backgroundcolor of pound 555 and we’re really not gonna see that much if we save it nowand refresh will see it but once we put the images in the background and thingslike that those that dark grey background will go away but again wejust have that there in case for some reason the images don’t load so it stillsays stands out excuse me as a separate section unions no need to figure out howwide that supposed to be so let’s go back into our Photoshop file and we’regonna go and treat the width for the desktop or for a large browser and whenwe do some skin option right click on one of these items and they will selectthat laptop to a player and rumor that laptop layer is basically clipped to thelayer beneath it and lay beneath that if we turn that ripped through that imagewe can see it’s just a square just agree square and that Greece squares what weneed to know the size of so we can come and click on the preview area for thatsquarely or control-click using a PC and then open up our info panel and see thatit’s 210 pixels wide by two hundred and ten pixels tall enough to go into thoselists itemsand set the width to 210 pixels and the height to the same 210 pixels say thatrefresh can go into chrome first refreshed and there were no never overright size we just need to line them up next to each other so go back into ourcode and make that happen so we want these lists items to float to the leftand then in order to species out appropriately first of all school andtest it like it is never all next to each other but we need some spacebetween them and these items are each 210 pixels wide so if you add ormultiply that by for that gives you a 240 pixels which leads an extra 60pixels over here on the right because our entire content area is 900 pixelswide well we have 60 extra pixels and we have three spaces here between theseimages so each one of those spaces is gonna be 20 pixels wide so what we’regonna do is we’re going to add a margin right property hereof 20 pixels now that is gonna break things but we’ll fix it in just a secondwe’ll save that refresh your page and we see that it almost works but our finalpiece down here is not down to the bottom why is that we did the math anddiscovered that with 20 pixels in between each one it should fit withinthe 900 pixels well yes it should accept that this last item also has a marginright of 20 pixels so that basically makes this last item larger than weneeded to be so we’re gonna point to that last item and get rid of thatmargin rate property so the way we point to that last item is we point to dotportfolio list space Li colon last hyphen child’s like we’ve done beforeand this time for that last child will said margin right 20 save that refreshyour page and now we have our items floating like they need to be you knowwhat’s pulling in our background images each one of these is gonna have aseparate background image we need a way to point to each one of those columnsseparately if we go back into our codeinto our HTML file can see we’ve already done that we’ve given each of theselists items their own name port laptops poor technique or demo reel port logo sowe can point to those four classes separately to import the backgroundimage that we need to go back into sight that CSS and let’s do that so point tothe first one which again was port hyphen laptops and for that one willgive it a background of the URL and then inside print the season inside singlequotes will say dot dot / images / laptops . jpg we want to go ahead andtry to send to this and see how it looks so we’ll vertically and horizontallycenter it’s allboth properties here to center and then no hyphen repeat so that it doesn’t tryto tile and there we gosociale it looks a bit refresh your page and there you goart images now centered inside that background section so will jump to thenext item was just highlighting this copy it and then lets pasted one tothree times per second one is called port hi send me in the background imagehere is Acme logo and sexually diet gifts so get rid of that debt JPEG andmake it done gif and let’s see how it looks centered save it and refresh andthat was ok but I want to try to match it up with what we see in the Photoshopfile or receive part of the sea and then most of the AM so we basically need tomove it over a little bit and experimenting with this a little bit onmy own and I know what values and any use here instead of center center getrid of both of thoseand we’re gonna change these values will change the the horizontal value tonegative 200 pixels that will not get 200 pixels to the left and then the topvalue we want to pull it up a little bit about 60 pixels or consent that toonegative 60 pixels so again that report to the left 200 pixels and up 60 pixelssave that and refresh and then gets it closer to where we want to be feltpretty goodelse do the next section which is called port demo reel for the background herewere using an image cold tablet JPEG and we’re going to center that will be therewas injured as well the last one is called court logo the background imageis also a gift so will highlight the entire file name pair and call it a logo. give and for this one we want to vertically center at both for thehorizontal position and said its negatives 10 pixels and destroy thatsaved her final refresh your browser and that’s not exactly what we were goingfor lets tribes wouldn’t try horizontally centering that and see ifthat gets us where we want to be and let’s take a look at our Photoshop fileand that works pretty well it will go ahead and leave it right there soon goback to a Photoshop file and take a look at how everything is arranged here andright now you’ll notice we put a gray background on this section earlier butif we go back to it we can see that the green background is ignoring all ofthese images here and it’s basically just hanging out behind the portfoliotext in the reason for that is all of these items are floating to the left sowe’re going to use the clear fix hack in order to get that fixed and you can findthat very easily online just do a search for clear thick CSS and it should be oneof the first solutions here the top so this item at Web Toolkit dot info and wescroll down we can see all the CSS we need for this clear fix hackcome up here and click on the second icon here to give us just plain text andget those menus out of the way that we can highlight and copy it and we’regonna go into our CSS scroll all the way down to the bottom and I’m creating newsection here for the clear fix section clear fix and then we’ll just pasteeverything that we just copied here so all we need to do to get this to work isto give the parent of the food items a class of Clearfix against the parent ofthe items that are floating the items that are floating here we close that goback to our page the floating items are the list items in that unordered list sosince the list items are floating were gonna give the parent or they unorderedlist a class of clear fix will go back into our code and we’re gonna point toactually go into HTML and find the unordered list we’ve given it a classicportfolio list were also gonna give it a class of clear fix and that should beenough to work her magic still seem that savor site that CSS file and refresh thepage and as you can see that brings that gray background down below are images soone more thing let’s jump back into Photoshop file you can see there’s alittle bit of space above the portfolio text and below the images towards gonnaput some top bottom padding inside that section so jim back into our CSS and forour portfolio samples were gonna add padding here with straight 20 pixelsspaces euros of the top bottom padding will be 2000 will say that refresh yourpage and that gives us a little bit of room but I think that’s a little bit toomuch room on topup let’s let’s change this the the portfolio text itself already has sometop padding or protect margins on it so let’s specified this girls get a littlemore specific with this top padding which is set that its euro are rightpadding and serum or bottom padding at twenty let’s go and say that and see howit looks and then we’ll just had a little bit more padding to the top sofor the top padding which is this first one will put 435 pixels and see how itlooks a bit refresh and there we go that gives us the spacing that we’re lookingforso in the next video will finished styling these portfolio sections bystyling the captions themselves and so with everything single go ahead and moveon thanks for watching