Subtitles of the Movie

In this movie we take a look at how we can use our Positioning property for our project. Now up until this point we've been doing things so that our design will be as flexible as possible for our end users. Now that doesn't mean that we can't use our Absolute Positioning because we can. What we're going to do is we're going to set up our header in preparation for an image. The reason why we want to do this is because our defined area that we have set up for our H1 is actually the size that we're going to need for our image. However, our header is quite large and it's taking up way too much space for it to be an effective header, so what we're going to do is we are going to remove our header from our natural flow here and then we're also going to adjust the size of the header to account for that removal. So, let's go ahead and jump over into our CSS and add in the appropriate property for our H1 and our header. If you notice we did define the width and height there, but now we're going to add in our position absolute and set it so that it's going to be 10 pixels from the top. So I'll go ahead and save that and then jump back in here and whenever I Refresh we'll see something very interesting. Now first of all our overall header just kind of collapses and the reason why it collapses is because we took our H1 that was taking up 200 pixels of space and we moved it outside of the normal flow of things, so the header collapsed. Now, something else you might note is that it looks like our H1 is actually 10 pixels from the top of the browser window rather than 10 pixels from the top of our header which it is an element inside of. And that on the surface would be a correct thing to think, but because our header actually has a large margin on the top it's still in orientation to the top of the header; it's just looking at the top top of the header not our content top. So whenever you're looking at your measurements and trying to figure out where things are going to go, keep in mind that it's the actual top, the actual left, the actual right, and the actual bottom, not our defined content regions. Now the next thing we need to do here is add in some more space in our header because we can no longer see our Site Mission. So, what I'm going to do is jump back into the CSS here. I'm going to add in a nice margin for our H2, so I'll do margin-top and I'll set that to 2em. I'll save and jump over here and Refresh and now I can end up seeing most of that and it looks like I might need a little bit more of a push here. I can change that to 2.2 and there we go. It's in there, but just barely. Ah, let me just go ahead and do 2.5, save and Refresh, and there we go. So, now we have this header set up and it looks a little bit more appropriate than it did before, however, keep in mind that in the end we're actually going to have a graphic that's going to be hanging out right here that will be in place of our H1. Now, that concludes our application of Absolute Positioning Techniques to our project. It also concludes our look at Approaches to Web Layout and our examination of Float-based Layouts, and Absolute Positioned Layouts. At this point you should have a good idea as to how to go about building a good solid foundation for a web site by using all of the things we've discussed so far including Typography, Placement on the page, and the Box Model.