9.8 Positioning - Video Tutorials & Practice Problems

<v Michael>All right. In the last section,</v> we ended up with a nicely styled navigation menu here. And in this section, we're gonna talk about some aspects of positioning, specifically using the example of this logo here. So, we're gonna position this nicely by the end of this section. Now, this is one of the trickiest aspects of CSS, and Lee, this is the kind of thing, like, I don't really know pretty much about this even now. <v Lee>Yeah. This is not a very intuitive one.</v> I know we said that before about the box model, but I would venture to say that the two subjects box model and positioning are- <v Michael>Yeah.</v> <v Lee>The most misunderstood parts of CSS,</v> the ones that cause the most number of headaches. So, we're gonna dive right in. <v Michael>Okay.</v> So, it seems like there are basically two possibilities when you style an elements position, when you like move it around. There's kind of the left right up down. Is that right? <v Lee>Yeah, and it's the natural position</v> that's in the flow of the HTML. <v Michael>Right, and then,</v> there's also something called Z index, which I did not know about before this tutorial. <v Lee>Right. And that's whether things</v> are farther away from you or closer to you. If you think of a webpage as a stack of papers, a Z index of one would be the bottom most piece of paper, and that's things like a background. <v Michael>Is it one or the zero.</v> <v Lee>One.</v> <v Michael>Is it zero index or...</v> <v Lee>I don't know if zero index actually works.</v> <v Michael>Okay.</v> <v Lee>I'm pretty sure-</v> <v Michael>It says zero in the text.</v> <v Lee>Oh, does it? Okay then-</v> <v Michael>Yeah.</v> <v Lee>Then it does. (laughs)</v> <v Michael>Okay.</v> <v Lee>'Cause I did check that.</v> (Michael speaks indistinctly) at one point. (laughs) <v Michael>Yeah, no,</v> this is one of these things in computer context is like, "Is the first thing zero or is the first thing one?" and it's hard to remember. Most things are zero these days, but there are exceptions for sure. <v Lee>Exactly.</v> <v ->Well, sometimes-</v> <v Michael>All right.</v> <v Lee>A zero might mean not shown.</v> <v Michael>Right.</v> Okay, I still don't really understand what the index is, but we we're gonna look at some examples of that in the next section. <v Lee>So, it's just</v> bringing elements in front of other elements, and- <v Michael>Okay, I'll need a concrete example.</v> <v Lee>Yeah.</v> <v Michael>But it's looking like that's the section</v> after this one, so. <v Lee>Right.</v> <v Michael>In this section,</v> we're gonna go through these other positioning methods. <v Lee>Right, and it also...</v> z-index depends on positioning. <v Michael>Okay.</v> <v Lee>So, you can't even use z-index</v> until you're declaring a position for something. So, that's why we talk about positioning first. <v Michael>Got it. Got all right.</v> <v Lee>Yeah.</v> <v Michael>Well, let's take a look</v> at these different examples that there are four that we highlight. There's position: static. So, this is... Here's the... What the declaration looks like. Position static. <v Lee>And-</v> <v Michael>This would be...</v> What would this look like in the CSS file. Is this really just top column or? <v Lee>Yep, that's correct.</v> <v Michael>So, what would that look like?</v> Would this- <v Lee>So, when something is positioned static,</v> it's set to be in the exact place that it is in the HTML, like in the natural position of it. <v Michael>Is that the default then?</v> <v Lee>Yeah.</v> <v Michael>Okay, I see. Yeah.</v> So, it just scrolls with the content. So, these things are position static by default, <v Lee>Right.</v> <v Michael>'Cause if I scroll, they just go along.</v> <v Lee>Yes.</v> <v Michael>Is that right?</v> <v Lee>It's sort of. Other positions will go along</v> as you scroll as well. It's just when it's position static, it's in the flow of content and it's not going to be respecting directional styles, like top and left. So, it's in that natural position, the pink box. And it's not gonna move out of that. <v Michael>Oh, I see. So here, top and left,</v> they're indicated here to show that nothing happens. <v Lee>Exactly.</v> <v Michael>Oh, and right, we're gonna contrast that-</v> <v Lee>With the next-</v> <v Michael>the other kinds. Got it.</v> <v Lee>Yep.</v> <v Michael>So, the next one is position relative.</v> Right. So now, I see you can contrast these because now, top 10, left 10. <v Lee>Exactly.</v> <v Michael>Actually moves it with respect</v> to where it was before. <v Lee>Right.</v> <v Michael>I understand.</v> <v Lee>And so this is why</v> it's important to understand the idea of the natural position here. <v Michael>Got it.</v> <v Lee>So, what it means</v> is that when you position something relative, you can actually move it around. But the coordinate system that you're using is based on the top left corner of the natural position. <v Michael>Okay.</v> <v Lee>So, if you say top 10 pixels,</v> it's moving it down 10 pixels from the top of the natural position, which is what the blue box is. And it's moving it left 10 pixels from the left side of the pink box. <v Michael>Okay. So, that's interesting.</v> It's moving in the opposite direction from what I would've guessed. <v Lee>So, if you wanted to go above the top edge,</v> you'd actually have to put -10 pixels. <v Michael>Okay.</v> So, where does this, where does the top left go? Is this in the CSS? Just- <v Lee>Yeah, it's just-</v> <v Michael>Inside.</v> <v Lee>In the CSS.</v> <v Michael>Inside the position.</v> We'll look at an example in a sec. So, let's look at position absolute to the next one. <v Lee>So, important thing to note here,</v> if we're gonna contrast with the last one with position relative. <v Michael>Yeah.</v> <v Lee>Oh, show them both the same way</v> that you did with static. <v Michael>Sure.</v> <v Lee>Yeah. There you go.</v> So, position relative, you see how the natural position of it is in the HTML <v Michael>Yeah.</v> <v Lee>on the left hand side right here?</v> <v Michael>Mm-hmm.</v> <v Lee>So, it's in the natural position,</v> and all the content around it- <v Michael>Oh, I see.</v> Respects its size and width. <v Michael>Right. Whereas here, just at the last.</v> <v Lee>Once you position it absolute,</v> it comes out of the flow of content. <v Michael>Ah, and I'm starting to see</v> how z-index might come into play. <v Lee>Right.</v> <v Michael>When you have content on top of other content.</v> <v Lee>Exactly.</v> <v Michael>Okay, yeah. That's what I was confused about.</v> <v Lee>So, what happens with position absolute</v> is it takes up zero natural page space, <v Michael>Mm-hmm.</v> <v Lee>and then it can be positioned pretty much</v> wherever you want relative to the next parent. And so, what that means is that, it has to have some parent container that provides the coordinates that it's based off... <v Michael>Okay.</v> The positioning is based off of. So, in the case of this diagram here, our little diagram text box has a wrapper, which is the green box. <v Michael>Yeah.</v> <v Lee>And that in this example</v> would have some sort of position style set, like position relative. And what that means is that top 10 pixels and left 10 pixels for our pink box <v Michael>Mm-hmm.</v> <v Lee>would be based off of the top left corner</v> of the green box. <v Michael>Okay.</v> <v Lee>This makes more sense</v> when you actually see it in practice. <v Michael>Yeah. We'll take a look, and then our final one.</v> <v Lee>But the the last bit</v> <v Michael>Yeah.</v> <v Lee>here on the right hand side</v> <v Michael>Okay.</v> <v Lee>to remember it is</v> <v Michael>Oh, right there.</v> <v Lee>that position absolute</v> will still scroll with the page. <v Michael>Okay.</v> <v Lee>So, even though you can move it</v> around pretty much wherever you want, it's still gonna move with the page. <v Michael>Okay, and I'm gonna guess</v> that the next one does not, then. (chuckles) <v Lee>That is correct.</v> <v Michael>Position fixed.</v> Here we go. <v Lee>Position fixed</v> is now based off of the page as a whole. <v Michael>Yeah.</v> <v Lee>And this one is not scroll</v> with the context. <v Michael>And it's supposed</v> to container or the parent. Yeah. <v Lee>Right.</v> <v Michael>And we'll be using that</v> for the fixed header in the next section. Right? <v Lee>Exactly.</v> <v Michael>Yeah. I've seen those on sites.</v> So, we'll talk about that soon enough. All right. Great. Well, so let's take a look at the positioning of this logo. <v Lee>Yeah, and before we actually put the logo</v> in a final nice position, we're going to first make some changes to the header to play around with these positions. <v Michael>Okay.</v> <v Lee>So, this will be a little bit of test styling.</v> <v Michael>Okay. So, let's take a look at our code here.</v> Here's the CSS, actually. Where's third default? Notice that we didn't delete this. Hey, let's go to that. Okay. (Lee chuckles) <v Michael>They're a little test span.</v> All right. Now, what we're gonna do here is edit the styles for... Oh, this is for .header now. <v Lee>Correct.</v> <v Michael>Right. Which we haven't actually styled.</v> So, this class here. <v Lee>Right.</v> <v Michael>Where should this go?</v> Just right under header styles, maybe? <v Lee>Mm-hmm, yeah.</v> <v Michael>The wrapper..</v> <v Lee>Yeah. 'Cause this is for the wrapper, so.</v> <v Michael>Okay.</v> <v Lee>This is kind of the first thing that you'd see,</v> so. <v Michael>Yeah.</v> Okay. So, the styles we've got here are a background color, which is like a, what is it? A medium gray, or. <v Lee>It's a medium gray, yeah.</v> <v Michael>Yeah.</v> All right. What I see, it's AAA, which remember if they're all the same, it's some shade of gray, or it could be white or black. Streams. <v Lee>It's a streams.</v> It's a nice light gray. <v Michael>There it is right up here.</v> <v Lee>Or medium gray.</v> <v Michael>Yep. And then let's make it bigger.</v> 300 pixels. Yeah, that's a lot bigger. I guess the logos can take up some space here. Right <v Lee>Right.</v> But this will give us a nice little canvas to play around with positioning. <v Michael>Okay.</v> So, it's 100% here. And what does that change? It didn't seem like a change or anything. <v Lee>It didn't change anything,</v> but we were just doing that so that when we play with some of these positioning things, you'll see how positioning can affect page layout. <v Michael>Okay. All right, so our first task then</v> is to start positioning this logo. We will actually add a real logo? <v Lee>Yes.</v> <v Michael>In a moment, but for now,</v> we're just gonna position the text. Where should this go? Oh, this is down here. We actually have a header logo stuff. So, should this go on top head of this? <v Lee>Mm-hmm. Yeah,</v> <v Michael>I think.</v> <v Lee>That would be perfect spot for it.</v> <v Michael>Remember it's the header logo class, right?</v> Yeah. There it is. <v Lee>Mm-hmm.</v> <v Michael>Header logo.</v> And we're going do position absolute. I'm curious. Does that do anything by itself? <v Lee>That will take it out of the flow of content,</v> but because none of the content that's in the header right now is affected by that, it doesn't matter. <v Michael>Okay.</v> And then the other thing just to start off with is we're gonna say bottom, 50 pixels. <v Lee>Right. And now,</v> before we refresh here. <v Michael>What does it mean?</v> Yeah. <v Lee>The thing to remember</v> is that because we positioned it absolute, and now are setting a bottom. <v Michael>Hmm-mm.</v> <v Lee>What that means is that,</v> it's going to position itself 50 pixels below the bottom of the parent container. <v Michael>Okay, and it's parent container is.</v> <v Lee>Or 50 pixels from the bottom, sorry.</v> <v Michael>From the bottom.</v> <v Lee>Yeah. 'Cause it's measuring up. Yeah.</v> <v Michael>So, what is the container then? Is it-</v> <v Lee>Well, let's...</v> <v Michael>All right, let's take a look.</v> <v Lee>Exactly. That was my point. (laughs)</v> So, you can see. <v Michael>Wow.</v> It's all the way down here. <v Lee>And the reason for that</v> is that we have no positioning set on our header. So, it went up to the next parent container, which happens to be the whole HTML document. <v Michael>Got it.</v> <v Lee>And so now, it's positioned 50 pixels</v> from the bottom of the HTML document. <v Michael>Oh, wow. Okay.</v> <v Lee>And this is one of those things where...</v> So, as you're scrolling, you might think like, "Oh, it's gonna be at the bottom of the page." <v Michael>Right. But it's not.</v> <v Lee>This is one of those weird things</v> about the browser where, when you first load a page, this is what it considers the dimensions of the document. <v Michael>Okay.</v> <v Lee>Yeah.</v> <v Michael>So, that was position absolute.</v> And now we're going to take a look at a relative position. <v Lee>Well, we're gonna add it to the header.</v> <v Michael>Okay.</v> <v Lee>And, so.</v> <v Michael>Oh, I see.</v> It's gonna be the current. <v Lee>So, what that's gonna do</v> is we're gonna then contain the header logo inside of the header itself. <v Michael>Oh my God.</v> So, we actually do want this absolute positioning here. <v Lee>Right.</v> <v Michael>For the header logo.</v> But then we need to go up to the header here, and make it position absolute in alphabetical order. <v Lee>No. Position relative.</v> <v Michael>Oh, sorry. Position relative, yes.</v> Well, actually what would happen if we did that? <v Lee>It would actually work,</v> but it would pop the whole header out of the flow. <v Michael>Okay.</v> <v Lee>So, you can see it's now covering the hero.</v> <v Michael>Yeah.</v> <v Lee>But you can also see that the logo</v> is now inside of the header, and that's because the header now has a positioning style of some sort- <v Michael] Right>- [Lee] Attached to it.</v> <v Michael>So, if we do this,</v> now it'll be in the same spot, but the hero will be in the right place. <v Lee>Exactly.</v> <v Michael>Cool. All right, and what's the next step?</v> We wanna look at moving it around a little more. <v Lee>Mm-hmm.</v> <v Michael>So, it turns out</v> that we can use negative positioning. <v Lee>Right.</v> <v Michael>And much the same way we use negative margin.</v> Is that right? <v Lee>That's correct.</v> And so, if we add a bottom -50, it'll be below the bottom of the parent container. <v Michael>Oh, I see. So, like this.</v> <v Lee>Yeah. 'Cause you're always counting</v> everything from the edge of the parent. <v Michael>Yeah, I got it.</v> Yeah. So, this is 50 pixels. So, it's gonna be down here. Will it push this h1 one outta the way if I do this? <v Lee>Nope.</v> <v Michael>No. Not.</v> <v Lee>Because it's out</v> of the flow content. <v Michael>It's absolute.</v> Got it. And so now, we can also move it over here. If we give it say 50 pixels on the right. It's gonna go as an example of right left positioning. That. <v Lee>Yep.</v> <v Michael>So, we're just playing around.</v> We're obviously gonna eventually have the logo be somewhere over here. <v Lee>Exactly.</v> <v Michael>In the upper left part.</v> But this is just to demonstrate. Now, what if we did -50 here? Is this just gonna go off the page? <v Lee>It will go off the page.</v> <v Michael>Right? So, it disappears and...</v> Oh, look at that. I can scroll over to it, though. <v Lee>Yeah. It breaks it. (chuckles)</v> <v Michael>Yeah. That's not good, but-</v> <v Lee>Yep.</v> <v Michael>That's pretty cool.</v> <v Lee>And so likewise, that would also work.</v> You can add a left of, let's say 200 pixels to our header class, and because it's positioned relative, it'll pay attention to something like this style. Oh, you misspelled left. <v Michael>Yeah. There we go.</v> <v Lee>And now it'll move left and also the page.</v> So, this is what I meant when I said we'd set the width to 100. <v Michael>Right.</v> <v Lee>So, it is 100% of the original parent container,</v> <v Michael>Yeah.</v> <v Lee>which happens to be the HTML.</v> And then it's moving left by 200 pixels. <v Michael>Right. So it...</v> I still don't understand if I get rid of the width 100%. Doesn't seem to change anything. Did it change anything? <v Lee>No, it didn't.</v> <v Michael>So, it's there.</v> I mean, there must be some effect of it, being 100% <v Lee>Yeah. I mean, it just reinforces it</v> so that it wouldn't change. <v Michael>I was gonna think semantically-</v> <v Lee>Yeah.</v> <v Michael>Makes sense. It's just a reminder.</v> Okay. So, let's get rid of this here and undo this too. Well, are we now gonna put the logo in the place where it actually is supposed to be? <v Lee>Well, let's first give the header logo class</v> some background and height and width. <v Michael>Okay. Just preparing it for the actual logo.</v> <v Lee>Well, actually it's to...</v> We're gonna take a look at how you'd actually position something in the center of something else. <v Michael>Oh, okay. So, we're gonna talk about,</v> oh, this is tricky. Yeah. This is one of the hardest subjects. <v Lee>Right.</v> <v Michael>Okay. Yeah.</v> This is some good demo stuff. So, let's change the background color of this thing. Yeah. We're kind of taking a tour through this, right. <v Lee>Right.</v> <v Michael>And then we're gonna actually</v> put the real logo in. So, I just want to see where we are. So, it's up here. Let's get rid of the right. Let's give it a... So, now it's over here, <v Lee>Mm-hmm.</v> <v Michael>and it's a natural place,</v> and we're gonna give it a height and width of the same. Just make it a square. <v Lee>Mm-hmm.</v> <v Michael>Is that right?</v> So, this is just so we have something to work with. <v Lee>Yeah. It was 110 in the...</v> <v Michael>Oh, you're right.</v> Look at that. Where did go wrong? Oops. Height and height. (Lee laughs) <v Michael>There we go.</v> Okay. So, now we've got a square. <v Lee>Yep.</v> <v Michael>And we're gonna try to position it.</v> <v Lee>In the middle.</v> <v Michael>Somewhere.</v> Yeah. So, like the goal is to get it in the middle. <v Lee>Right.</v> <v Michael>And we're gonna fail at this initially.</v> Is that right? <v Lee>Correct.</v> (Michaels chuckles) <v Lee>So, left, and top,</v> and all these positioning things can accept percentages. <v Michael>Okay.</v> <v Lee>So, if you put top 50% and left 50% in,</v> you might- <v Michael>Right.</v> <v Lee>think that it would be in the middle of the page.</v> <v Lee>Yeah. That seems like it ought to work.</v> <v Lee>But because the positioning is done</v> from the top left corner of... <v Michael>Of the object.</v> <v Lee>Of the object,</v> because we're using top and left here. <v Michael>Ah.</v> <v Lee>So, the top left corner is in the right spot.</v> <v Michael>This isn't the center,</v> <v Lee>Yeah.</v> <v Michael>but we want this</v> to be in the center. <v Lee>Right.</v> So, we need to use little bit of trickery here. And one technique that we can use, and you can only use this if you actually have a height and width on an element <v Michael>Right.</v> <v Lee>is to use negative margins.</v> <v Michael>Yeah.</v> <v Lee>So, you can give a negative margin</v> that is half the height, and half the width. <v Michael>Or half the 110, right.</v> <v Lee>So, minus 55 pixels</v> and then- <v Michael>So, it's top.</v> <v Lee>Yep.</v> <v Michael>Right. So, top right. Bottom left.</v> So, we're pulling it down 55 pixels. <v Lee>Up 55 Pixels.</v> <v Michael>This is top. Oh, right.</v> So, we're pulling it up 55 pixels, <v Lee>Yeah.</v> <v Michael>and then pulling it-</v> <v Lee>Left.</v> <v Michael>left 55 pixels. Right.</v> And so that's going to move this to this spot. <v Lee>Right.</v> <v Michael>Wanna refresh, lets take a look.</v> <v Lee>And there it' is.</v> (Michael exclaims) <v Lee>But again,</v> this only works with something that has a set, height and width, Which you can't <v Michael>Right.</v> always rely on. I mean, a lot of times with content, you don't know how long it's gonna be, or how short it's gonna be. So, you don't wanna limit yourself to trying to fit everything into a space. So, there is a newer CSS technique that actually simplifies this whole process and makes things a lot easier by allowing you to move elements around on the page based on their own size. <v Michael>Okay.</v> <v Lee>And like their own center.</v> So, this was called transform. And what we're gonna do is we're gonna translate, which means to move in a 2d space, <v Michael>Right</v> <v Lee>Here.</v> <v Michael>So, let's get rid of,</v> we're gonna get rid of the margin and the height. I know we want that. We want everything else, right? <v Lee>Yeah, just for now.</v> <v Michael>We just want the margin.</v> <v Lee>Just for to start.</v> <v Michael>Transform.</v> Translate and then we're gonna translate, this is X. <v Lee>X and Y, yeah.</v> <v Michael>X and Y, so.</v> <v Lee>in CSS, everything that uses a position</v> where there's a comma like this, it is always X and Y. <v Michael>Right.</v> <v Lee>So.</v> <v Michael>And that's the convention in math as well.</v> So, if we translate 50% up, <v Lee>And 50% left, and so what this is doing-</v> <v Michael>To the left.</v> <v Lee>is it's based off of the center point</v> of the element. <v Michael>Right.</v> <v Lee>So, when we-</v> <v Michael>this should be the same.</v> <v Lee>That'll be the same.</v> <v Michael>Right. So, I'm gonna move this-</v> <v Lee>But now if we go back and remove the height.</v> <v Michael>Okay. So, I'm gonna try this.</v> <v Lee>Yeah, and the width too,</v> just get it all out of there. <v Michael>Is that right?</v> <v Lee>Yeah, and it'll still be in the center.</v> <v Michael>Oh, it's still in the center.</v> I see. So- <v Lee>Pivot type</v> <v Michael>Previous technique wouldn't work</v> because we don't know how big this thing is. <v Lee>Right.</v> <v ->So, if you were to turn the width back on,</v> <v Michael>Yes.</v> <v Lee>it'll still be in the right spot and that width.</v> <v Michael>Right.</v> <v Lee>And so it'll</v> just adjust. So, if you have content- <v Michael>It must've equal.</v> <v Lee>That's changing in length, you know,</v> this worked way better than trying to force things to fit into something with a set width and height. <v Michael>Right.</v> That's great, all right. Well, I definitely learned some things about how to position elements. Are we done with the demo? Is that good to go? <v Lee>Yeah, we're actually</v> gonna add the image in now. <v Michael>Okay. Now, we'll add the real logo.</v> So, let's take a look at how to do that. We're going to download an image from the web, but first, we need to make an images directory. Is this the jackal thing? Does it have to be called images? Do you recall? Or is it just a convention. <v Lee>It's just convention, I believe.</v> Because you still have to specify this in all the source links. <v Michael>Right, yeah.</v> So, this is the kind of thing that would work with just a pure static site. <v Lee>Right.</v> <v Michael>It doesn't use jackal or anything like that.</v> We're going to o-curl an image from the web, and -o, we use this in other tutorials, several of the other learned in enough tutorials use this, but, so -o, and then the target directory, it's called logo.png. So, curl -o image/logo.png, and then we're gonna do capital OL, which follows redirects, and then we'll get it from the Learn Enough Content Distribution Network, or what content delivery network. I'm not sure which it is. And cdn.learneough. com/ and it's in subdirectory lecss. You can just copy this from the written tutorial if you want, see if this works. There we go. You can take a look at it. Here's the logo. And now let's link it and go back to our source here. And this is gonna be in the header, right? We're gonna have a link rather than to the text logo. We're gonna actually put the logo in. So, you can have a link to the image. And now, the source is gonna be absolute. Because of the way jackal works, we can do /images. So, it's from the root directory /logo.png And we wanna give it an alt as well. And let's take a look at that. All right. Well, you know, (both chuckles) <v Michael>there's something there,</v> but this is clearly not what we're looking for is in terms of our final (chuckles) result. All right. So, what are we gonna do now? We need to make this look sensible. <v Lee>Well, we're gonna start by,</v> if you go back to the CSS. <v Michael>Yeah.</v> <v Lee>We're gonna start making changes to the header,</v> and we're gonna give the header background color. <v Michael>Okay.</v> So, we've got AAA here. We're gonna actually make it black. Is that right? <v Lee>Right.</v> And just to be safe for any text that happens to end up in the header, we're gonna change the font color to white. This isn't gonna affect our links because they already have their own specification, which it's just one of those like good ideas. So, that <v Michael>Yeah.</v> <v Lee>if you do put something in there,</v> it's not gonna show up as the pages default black. <v Michael>Okay.</v> <v Lee>And then-</v> <v Michael>And we're gonna get rid</v> of this stuff here, right? <v Lee>Yes.</v> <v Michael>The height,</v> <v Lee>You can rid-</v> <v Michael>Position, width.</v> <v Lee>You can rid all of that.</v> <v Michael>Right. I'm curious to see what that does.</v> Take a look. Whoa. Okay. <v Lee>And then we're gonna change</v> the header nav colors to white. <v Michael>Okay. That's... Where is that?</v> Here? <v Lee>Mm-hmm.</v> And also the hover state for the first child to white. <v Michael>So, is that gonna change these links?</v> <v Lee>Mm-hmm.</v> <v Michael>Why are we doing that now instead of-</v> <v Lee>Because the whole background is gonna be black.</v> <v Michael>Oh, I got it.</v> We're gonna really change things up here. <v Lee>Mm-hmm.</v> <v Michael>Okay. So, it's the same font size and we want.</v> <v Lee>The hover there for the first child.</v> <v Michael>Hover here?</v> <v Lee>No.</v> <v Michael>This one here?</v> <v Lee>One more. That's the one.</v> <v Michael>Oh, I see. This is okay.</v> <v Lee>And we're also gonna change-</v> <v Michael>Oh, right, right. I understand.</v> <v Lee>Our border left.</v> Are those little lines that we made between the links? <v Michael>Yeah.</v> <v Lee>From being 30% black to being 30% white.</v> <v Michael>Yeah.</v> So, where was this here? <v Lee>The border left. Yep.</v> <v Michael>Ah, okay. So, we're gonna do it.</v> Is this 255, then? <v Lee>Hm-hmm. 255, 255, 255.</v> <v Michael>Oh, I just realized something.</v> So, I was wondering why the shape of this wasn't- <v Lee>We left that width</v> <v Michael>All the way tossed</v> <v Lee>turned off.</v> <v Michael>Just because we had this commented out.</v> So, let me just try that up. Okay, one out. (laughs) what is going on in here? <v Lee>We're actually gonna change that.</v> <v Michael>I know we're gonna change it,</v> but I just want in the text it was the full size of it. <v Lee>Right.</v> <v Michael>Okay. Well, it doesn't matter</v> 'cause we're gonna change it all up. <v Lee>Yeah, and so our borders are now</v> based off of white as well. <v Michael>Right, these here.</v> <v Lee>Yep.</v> <v Michael>Yeah. So, we definitely wanna change</v> the background color there. <v Lee>And the background is gonna re-appear</v> as soon as we change header logo position to relative, which is what we're going to do. <v Michael>Okay. So, what do we want,</v> why are we doing that? Because we want to- <v Lee>Just to pop it back into place</v> and you'll see it. <v Michael>Yeah.</v> <v Lee>So, now when you refresh,</v> <v Michael>Yeah.</v> <v Lee>You'll have a whole big header.</v> <v Michael>Oh, wow. Look at that.</v> There's like a little bit of space here too. <v Lee>That's actually bleeding through</v> from the header logo. <v Michael>Okay.</v> <v Lee>So we're gonna make some changes for that, though,</v> for this whole thing. <v Michael>So, why did position relative do that?</v> Because now, it's in the flow of the document. <v Lee>Now it's back in the flow of the document.</v> <v Michael>Got it.</v> <v Lee>It was got it positioned absolute before.</v> So, it was taken entirely out. <v Michael>Yeah.</v> <v Lee>And so-</v> [Michael] I understand. <v Lee>The wrapper</v> <v Michael>If we position,</v> <v Lee>had no height.</v> <v Michael>Yeah, we go back to this.</v> Yeah. If we go back to our images, it was position absolute, it was basically doing this. <v Lee>Right.</v> <v Michael>Like the rest of the page</v> was coming up underneath it. <v Lee>Exactly.</v> <v Michael>I understand. Okay.</v> All right. So, we've got the position relative now. And there are a bunch of other rules though, that you came up with. <v Lee>Right.</v> So, right now the header logo, because it's attached to a link, is attached to an inline element. <v Michael>Okay.</v> <v Lee>So, let's make this thing a block element.</v> <v Michael>Okay. So, we can do that with display block.</v> Right? <v Lee>Mh-hmm.</v> <v Michael>Do we need the height and...</v> <v Lee>Yep. We're gonna change that to view height,</v> <v Michael>Oh, okay. So, we want display block that's here.</v> <v Lee>And let's change the height and width.</v> <v Michael>Ah.</v> <v Lee>Okay. There you go.</v> So, you can see the images poking out. It's not being contained by the box. <v Michael>Yeah.</v> <v Lee>That is the header logo.</v> So, if we were to set <v Michael>Yeah, right.</v> <v Lee>overflow hidden on that,</v> most of the logo would disappear. <v Michael>Oh, okay.</v> So, why is that? <v Lee>We'll try it, because the image</v> is inside of the header logo, but the image is bigger than that box that we gave for the header logo. So, now you can see the edges of their logo. <v Michael>Oh, wow.</v> So, it's getting cut off like we saw. <v Lee>Right.</v> <v Michael>And we talked about overflow.</v> <v Lee>And actually get rid of the transform translate</v> so we can actually see the whole image. <v Michael>Okay.</v> <v Lee>Now when you go back, there we go.</v> So, <v ->[Michael Okay.</v> <v Lee>what we want is we want the image</v> to fit inside there. So, let's add a class before we move stuff around. <v Michael>Mm-hmm.</v> <v Lee>Let's fit the image inside,</v> and right below the header logo class. <v Michael>Yeah.</v> <v Lee>Add new style that's targeting the image inside.</v> <v Michael>I got it, yeah.</v> <v Lee>We'll make it. Yeah. 80% of the-</v> <v Michael>Can we make it a little smaller?</v> <v Lee>The box that it's in.</v> <v Michael>Oh, look at that.</v> <v Lee>There you go.</v> So, now the whole thing is fitting in that logo. <v Michael>Now, so why did it shrink so much?</v> 'cause if I do height 100%, right now it's 100% filling this box. <v Lee>Right.</v> <v Michael>But if I get rid of the height,</v> then it just kind of floats freely. So, which one of those rules is it interacting with? <v Lee>Well, it's interacting with the height of the box.</v> The box is 110 pixels high right now. <v Michael>Oh, it's 110 pixels, so.</v> <v Lee>Right. So, right now, the-</v> <v Michael>Oh, this is just the size of the image.</v> <v Lee>That's the native size of the image.</v> <v Michael>I got it.</v> <v Lee>Nothing is affecting on it.</v> <v Lee>This is the size of the image.</v> A height 100% is not 100% height of the image. It's a 100% of the... <v Lee>Parent.</v> <v Michael>Of the parent element. Got it.</v> So, this here is this, but oops. It would look better if it's a little bit smaller. 'Cause right now, it's kind of poking the bottom there. So, 80% looks good. Oops. What happened there. <v Lee>Hm?</v> Well, go back to the... <v Michael>Why did it move over like that?</v> So, 100% 80%. <v Lee>Oh, it's there.</v> <v Michael>Oh, I look at that.</v> I've got two cursors. (laughs) That's so strange. So, what happened here is we broke one of the rules. It's really odd. Okay, there were two cursors that happens in sublime, but I don't know if that's ever happened before. That's really strange. What's going on. <v Lee>Oh, yeah. You lost the bracket.</v> <v Michael>Curly brace styled</v> <v Lee>The curly brace.</v> <v Michael>Look at that. All right, here we go.</v> Okay. This is the kind of thing that happens first? It's like, "Wait a minute, why is it broken?" That's because it was suddenly not applying a bunch of rules. (Lee chuckles) <v Michael>There we go.</v> <v Lee>Yeah.</v> <v Michael>Okay.</v> <v Lee>So, to continue with our things,</v> we're gonna resize the box <v Michael>Yeah.</v> <v Lee>to be 10 view height.</v> <v Michael>Okay.</v> Instead of 110 pixels <v Lee>And 10 view height</v> in width. <v Michael>So, it's 10% of the height.</v> <v Lee>Height.</v> <v ->And because we wanted to be a square,</v> we're doing the same thing for the width. <v Michael>Right. So, let's take a look at that.</v> <v Lee>Okay, and then we actually</v> still have the left and top positioning on. So, if we get rid of those, we will find that it is on the left side of the page. Oh, look at that. <v Michael>That's cool.</v> <v Lee>But there's still more.</v> <v Michael>Okay. (chuckles) There's still more.</v> <v Lee>So.</v> <v Michael>All right,</v> what else do we have to do? <v Lee>If you remember-</v> <v Michael>It's like right up against the edge for one.</v> <v Lee>Yeah.</v> If you remember, the images are inline element, so we can move it to the center of that box by doing text-align center. <v Michael>Okay.</v> <v Lee>And then it's-</v> <v Michael>It's the center of the little box</v> that inside it. <v Lee>Yeah, We can change</v> the background color of the little box. <v Michael>Yeah.</v> <v Lee>And it makes it easier to see what we're removing.</v> <v Michael>Okay. So, you wanted-</v> <v Lee>You just add it, just change it to blue.</v> <v Michael>Just here?</v> <v Lee>Yeah. Anything red.</v> <v Michael>So, right.</v> So, you can do the f00 would be red. Oh, I see. And so, that's what this did, just text-align center. <v Lee>Yeah.</v> <v Michael>Okay.</v> <v Lee>So, then-</v> <v Michael>It's an inline element,</v> but we've made a display block. So. Oh, it's the image that's an inline element. <v Lee>The image is the inline one.</v> <v Michael>Got it.</v> <v Lee>The link would've been too,</v> but we want this link to be a container for our image file. So, <v Michael>Right.</v> <v Lee>We made it a block element</v> 'cause we wanted- <v Michael>Okay.</v> <v Lee>To position it. So, we also wanna move the-</v> <v Michael>Here we go.</v> <v Lee>The logo away from the top.</v> So, if we were to add padding in there. <v Michael>I'll keep it this way. So.</v> I'll just highlight <v Lee>Of so, just let's say</v> like 10 pixels or something like that. <v Michael>Right. So, this is gonna move it away,</v> but kind of- <v Lee>It also increased the height of the whole element.</v> <v Michael>In millimeter, right.</v> <v Lee>Because I know of-</v> <v Michael>Yeah, I remember how to fix this.</v> We can use box sizing, border box. <v Lee>Yep.</v> <v Michael>Right. So, that the patterns.</v> <v Lee>That old box model.</v> <v Michael>Included, yeah.</v> Okay, and yeah. Now it's back to the size we wanted it, and... (Lee speaks indistinctly) <v Michael>that pretty much it,</v> except revert this back to black. <v Lee>Mm-hmm.</v> <v Michael>Yeah. Look at that.</v> <v Lee>So, there we go.</v> <v Michael>That looks a lot better. (laughs)</v> <v Lee>Yep, and because it's a block element,</v> and we're not using any positioning tricks on it, the whole header now is the height of our header logo. So, in this case, <v Michael>Yeah.</v> <v Lee>It's 10 view height.</v> So, that way it's always gonna be 10% of the entire page. <v Michael>Cool. All right.</v> I also noticed there's just a very subtle change when we mouse over like this here, it's like the opacity is changing. <v Lee>Right.</v> <v Michael>As opposed to these where it changes color.</v> <v Lee>Right. So, we used that as an example</v> before to kind of show how hover and active work. <v Michael>Yeah.</v> <v Lee>But we can change that,</v> so that the image has a color background. So, we can use our same orange <v Michael>Right.</v> <v Lee>for this too.</v> <v Michael>Okay. So, that's where was that orange?</v> Here it is. Oh, I'm repeating myself. I don't like that. (both laughs) <v Michael>So, then this is going to be background color,</v> is that right? <v Lee>Correct.</v> <v Michael>Background color,</v> And then this thing here. Oops. Need to have this here. Okay. So, we're just replacing that opacity change with a color change. So, if I refresh it and then mass over. Oh, wait a minute. That's a blue. I copied the wrong thing. <v Lee>Oh.</v> It's the one with E. <v Michael>That's a header.</v> I copied from the header. <v Lee>Yeah.</v> <v Michael>So, where was that orange?</v> Oh, here it is. <v Lee>Yeah, ed6</v> <v Michael>Yeah.</v> So, there we go. That's why it's good to test it, though, right? (Lee laughs) <v Lee>And now when you hover,</v> <v ->Orange.</v> <v Michael>Oh.</v> Yeah, that's great. So, this one. Oh, I see. So, we switched from black to white, so that we get the change here. It's nice contrast with the black background. Great. That's looking a lot better. <v Lee>It definitely is.</v>