PSD to HTML 3.15) Styling the Footer Content

Previous: PSD to HTML 3.14)  Setting Up the Footer

Next: PSD to HTML 4.1) Reviewing the Photoshop Files

PSD to HTML Complete Course

Transcription of PSD to HTML 3.15)  Styling the Footer Content

hello and welcome back to the PSD to HTML responsive portfolio build in thislesson we’re going to continue with her father and we’re going to style her listover here on the left which is a description list and it’s made up of aseries of payers of didi and BTW tags that ed tags we can see here is going tobe a little bit bolder in the DT’s gonna have a smaller italic text so let’s jumpinto our HTML and see what that looks like here we have our first columninside her father we have in each three and then we have this description listwith a class of voter lists and inside that folder list we have RDT tags whichhave which would basically be equivalent to a blog article title and then the DDTwhich would be the date that the blog was written so let’s target this furtherlist and get this look rates will jump into our CSS come down to the bottom ofher footer section skip a couple lines and we’ll start with r for her hyphenlist class notes point to the DET elements inside that further list andover gonna do here is that the fun wait to board then we’re going to point tothe DDA elements will point to further listing in space didi and for these weregonna set the margin left 20 because right now again if we look at it in ourbrowser when we get therethe DVD elements here are by defaultnudged over to the right so we’re going to get rid of that left margin and setit to 0 then I want to put a little bit of space between that date and the nextblog title so we’re gonna set a bottom margin here we’ll set margin bottom 220pixels say that refresh the page and there goes a little bit bettersecondly also an asset that fun style for those DDL and Sandra said that toitalic so you can refresh and it looks pretty good so we’ve got our firstcolumn down first second column which is inside an addresselement which is located here we’re going to add a new rule for that willskip a couple lines and 1.2 further states address here we’re gonna set fontstyle to normal because as we can see it’s currently set to italic sorefreshed that it’s normal mouse let’s make our Intertek within that address alittle more visible 12 footers base address space age to target those anchortags and we’re gonna set the color to Alegre pounds 90 1990 the same color weuse for the rest of our texts that are and we’ll send her text decoration tonone but we will make it stand out a little bit by setting the font style forthose anchor tags to italic will see that refresh and it looks pretty goodthen I want to give it an underlying for when we hover over it so it’s clear thatwe can click on it so awkward another rule four-footer address a hoops yearago a colon hovered near Regina said text decoration to underline so now whenwe refresh it and however over that text we can see the underlying therevery good so now let’s move on to the registration section we have to inputfields and a subscribe button in weekend again see what that looks like inPhotoshop so let’s let’s make that happen in CSS now so we’ll jump backinto text me and we’ll get started there so we’ll skip a couple lines and we’regonna point inside the folder and if we go back to HTML the we have a forum hereand I want to style the inputs here but just in case we ever decide to put someother kind of former inputs in the footer and I want to just target for herspace input instead let’s go ahead and add another class to this particular divand we’ll call it registration will save that jump over to our CSS and theninside the folder we’re gonna points to that registration class input into theinputs contained thereinso gonna set the width of these inputs returned the text fields themselves to100% of it take up the full width of the containing column gonna set the displayto block so that they appear on their own line will set the background colorfor these two agree value of 36 36 36 and we’re gonna put a lighter greenborder around it’s all set our border equal to 1 pixel solid and then we useavailable 6066 deed for that border color in the dark text color inside thisthese text fields is gonna be 60 60 60 which is the same as the border colorand then we’ll put a little bit of padding inside these text fields littlebit of margin on the bottom so that we can space them apart so well said marginbonham 210 pixels as welland then we’ll set our fun size in for the text inside those inputs to 18pixels so save go back into crewmen refresher page and that gets us kind ofwe want but if you look really closely you can see that the right edge of thesetext fields stands out a little bit beyond the right edge of the rest of ourcontent and that is because of the padding wheat added to these so not onlyis it a hundred percent wide it’s a hundred percent wide plus whateverpadding we added so in order to fix that will do just what we’ve done before bychanging the box sizing property to a value of border hyphen box say thatand refresh and they’re getting together with closer to where we want it so nowit’s trial or subscribe button and we look in our Photoshop file we can seeit’s just a large red button with white text so will jump back into our CSS andcreating a new rule excuse me for that but so will point to further face .registration which is the second class we need to that column and inside thatcolumn we want to point to the button element is we use the button element tocreate that so we’re gonna give it a background color of that same bright redwe’ve been using so go all the way to the top and copy that come back down tothe bottom and pasted they’re so get a background color for that button inplace will set our border to none and want a border on the button and we’llset or text color to white then I want to change the font with sitter funfamily to the fund and we’ve been using for our h1 h2 h3 tags which is this howegregious and so was just highlight that entire fun family rule their copy itcome back down to the bottom and we’ll just peaced over what we’ve alreadytyped so we’ve got that there and then I want to change the font size bring it upa little bit 220 pixels and let’s see how it worksrefresh and it’s a good start we need to put some padding in there and change theweb for spring the with all the way up to 100% and we know that if we hadpadding its gonna make the with even wider so let’s go ahead and change ourbuck seizing property to border heightened box to nip that in the budand then we’ll add some padding here may be about 10 pixels to the inside of thatbutton and then we’ll also add some margin bottom to the button as wellmargin but there’s nothing below it so we can leave that alone and just seewhat that was like save it refresh your page and there we go much better so nowyou click on that it takes us back to the top because we just gave it in ahref of pound but but we see that that’s working now so finally the last thing Iwant to do is I want to style are copyright here and if we look at ourPhotoshop file we can see that it’s getting darker color background and it’ssmall it’s centered and and that should should be pretty easy to do Sol jumpedback into text meand down here at the bottom we put our copyright section inside a nurseforcefully put it outside the container so it’s gonna spend the whole width ofthe browser but we’re going to center the Texas make it look like its spanningthe entire with except for the background color so it’s inside a spanwith the class of copyright and it’s inside the folder so let’s go back tosay that CSS 4.2 footers face and then the class of copyright so . copyrightand will set the width here to 100% and you can’t set the width of an inlineelement in a span is an inline elements we need to change it to a block elementby setting it’s displayed a book then we’re gonna set the background color toblack will set their text color to a value of pound 555 and then we’ll setthe Text online to center gonna put a little bit of padding inside that justto the top and bottom in sure we can put it everywhere doesn’t matter was justgoing to get on the top and bottom tho 20 pixels top bottom and then 2:04 leftand rightsame that refresh your page oops that’s the wrong window theory go refresherpage and that’s a little bit better except we want this to be pulled all theway down to the bottom of the browser window so the way we’re gonna do that iswe’re gonna set its position this copyright section the span we’re gonnasend its position to absolute and then said its bottom coordinate 20 save thatand refresh and we need to go to the right window thererefresh and that brings it down to the bottom but it seems to have disappearedactually impose a way up herewhat we need to do to fix that is to say its parent element to relativepositioning so let’s go back into text me and the parent of that copyrightelement is the element so we’re gonna give the footer and we have the rule forthe footer up here just under the beginning of that footer section we’regoing to set the position of it to relative when we do thatrefresher page we can see that it pulls it down where it needs to be and we’redone so that takes care of the full-size styling for our site only need to do nowis change it so that when we resizer browser by bringing in the with it willbasically resize and reorder the content within it based on the designs that wehave to thank you for watching and we’ll get started with that in the next video