Subtitles of the Movie

Let me conclude this section of the tutorial with the last type of positioning you can apply with CSS and that is fixed positioning. Previously I talked about static positioning, which will place your DIV elements or your Box elements in the normal flow of a document. This would be the normal flow of these four DIV elements: AP DIV one through four. We also positioned these elements relative to where they would be if they were statically placed. In this case I've moved my AP DIVs a set number of pixels relative to this static position. You can also position your elements absolutely on the page, given a fixed number of pixels. I recommend starting from the upper left-hand corner, moving everything down and to the right using the top position or the left position. Here in the category Positioning you notice the typesetting here and then your placements: top, right, bottom, or left. I would use two to begin with and that'll keep things more clear for you. Now, with fixed positioning, which I have an example here, the element is placed relative to the browser window. Now, you'll notice that here in AP DIV 3 I have my positioning set to absolute and I've also absolutely positioned DIV 2 and DIV 4. But if we go to AP DIV 1, notice that it has been placed with a fixed type of positioning. And also notice that it has this dashed line there. So to really see the effect of this fixed positioning, we need to look at this file in the browser. So let's go ahead and choose File, Preview in Firefox. Now, if we bring my browser window in so I get a scroll bar, you'll notice that as I scroll the page, the AP DIV1 element stays static to the browser. In other words, it does not move, whereas my other three DIVs do move. This technique has a variety of uses, for example, for a universal navigation or for forms that need to always appear in the browser right there. However, use this method with caution as many older browsers do not support it, including Netscape 4.7 and older. In addition, notice that my other content on the page that's not positioned with a fixed setting will cover it and get in the way there of your content. Now, if that content that's overflowing your fixed content is a problem, you can always change the Z Index. The Z Index here was set to one by default since that was the first DIV that I added. But if we set that to five and click OK and if we preview this again in the browser with that AP DIV set to a fixed position, you'll notice that this time it will stay on top of the other content, which will scroll underneath it. See that right there? That scrolls underneath it; so Dreamweaver's way of showing you that you have a fixed position, it uses those dotted outlines for the AP DIV Tag. So there you have several demonstrations of the various types of positioning that are available to you with CSS: static, relative, absolute positioning or fixed positioning. I also showed you some demonstrations of mixing absolute and relative positioning, but you could actually mix all four, although I don't usually recommend that you do that. But that will conclude this section of the tutorial on Layout Basics. In addition to learning about the positioning options, you learned about floats and clearing CSS in the Box Model. I showed you some HTML code for the AP DIV elements as well a how to insert DIV Tags, how to nest your DIV Tags, how to draw AP DIVs in Dreamweaver and some general information about CSS page layouts.