FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.4 The CSS For Our Website

[SOUND]. The next step is to figure out what the width is of the website that was created in Photoshop. So we can do this somewhat easily, I'm going to select the Ruler tool by going right here and choosing Ruler, or I can press this keyboard shortcut. Next I'm going to specify the edges. Right here, and if I hold down Shift, I can limit it to a straight line, like so. Now I'm going to go to the end, and it appears in this case that the width is 935 pixels. However, we're still going to use the 960 framework because there may be some margins involved. So let's do that now. We're going to go back to and download these assets once again. If you're not familiar with 960, be sure to go back and watch the episode on it. And I'm going to open up these two directories and I'll turn each one side by side. And now we're going to go into the code CSS and we're going to copy over the necessary files. In this case we're going to copy over the text, which is their base text file, a reset, and then the 960 framework itself. Now if we want to do both 12 columns, and 16 columns we can choose this. However, if we wanna limit it so our file size is smaller. We can use this one right here. Now I will drag those in, and we're all set. Now I'm going to reference them. First one that we're linking to is our reset. Next, we're going reference the text.css. And finally, we're going to link to 960_12_col.css, referenced right here. All right. If you'd like to self close these, you can. It doesn't really matter. I'm gonna save this. And now, let's reload this in the browser and see what we have. Okay. Well, because we have applied some base grid class names like container_12 and grid_10. We already have a little bit of formatting and it's starting to look like an actual website, but we need to do a little more. The first step is, let's work from top to bottom. We're gonna get the header and the navigation area. So let's take a look at our PSD again for reference. And the navigation is all on one line. So let's do that now right here. I'm gonna create a divider and I've created a snippet. I encourage you to do the same. And we'll call this Header. And we're gonna take all of this information right here and place it in here. And that way I can easily browse through my style sheet. A little trick is to also use an equals sign at the beginning and then you can search for equal header and it automatically goes there. Because otherwise if you just searched for header, its going to bring up every reference to header. So that's a nice little trick to know. Next I'm gonna create a divider for our navigation. And let's first start by making the list items in line. So we'll say nav li display inline, save it and let's come back. And now we can see those are being displayed in line, but they are right underneath Black and White. So why don't we float the logo to the left. And float the navigation to the right. We'll try that. Float left, and navigation will float to the right. Let's try it out again, there we go. That's looking better. However, because we did float, we've learned about this, because we floated these two elements, they've collapsed and that's what's making it look like everything has pushed up. So let's come back to our header and let's use the overflow hidden trick to make sure it contains its floats, and that'll push this information down. The next step is I wanna go ahead and add that black box in that we can see right here. So it's just black. So we can specify a big width and a large height. And it's okay because we can adjust this later. Within index.html we called it grid_2. I need a better name. And we'll probably say perhaps callout. And you can change this later depending upon what you add there. Next I'm gonna go to the banner, and I'm gonna put that within a divider as well, because that's something I'll probably come back to often. There we are, and next we'll say callout. And that's gonna have a background of black, and we'll give it a height of 200 pixels for the time being. And now notice it should be the exact height of the background image here. So I can see that I set it to 231, so I'm gonna duplicate that as well. Okay and now we have the height. And it looks like the width probably does need to be bigger. But we're gonna come back to that. Next I want to get the basic structure in place. So let's do the main section as well. Let's come back to Photoshop and it's split into three columns. And what we decided was grid five, grid five to grid two. Let's come back and ensure that that is in place. Grid_five, grid_five, grid_two. But remember that it's not showing up correctly. And the reason why these aren't taking effect is because we've used the word two. But actually we should be using the number, that makes it a little bit shorter. There we are. And now let's come back, reload, and there we are. So, we've already have a, a basic layout, now all we need to do is add some finesse, add some padding, and make it look a lot better. So the first thing I want to do is get this area a little bit better because grid two probably is too small. So, let's come back and why don't we adjust it right here, and, right here at the bottom. But that's going to make it too wide now because we have 5, 5 and 3 is 13, and it's going to fall on its own line. So that means this may not be perfect. We have grid_4 and grid_4, but there's no way we can get these numbers to be identical without being too low or too high. So 4 plus 4 is 8, plus 3 is 11. And that's working down here, but then this is taking up more space. Next, I find it's easier for me if I use background colors so I can really easily see the dividers in my boxes. So we'll do that right now, temporarily at the very bottom. And we're gonna say get the grid_4s. And those will have a background of red, and we're going to get our container. So, that's container_12, will be green. And then finally grid three will be a background of orange. Now let's see, and if we reload we can kind of easily see exactly what we're working with. So, as I am doing this in real time and I don't have notes, you get to see how I would do this. The first thing I think is, there should be some spacing below the banner. So let's do that now. I'm gonna come back and below the banner you can see this main section begins. So, let's create a new divider for the main section and now I'm gonna say, main margin-top, give it some 20 pixels worth of breathing room. There we are, that pushes that down. Next I see that the footer has pushed up because this isn't lined up either. And now I am going to say, get a new divider for the footer and I'm gonna make sure that is clear both as well. There we go. And that's pushed down much better. My next note is, I would like some spacing below the logo as well. And we have margin right here of top and bottom of 10px, and left and right of 10px. And I must admit I don't remember writing that, so I might have done that as a mistake, because we could just reduce that to ten pixels even. So, why don't we keep 10px and then 10px, and then on the bottom will be 20px, in the left we will leave blank, because it's implied that it's 10. We reload and now that's been pushed down. Let's refer back to our Photoshop file. I see right here that we sliced out our logo but he does have a plus in it. So why don't we try that again, select it and now you see it was divided unto two layers. So why don't we group those together. And if we want we can merge them. I can press Cmd+E to merge, or Ctrl+E and then do it like we did before. Select > Create a New File > Save it > Turn off the Background > Save it as a PNG-24, and we'll overwrite the value of logo. There we are. Reload, and now we have the plus back. Okay. That was easy. The next step is we know that there was a little too much spacing here. And the reason is this design doesn't fit perfectly into a 12 column grid as we've seen here, because these are both set to one-third, which is what would make sense. It doesn't line up perfectly, so maybe we need a different number of columns. Now if we come back to the 960 framework. If you'll remember, there are multiple grids that we can use. And if I open this up again, I'll go to Code > CSS, and you see that we have 12 columns, 24 columns and even 16 columns. So that means we need to figure out how this would fit in. If we did 16 columns, that doesn't divide evenly so, that's why it's not quite as common. So, if we were to divide it into thirds, that would be more like five and a third. So, with that in mind, why don't we switch to a 24 column grid. Cuz that's going to give us a lot more flexibility. And to do that it's really easy, I'm going to open up my website and all I do differently is drag in my 24 column grid, like so. Next, we delete the old version and then we come back and we rewrite to 960_24. And now let's look at the new classes that we have and it's fairly similar. One difference is because we're using a 24 column grid, it's still the exact same width but it's a different number. I need to update this as well. So let's just save that and see how our website is looking now. And notice that all of them are much smaller. So we need to update these accordingly. Let's come back to Photoshop and let's measure, I'm gonna press I to select the Measuring tool. If yours does not come up, you can press shift I a few times til it does. And I'm gonna zoom in and select the width of what we have right here. And let's see what I get. Okay, so his is about 340. Let's see what we have that's really close to that within here. And I can scroll down and look at each one. And this looks about right. Grid 9 or so. So let's see how we can add up to 24. We have 3, so if we had 9 plus 9 is 18. Let's add that in right now. And we'll do the bottom section, grid_9, and 9. Reload, and that's pushing those out. So 24 minus 18 equals 6. And let's see how that lines up. Grid_6. There we go. And I think that's looking a lot cleaner. So yes, when you are doing it from scratch sometimes you have to change things up. If you decide an hour into your projects that you need a different grid, then do it because it only takes a moment or two to implement. Next I'm going to do the exact same thing for the banner right here, come to the top 18 plus 6 equals 24. There we go and now we are getting a real good looking website. All right, so I'm going to continue on. And I'm gonna check the spacing here again. And if we want to verify something, you can come back to your PSD, press Z to zoom in a few clicks. Now I will press I or select the ruler, and I'm just gonna measure, holding down Shift, what the distance is. And that way I can see what the margin is. And it's around 22 pixels, so we did that about right when we applied it. If we want to adjust this though, I can set it to about 20px. Reload. Yeah there we go. But now, here is one problem is at the top the navigation section is a little too high. So why don't we reduce that down and for now I'm gonna set padding-top to 20px. And what we wanna do here and we're just gonna use our I, is we wanna line this up perfectly with Black and White. If you need to see how it lines up in the PSD, always refer back to your PSD because you'll wanna be as close as possible. And, in this case, can you see I'm right underneath Black and White and the navigation section is just a touch above that. Let's try it in here. By the way, on the Mac I am pressing Shift+Cmd+4, which is traditionally used to take snapshots, but it can also be used to specify widths and use as a ruler of sorts. So I need to push up my navigation to 12. There we go. Next, let's work on our navigation section. Let's see how it looks in the PSD and it's very simple. He has gray text and the selected one or the highlighted one, presumably, if you hover over it, is a blacker color. So if we wanna figure out what the color of this is. I can choose the Text tool and I will select it. And then if I come up here it will automatically be set to the color of that text, in this case, it's 70, 70, 70. So let's add that in right now, and we will assume that all anchor tags are set to this color. So I will create a new new divider called miscellaneous. And set the a color to that, and then a hover, he had set it to black. Reload. There we are. And when I hover over one, notice it's now black. But in his design, the current page is black. The selected page is what we call it. So you can do that trick by coming back and applying a class and then the current page will always have a class of selected. We'll do it right now. Class equals selected and then we can also apply the hover styling to any class of selected. Reload and now that's received it, but when we hover over something it does it as well. Let's come back though, and notice that there is no underline. So let's remove that. Text-decoration none. And of course I should apply that to the generic anchors. Not the hover state. Reload. There we go. Next, remember how I noted that he used lowercase and I thought that was a stylistic decision. We can make it lowercase with our CSS by doing. Not on our general because it's likely, you only want that styling applied to the anchor tags within the navigation presumably. So why don't I do nav a to limit it to only anchor tags within the navigation, and then I will specify text-transform lowercase. And now that's been adjusted and we did it all within our CSS. Hover over each one, and that's looking fine. Let's check out the padding, and it looks like the spacing I have is a bit more than he has. So we can see what the default is. Inspect element, click on each list item and you can see the default margin left to 30. If we want to reduce this I'm going to press the down arrow and get it more towards what he has, which is 22. Or if you want to be more specific, always bring out that ruler tool. Zoom in and measure yourself. He's got 24. So we'll keep it at 24px. And we will update our style sheet. So we'll go back, and that's miscellaneous styling. So list item, all list items will have margin left of 24 pixels. I reload. Okay, this is looking a, a lot better. Now let's see about styling the buttons. If we go back to the PSD, his are very simple but there is some nice styling there. I'm gonna press Z to zoom in a few clicks. First thing I can see is it's a blackish background, so I will select right here and that will bring up an eye dropper tool. And then I can bring it over the text, click and that will change to the current color. So I will select that. Copy it and now I can use that as the background. But how do we target that anchor tag? We certainly don't wanna apply it to all anchor tags. And if we come back we remember that we applied a class of button. So let's do that as well. All button elements will have a background of this color. Now if I reload, there it is. But there's not enough spacing, so we should use padding for that. Let's see about how much he used. I'm gonna get my helpful ruler. Select it to the end and it looks like about six pixels worth. Six pixels. One more time. Reload. Okay, that looks pretty good. Now, obviously the default when you hover over an anchor is black. That doesn't look good. Why don't we make it white in this case. Button hover, color white. There we go. That looks good. Now, it looks like he's also set the text a little bit smaller, but we can verify that, and we should do that in general. What is the default font size? I'll select the text tool, select some text, and then I'll come up right here. And now, we can see the information. He's got a font of Arial, and the font size he selected is 13 pixels. With a line height of 20. Let's add that in right now. We can override the text.css file that was supplied. We can add it to text.css if we want, or if you'd prefer, you can work within your layout and leave that black. In this case, because we're within style.css most of our time. I don't want to confuse you too much. So we'll do it right here within our general, or you could also have this in a typography section. Font size 13 pixels, line height is going to be 20 pixels. Notice that we're just going to the Photoshop file, getting the values and transferring them over. And it's all we are doing here. Reload, and now it looks a little bit different, but the line height has been increased. Next, what about the default color, that's not hard black. And it has a color of 35, 35. So let's specify that as well. All paragraph has a color, now if you want that to be the default color across the board, you can apply that to the body element. But here we're going to limit it to just paragraphs. Reload, and now that's been reduced. But what about headings? Is he keeping the same color as well? And once again I'm gonna select this text, choose the color, and it does appear that he's using black as well. If we also look here, we can see that he has a really high line height set up. But we don't wanna do that within HTML. Because if your heading does break onto a new line, that means every single sentence is going to have that huge spacing. So what we should do is add some padding below it instead. And it looks like he's also set the letter spacing reduced as well. So we will come back, let's specify that H1 tags have letter-spacing of negative one pixel. And we're gonna set the same thing to H2's. And while we're at it, if we come back notice that I did use H1 tags here. I think that's probably not the best choice, I'm going to reduce this to h2, and I think that will be a little bit cleaner. And that's reduced so we need to figure out what the exact size is and also make the text smaller. In this case the font size is 26, so I'm going to add that in, h2 font-size is 26px. Also we're going to do text-transform, lower case. There we go. That's looking very good. The next thing that I see as I'm working through this, we're eventually going to get to our banner. But at the very top, that header is really close to the top. So I think I would prefer to have a little breathing room. So we can do that right at the top container 24 and we'll give it a margin top, let's start with 10. And we're mostly using our eye, but I think that's cleaner. Just a little more breathing room. Good. And next let's add the spacing below the headers, because notice remember he had a lot of room and then an underline. Now what color is this underline? I'm going to zoom in really close, select the eye dropper tool by pressing i, or Shift+i a couple of times. If I click it, now this color has been selected, and that's what I know my divider should be set to. So let's try this out because it might take a little bit of tinkering. We'll assume that all h2 tags will receive this styling. If you want to limit it to only within the main section you could do that as well. Border, bottom, 1px, solid this color. And what you'll see when we do this is it's right underneath, but we need to stretch that out. So if we were to set padding-bottom to 30px, you see that gets pushed down quite a bit. And that's why you need to come to your file and measure exactly what it needs to be. If I select right there, it is around 27. And then, after it, there's some more spacing of around 15. So, let's adjust this. 27, and the margin will be affected underneath the border, like so. And now if we come back, we can see that that lines up. I might have measured a little too high, so I will reduce that back down to maybe 24. Or maybe 20. You can play around with it. I think that looks good though. Alright, and next I want to work on this block quote. In the design, he has pretty quotes around it, and the text is much larger. And it's italic of course. I'll select the text and see he has it set to 15 with the line height of 20. Come back to miscellaneous blockquote and the font-size is 15, the line height is 20px and we want to make sure that it is italic text. I will save that and reload, and it appears that this is not taking effect. So let's see why. Inspect element, and we see we do have that on but the reason it's not taking effect is because the paragraph is overriding the styling of the block quote. So if we wanna target that directly we say blockquote, and then maybe comma blockquote p. And the reason I'm doing this is because that way we get the large font size even if whoever adds more HTML forgets to use a paragraph tag within. So it's future proof. Now I'll come back, reload, and there it's taking effect. Next I would like to add these pretty quotes that you can see right here. So first step is, select the color bfbf. And then we're going to use CSS pseudo classes because these are stylistic. So we'll say blockquote, and maybe only the block quote within the main section. Because if you added a blog later, they don't want those quotes with every blockquote. And with that in mind, I will take all of this out and bring it into the main section like so. Now I will make a declaration for before content will be for now a simple double quote, let's try that out. Refresh and to see that it's working, I'll change it to just lots of letters. And now I'm seeing that it's not coming up so that means there is a problem and we get to debug together. I'm going to remove main and let's see if it's working that way. And it is. So that means there's some problem. Shouldn't this block quote be a child of main? Well it should, maybe we made a mistake, and this is why you validate. So, we can validate or first see if we can figure it out on our own. Here's our main section, so then we have a grid_9, then we have another grid_9. But then we have this closing div, so it looks like we accidentally closed the main section too early. So we will indent this. And now, we have just done a little bit of debugging and, hopefully, we fixed it. And if I reload, now it's showing up. Good. So let's change this to a double quote. And can you see that it's showing up right there? Let's style it though and make it really big like so. So I'm gonna select this text and see what he has. He has it 40 pixels tall. Font size 40px, color that shade of gray. Let's try it again, good. I want to make the font style italic as well. And now we can see it's not quite the same as his and we can look for pretty quotes. So I'm going to search for pretty quotes html. So we'll check this out, and here we have some options here. And what we need are those pretty quotes. So I will copy that and come back and paste that in here instead. Now we have a curly quote, is what you would call it. And now that's looking a lot better. We need to do the same thing after it as well, so main blockquote after. And we're going to switch to the closing curly quote. Next, because I don't want to duplicate, I'm going to adjust this to main blockquote before, and then do the same thing after. That way I can group all of this styling into one and I don't have to repeat myself. Because that can be a big pain if I need to make adjustments, and it's also not a good practice. There we go. So, let's try this again. Reload. Looking better, but we know that this should be put on the right as you can see right here. So, let's adjust the float right. Reload. There we go. Let's come back and see what else we can do. The color should be different. It's not that grayish color. It looks like he's using almost black. Notice the subtlety in different colors here. So I'll set the color of all text within block quotes at the top right here to that value. Reload. That's looking better. And if I zoom out I'll get a better angle. And I'm gonna go back and forth. It looks like the beginning quote is right before the text. It's not on its own line. And the same thing for the closing quote, but that's not what we have. Now the reason this is happening is because we're applying this content before the block quote, but not before the paragraph. So, that's where you're getting that spacing. So, one way we can fix this it to apply this before the first paragraph. If I just do this, what it's going to do is apply this content before every single paragraph. And if you have multiple paragraphs within a block quote, that's gonna look really odd. So instead I'm going to limit this to the first paragraph, and that way this styling only gets applied. However, in this case this is the closing, so I'm going to change that to last and this one to first-child. Get the first paragraph within the blockquote and add it, and that way it should look a lot better. Now, we're not getting the styling anymore because we have to adjust it here as well, like so. Reload, and now that's looking better. But still, we need some more spacing. So you'll notice, little simple things like this, you could use a background if you want, but sometimes they, you need to spend a little bit of time with them. In this case I'm gonna add some padding left to the text itself. Once again, we're going to limit this only to the blockquotes within that main section. And if we do padding-left, let's do a big number so you can see exactly what's happening. That's pushing the text over but it's also going to put the quote over. But, watch what happens if we get the quote right here and we set the position to absolute. And we push it in the top left portion of that area. What you're seeing is it's disappeared, but it hasn't disappeared, it's gone all the way to the top right here. And you've learned about this in our Positioning tutorial. That's happening because we have not specified a positioning context, so it's using the body or the window as it's context. We can limit this though. By always specifying in your blockquotes a position of relative. And now can you see? Because we specified that is now limited to that section and we are able to add that padding. Good, now we're starting to get it. Let's scroll back down and I think that padding left is too much. Let's reduce it to 30. There we go. And I also want to push it down just a touch. So right here rather than top, let's do top 5px, and you might want to play around with it just a touch, maybe 7. Okay so we have the left section right. The right section should be on the last line, position absolute bottom 0 and right 0. Now I would presume it's not going to change, as you can see right here. And that's because it's already in the bottom right spot. So we just need to push it even lower so I can use a negative number, negative 5px. And that looks a lot better. Maybe 7 once again. So what we should do is test this, and test it by adding another quote right here, and if we did everything right it should still display nicely. Reload and there you go, you have the beginning quote at the top and the closing quote at the bottom. So it did take some tricker, you could use backgrounds if you want, but I like to use CSS whenever possible. Let's get rid of that and now we're done with that section. Okay, and we are about ready to get onto this banner. The last thing is I want to make sure everything lines up nicely. And next, we're about to get to styling this banner right up here. But one thing is that you always want to make sure your lines are nice and clean. So we should make sure that the top of the these headings, the beginning of the main section is consistent all the way through. But it's not. Notice how the blockquote is just a little taller, and even though that doesn't seem like a big deal, it actually is. So we can adjust this, and what's causing this is either margin or line height. If I hover over it can you see that the bounding box, there's actually a good bit of spacing above the heading. Now we can see that there is no margin applied. You can go to compute it to double check. No margin applied at all. So that means its line height. And the line height can add a little bit of spacing. If I were to set that to 1M which is the default for a heading 2. Can you see how it pushed up? And now if we want to double check that we did it right, right here, that should line up with the top. And can you see it does? So let's fix this, and we're going to go up to h2 tags and make sure that we specify that the line height should be one m. And now we've made a subtle change, but that really adds up, I promise you and everything is lining up nicely. We'll do this side as well. That lines up. Okay, good, so now you have a good working website. We just need to do a little more for this lesson. You've stuck around for a really long time, so congratulations. Let's get this banner text done. Do a little bit of the footer and then we're done for today and you can put up your feet. So let's go back to the Photoshop file. Zoom out. And can you see that right now, the text is white with a background. So if you ever feel overwhelmed, and you think, I don't know the beginning of how to do this. One step at a time. First we specify the color. So it's telling me right here I don't have that font installed. That's okay. But the color is set to white, and the font size is 28. And he has the letter spacing reduced ever so slightly. So we can do that right now. Let's go back to index.html. And within our banner section, at the very top, this is a heading. So why don't we make that an h2. You could also experiment with making these h3 tags, you just wanna create the proper hierarchy and you may need to go back and adjust it later. For now, I'll keep them all at h2s. But then remember, it is going to receive any styling that we've already applied, as you can see right there. So, now I'm thinking, why don't we come back and we're going to adjust all h2s. So, I'm going to select h2. And on the Mac I can do a quick search and replace by pressing Ctrl+Cmd+G. And we're going to change all those occurrences to h3. And then right up here, I will make just this section an h2. And that way I'm not receiving that styling. And then I can come back here and adjust things. So now, we're only targeting h3s with that text. And now, these will stay the same, but this is reduced to whatever is set by default. We'll scroll down a little bit more and see if there's anything else we need to change. And while I'm thinking of it, let's go ahead and get rid of those background colors that we set right here. We don't need those anymore, we know what we're doing. Okay so now let's specify the colors. So width in here, banner h2, the color is going to be white, the font size is set to 28px. That looks a lot better, and now we know we don't want the width to be too high. As you can see here, he doesn't even have the font set to bold and he is using a special font. So if you needed to, you could also use a custom font, or you could use a background image, it's just up to you. I like to use as much HTML as when possible, but generally you may want to use a a custom font. And you can look at Font Squirrel, or Google Fonts for that. So for now we're gonna specify a maximum width for this section, and we can see it's roughly around 400 pixels. So I will add that in, 400, and that means anything that exceeds that width has to drop to a new line. Next I'm gonna reduce the font-weight to normal, and that means no bold, just normal font weight. The next step is, this should be placed at the very bottom. So we can position it absolutely. However, remember, if we say top 0, left 0, unless we have a positioning context that's going to be all the way up here. Let's try it out. Nope. It's right up here. I was wrong because we have positioned the container. Now I'm going to position the banner because I want to set a new positioning context. There we go. Now, we specify bottom to 0. There we go. And next he does have a little bit of spacing from the left edge. Let's see what it is. Eight pixels and he has a background color. But it's not just any background color it's transparent. So we need to figure out how to do that. One step at a time. Left of 8px. That's pushed it away. And now I'm gonna try to apply a background color of black. But there's a couple of things that aren't right. First one is it looks like there's a little bit of spacing between each line. So we may need to play around with this. First, let's try to take care of the transparent background. Rather than setting a solid color, we can use a RGD for red, green and blue. But then there's also an optional fourth parameter that most modern browsers take advantage of these days, and that's called alpha, or transparency. If we want to specify black, you can either memorize it or go here, choose black, and then you can see RGB is 0, 0, 0. Alternatively, white will be the opposite at 255, 255, 255. So we'll do 0 for red, 0 for green, 0 for blue, and the alpha. So let's set it to 1, which would be fully visible, or 0.5, and that's going to be a little bit transparent. Can you see how that's come down? Next I want to push that a little closer to the bottom, so why don't we set bottom to negative 10px. You can always play around with this. And then if I zoom in a few clicks. That text is right up against the edge of the background, let's give it some more breathing room all around. Padding of 8px as well. There you go, that looks good. So that's looking pretty good to me. Let's come back and see what other differences there are. And what I see is the background seems to be unique to each one. So you can see that this last line has a background, and this middle line has a background, and this top line has a background. And there are ways to, to do this with what we call CSS3 gradients, but that's a little beyond your skill level. So I would recommend either stick with this or if you have to do it, you can come here. And to each line you could wrap them within something like a span tag, and then you could apply the background transparency to each span tag. However, that's really hard when you're working with a dynamic website, so you would need to figure out the best way to do this. You could either use an image for the entire text, and then use image replacement which you've learned. Or in our case we're gonna stick with this. I think it's fine for where you are at this point. The last thing I'm gonna do here is if I zoom in, there is still little too much spacing up top. So let's play with it in the browser. And if we set the padding top to 0. That's gonna push it down. And the bottom. Maybe we'll do the padding bottom to zero as well. That pushes that as well. So it looks like we don't need any padding top or padding bottom like we had applied. So right here we'll modify this to 8px on the left and right. But the top and bottom will be 0. Refresh and that looks good. Okay. So we have our header. Should the header be clickable? Absolutely. The logo should always link back to your website. The very top right here, wrap this within an anchor tag. However, one thing you may find if you're using image replacement is that when you use the text indent, it will no longer be clickable. Let's try it. Reload. And now if I hover over it, can you see I'm still not able to click on this? Let's inspect the element and figure out why. And it's because if I load this up, you'll see that the anchor itself that you would click on has been pushed all the way off the page. Because we specified that when we did text-indent negative 10,000 pixels essentially. So an easier way we can fix this is to apply the background to the anchor tag itself. Let's do that now. Header h1. Now, we're going to say header h1 a and now apply this information right here, bring that up. And also specify the width and height like so. And we should probably bring the float over as well because that belongs within the anchor. All right, so if we did this right, the heading should now be clickable because the text indent is only being applied to the h1 and not the anchor. And now if I click here, you can see that is a clickable link, and we can confirm it with that pound sign. So that's looking a lot better, but now I see we've added an issue right here where because we're floating the anchor tag and not the h1, the h1 is still a block level element. If I were to apply a background of red, if it contained anything floated, which is right there, so we'll have to do overflow hidden. What you'll see is it will take up that entire spot at the top. As you can see right there. So let's float the heading to the left, as well. And what you're gonna see is it disappears. And that's because the heading is now floated, and the anchor is floated, as well. And overflow hidden is actually working against us in this case. So there are situations where overflow hidden isn't enough to make it contain its floats. In this case, if we remove it, it does come back and it appears to work. But then, we have that issue that may or may not be an issue, that the heading one isn't containing that anchor as well. And you can fall into some potential issues in the future, so always make sure everything is contained. So we want to do is what's called a clear fix technique. And that is where you specify that after the anchor tag, we're going to clear everything. And that will make it contain it's float. So, we'll clear, and it's a rather long list, people often copy it. And we'll set a display block, we have to specify content, we'll just do a space and then we'll say visibility hidden. Don't worry about remembering this. And we're gonna set a height of 1%. So, watch what happens though if I reload the page. Can you see that, that's red? And that's because it is now containing the anchor tag. Now this is called the clear fix tag, and it's so common that most frameworks include it. If we go down to the 960 at the bottom, you'll see it offers a class called clearfix so that you don't have to retype these stylings every time. Now to use it, we apply the class wherever you think it's needed. This'll be fine, on the h1. To finish things off, Inspect Element. And we get rid of the red color. We don't want that. And we're gonna go ahead and get rid of any margins here. So we'll say, margin-bottom 0, and that pushes everything up. And now we have a clickable link, and that required a little more effort but only because we are floating and it's a little bit different in this situation. Most of the time you'll be able to get away with a simple process of adding an anchor tag. So, we'll go here. Red, margin-bottom, 0. So, we have a nice layout. Everything seems to be lining up quite well. What you would want to begin doing is tweaking, making, making sure that everything lines up. For example, it looks like we have an issue right here. Where there's some extra margin we would fix that. We'd need to do the footer, we can do that really quick together if you like. The footer has a border, and it's going to be the same border as we had before. So we now specify in our footer, I'm gonna search for footer, and it will have a border top of one pixel of that color. There we go, but notice that that border is all around. We really just want it on the top. And we do want some spacing between it as well. So I will select the ruler. Select how high that is. It is about 18. And now we will override this. So, border-top and then padding-top of 18px. And now you'll see that looks really good, and we're going to keep it like this for this lesson. So this has been the longest lesson of the course. In the next lesson we're going to add some tweaks and we're going to add one of those other pages, which will be much easier now that we have all of the styling in place.

Back to the top