PSD to HTML 3.14) Setting Up the Footer

Previous: PSD to HTML 3.13)  Styling the Captions

Next: PSD to HTML 3.15)  Styling the Footer Content

PSD to HTML Complete Course

Transcription of PSD to HTML 3.14)  Setting Up the Footer

hello and welcome back to the PSD to HTML responsive portfolio built thislesson we’re gonna move on with the footer footer is another section thathas a background that extends all the way to the edges and content that stillfits within the width of the rest of our content so again we have two levels ofcontent here and if we jump into HTML we can see that we’ve created it that wayif we jump down to our footer section here just inside her foot or we have adeal with the class of container so the fire itself will extend all the way tothe edges the container will container content and keep it at the same width asthe rest of our content so it seems to the footer itself first will come downbelow the portfolio section but just above the clear pics section will createa new section here for the father and we’re working in the site 18 folder forthis particular lesson so its creator rule for the filter element we’re goingto first of all give it a dark grey background color with a value of 25 2525 and in order for that to work rate we need to lighten up your text so we’regonna give our text you later Greek color of 1999 deep then I want to go outand play a little bit of padding to the inside of the footer mainly to the topand bottom so let’s add some padding here for the top organist that 220pixels so that there’s a little bit of space between the top of the footer inthe text that appears at the top for our left and right it’s going to be easierso for the right value which would be the next when we gonna set that 20for the bottom that you aren’t quite a bit of space at the bottom three assetthat 260 pixels and then for the less valuable said that 20 as well and itlooks will save that go back into her browser and refresh your page andthey’re going now our daughter is there a color so next we have these h3 tagshere for the from the blood contact us and register for updates and as we cansee in a Photoshop file there’s gonna be that seemed like red color almost pinkand in again those contained in h3 tags so in our CSS we’re going to point tothe h3 tags within the voters so far her space age three and we can scroll up tothe top again and grab that read text color we created a peer copy it and thencome back down to the footer section and said her color equal to that valuablespace it right there so that’s for each three tanks I’m also going to set thefont size here 230 pixels so the fun way to normal does remember this is a bookhe text if you set it to Boldin that’s not what we’re looking for and then forthe footer I’m sorry for the E Street Egham also going to set the top bottommargins 210 pixels will say 10 pixel spaces 0 save that refresh your page andnow are heading this look a little bit closer to what we’re going for so nowlet’s jump back into reached email take a look at our columns right noweverything stacked on top of each other but each one of these dudes here has aclass I’m sorry it starts here have a class of call one-third its column thattakes up one-third of the with so we have therefore them from the blogsection the contact us and the register for updates so let’s go ahead and targetthatone third column there will skip a couple lines here and point to the doccall hyphen one hyphen third class and for that class we’re gonna center with233 percent which is about one-third of the width of the containing area andwe’re going to set those columns to float to the left will save that inrefresh your browser and now we have our three columns but we’re seeing the sameproblem that we had before where the background color is collapsing so inorder to keep that from happening we just need to give a class of clear fixto the parent of the floating items the floating items are these deals with aclass of call one-third so we jump back into our HTML use that class of Colinthird we just need to give its parent element which is this David the class ofcontainer we need to give that also second class of clear fix will see thatrefresh and now we’re getting a little bit closer but we’re not quite therebecause we see that our background now extends down to the bottom the problemthough is our content is no longer centered well since that’s not workinglike we wanted to change something in the way that this is working so I’mgoing to jump back into text me and instead of giving this a class of clearfix I’m gonna show you another trick for achieving kind of the same result whatwe’re gonna do it comes to the end of this particular did this container soafter all three columns we have our closing contained herein just beforeclosing container div I’m gonna create another did and for that I’m gonna setthe style to clear colon both and then we’ll put a closing diff tech rightafter that and that should achieve the same result again we’re putting thatjust inside the closing container div will save that go back into chrome andrefresh and that gets us where we want to be her columns are still lined up inthe center and we’ve got our backgroundand color moving all the way down to the bottom so now that we’ve got that out ofthe way we’ll move on to the next video where we’ll continue styling or footersthank you for watching and I’ll see you then