Subtitles of the Movie

Continuing with the CSS formatting of our project files, you now have curved edges on your divs and borders using this special code that you can get and copy from the CurvedDivBorder.HTM File in the Work Files folder. That'll give you these curved edges. You'll notice that Dreamweaver uses this Web Kit Engine. That's why here in Live View it's curved but in the regular view it's not curved. It's right angled. So let's proceed now and you'll notice that there's a big DIV here in the middle that we're missing in our Project 7 or Step 7 File so let's go ahead and add that. Let's go out of Live View and center this, move this down and what's going to happen here is we're going to put this right over our other content. That's going to be a brand-new CSS DIV, AP DIV 2, so let's go ahead and add our border to that border. Solid again, one pixel. It's important that all your borders are consistent, same color. Let's also add a background. Let's add a white background. This'll look better. Click OK. Notice that it hides all the content underneath so what we need to do now is work with the Z Index. We need to put this at a lower stacking order so let's go back to the CSS Styles Panel. This is all review and the Z Index is here under Positioning. You can see that Dreamweaver does this in order. Let's set this to zero and now when we click off of it, the content is behind it. Obviously I need to curve those edges there. I'll leave you to do that. But one last big problem is our padding here, especially over here in the left column. Let's add some padding to our content and make that look better. And that's going to be here at the top, col left and the padding is under Box here. Let's not do Same for All because I think the top has plenty of padding but really we need left, five, right, five and we need to see what the bottom will do. Click Apply. Notice that that moves over and looks a lot better. So what you'll want to do is to get this looking like Project Step 8 is add some padding in the way that I just showed you to left col, right col, to this main DIV in here. Curve that. You can choose whether you want to curve the Page Title DIV. Also, this is a good point at which to really line everything up cleanly. Notice that these all line up. You can either use the CSS Styles Panel or the Properties Inspector. And the way you do that is you just click on the DIV. Notice that here in the Properties Inspector I have an L and T Value. That's the left, distance from the left edge, distance from the top edge, width and height. Make all those line up. Best to do this with a grid. Write it all out so that everything's numerically accurate. You can also just highlight these and then press the cursor keys, the Up, Down, Left and Right Cursor Keys to line things up pixel perfect. But if you don't have a very good eye, you can also use a grid and do a View. Here's a grid here that you could show to line everything up with the grid. Best, again, to use an external style sheet and to lay everything out so that numerically everything is the same. In other words, the widths are the same, the padding is the same. Let me go ahead and remove that grid and going into Live View, notice that here in Project Step 8, these padding distances are the same, this left edge lines up, everything is just clean. So this is a good point at which to practice using the CSS Styles Panel, specifically the Rule Definition Dialog to clean up your page, get it looking like here, Project Step 8. To probably get it actually looking better than mine, spend a bit more time. Once you have everything looking good and things line up, all your divisions are bordered and curved, your padding is set up, go ahead and save this as ProjectStep8.HTM, close the file and move on to the next movie.