PSD to HTML 3.13) Styling the Captions

Previous: PSD to HTML 3.12)  Laying Out the Columns

Next: PSD to HTML 3.14)  Setting Up the Footer

PSD to HTML Complete Course

Transcription of PSD to HTML 3.13)  Styling the Captions

hello and welcome back to the PSD to HTML responsive portfolio build in thislesson we’re going to finish up our portfolio section by styling optionsright now it’s just some text up at the top and then the icon below it but if welook in our Photoshop file you can see that we’re gonna adjusted we’re gonnamove it down to the bottom and we’re gonna put the semi transparentbackground behind it were gonna line the text to the left and the icon to theright and so we need to think about how we’re going to make that happen rightnow if you look in our HTML we can see how it’s put together we have a listitem and then inside that list item we have a span with a class of captioninside the span we have an anchor tag that has the text and then our imageicon next to it and the text looks like I’m not sure what we did hear you put aclosing anchor tag after the text and then another closing anchor tag afterthe the image not exactly what we were going for so we need to decide which oneof those who want to delete and it’s really up to you are up to your clientto whoever you’re building the website for whether you want this image to beclickable are not for now I just want the text to be clickable so I’m gonnaleave this particular closing Intertek there in a minute get rid of the oneafter the image so delete those and that should make a little more sense andtheir ego so again we have inside each list item we have a spam with the classof caption inside that span we have an anchor tag with some text and then wehave an image the image has a class of sample icon and again the span has aclass of caption so the span class of caption is the container that we’regonna put that semi transparent black background on and we also need to pullit down to the bottom ofthe column that its end the bottom of that background image and so we’re goingto need to do some fancy positioning here in order to get that to work sowhat I want to do is I want to use absolute positioning with these spanclasses here and pull those down to the very bottom of the go ahead and jumpback into Photoshopdown to the bottom of each of these columns using absolute positioning nowin order to do that we need to give the parent item of that span a position ofrelatives if we don’t give the parent a position of relative and then we givethis a position of absolute and set it to 0 then it will pull it all the waydown to the bottom of the browser and that’s not what we’re going for we wantto pull it down to the bottom of the containing element which means thatcontaining element needs to have a class of position and that’s something you’llfind yourself doing a lot so that’s that’s a particular quarter of CSS thingyou need to get used toso again we’re going to jump back into our CSS I moved everything into the siteseventeen soldiers all the changes we make in this lesson will be saved thereand and let’s jump ahead and make sure our HTML files saved will jump intosight that CSS were still inside the portfolio set section excuse me justjump down here and continue where we left off so first of all as I mentionedwe’re gonna give those spans a position of absolute and in order to do that weneed to give the apparent item we come back here in the parent item of thisspan is this list item we need to give this list item with a glass of portlaptops we need to give that a position relative and we actually need to givethat to all of these lists items not just on with port laptop so we can pointto portfolio list space Li and give those allies a a position of relative sowill jump back up herehere we have portfolio list liand we’ll add it there so just beneath margin rate will add a position hereof relative and then we’ll come down to the end of our portfolio items justabove the clear fix hack and we’re going to create a rule for portfolio hyphenlists the portfolio list remembers the class applied to the unordered listitself inside the list reporting to the list items inside that were pointing tothe spans and remember we’re gonna give these spans a position of absolute oncewe give it a position of absolute then we can said its bottom coordinate 20 andthat will pull it all the way down to the bottom of the parent element that inorder for us to look right we also need to set the width and height so we’regoing to set our with here to 210 pixels the same width as the container as thelist item itself and will give it a height 452 pixels so it’s we also needto give it a background color and I’m gonna use an RGBA value for thisbackground color because again I want to make it semi transparent so the waywe’re gonna do that when you said her background color equal to instead of ahex value that starts with a pound sign we’re gonna doRGB a value and it’s going to be black so the first three values whichrepresent our G&B are all gonna be 0 but then our last value represents the Alphawe’re gonna set that 205 let’s see that jump back into our browser here andrefresh and it’s a good start we pulled these down to the bottom and we’ve givenit a semi transparent background to know when to put a little bit of paddinginside that and we can come back to our CSS here and maybe add seven pixels orso of padding save that and refresh and it looks pretty good and then let’spoint to the anchor tags within that and edit the text we want to get rid of theunderlyingand I want to make the text white so we can point to portfolio hyphen lists facea for all the anchor tags inside that portfolio list will set the text colorto white and we’ll set text decoration to none and save that refresh your pageand there we go now the text looks a lot better and now we need to set the widthof the techs because right now but texas to why we wanted to wrap to the left andwe want I can to be over here to the right so first one to set the width ofit but if we tried to set the width here let’s set it to about a hundred and fivepixels we tried to set that save it and refresh its not gonna work because aweaker tagged by the fault is an inline element and he cannot set the width ofan inline element so we need to do to fix that is to change the way itsdisplay will change its display to block and then that with should work save itrefresh there we go now we can set the width of that text field so then I wantthis these icons here remember they have a class of sample icon I want those tofloat to the right so we’re going to point to that sample icon class and it’sinside the portfolio list so we wanted to be specific we could say . portfoliolist space dot simple life and icon and choose set those to float to the rightand it seemed that refresher page and we’re getting a little bit closer you’llnotice that the icon is being nudged down past the height of the text and inorder to fix that we just set the text afoot to the less or go back to theseanchor tags here and make it flow to the leftsave that and refresh and their ago now are a lot closer to what we’re lookingforhowever we do have a small problem as you can seethis black background is extending out beyond the edge of that two hundred andten pixel background and that’s because by Defoe remember when you add paddingor anything like that to an element it extends the width and height of thatelement so all we need to do is come back to that list item here and set itsorder I’m sorry its box sizing property to border hyphen box and that will makesure that this with of 210 pixels will be the final with even after we addpadding to it or save it refresh and there we go now we have it back where wewant it so that takes care of our portfolio section except one more thingI want to put a little bit of margin above it so that it’s not right upagainst this text here so we’ll just go back to his portfolio samples rule hereand we’ll set some margin top here maybe 10 pixels see how it looks a bit refreshand we’ll go and bring that up to 20 pixels saving refresh again and thatlooks a lot better now that we’ve got that done we’ll go ahead and move onwith him next video thank you for watching