Subtitles of the Movie

Let's see about replacing that border for our text boxes. And I think what I'll do is I'll show you this for this text frame here, or this div here, the Story 2 text frame. Now check this out. I just clicked on the edge of the div there and then use your Tag Selector down on your Status Bar to figure out the name of your div. So mine reads div hash mark Story2 hyphen Text. So what I would do is over inside the CSS Styles Panel over on the right-hand side, I would go and find that div. There he is, right there. And what I'd like you to do is double-click on that guy and that'll open up what's called the CSS Rule Definition dialog box here inside Dreamweaver. Now, I'm going to head down to the Border category and I'm going to set the top Style to Solid. I'll set the Width to 1, just by typing in a 1 there and then I'll set the color to black. Perfect. Now the only thing is we need a border on the right side on the bottom and on the left but we don't need it on the top. So, right across the board here uncheck Same for All and then just clear out the top field, so the Style, the Width and the Color. And I'm just selecting and hitting Delete here, that's all there is to it. And then I'm going to click on OK and then let's go and check out our results inside our Browser. I'm going to Save, Command-S or Ctrl-S, flip back over to my Browser and I'll Refresh. Now, this is what we get here. We got the border happening there, which is great, but notice over on the right-hand side it's not lining up properly. Why is that? Well, because how it works inside CSS, this is actually related to something called the CSS Box Model, which is way beyond what we're talking about here, but essentially what happens is the border gets added to the outside of the div, right, so here's the quick fix for that. I'm going to go back to Dreamweaver, I'll double-click on the Story2 text div over inside the CSS Styles Panel, I'll head into the Box category and I'm simply going to reduce the Width of the div by 2 pixels. Why 2 pixels? Because I have a 1-pixel border on the left and on the right-hand side so Dreamweaver counts each pixel as 1 pixel, so 1 pixel on the left and 1 pixel on the right equals 2 pixels. So, if we reduce the Width of our overall object by 2 pixels then it stands to reason that when I head back to my Web Browser and Refresh everything should line up nicely, right? Now, very cool stuff. I hope it's not too confusing and of course, unfortunately I'm going to leave it up to you to fix your remaining divs, right, but I'm going to show you one more quick thing here because notice my text here isn't indented on the left-hand side, so how do you do that? Well, back into Dreamweaver, I'll go and find that same Rule over inside the CSS Styles Panel, double-click on him, back to the Box category underneath the Padding category, or the Padding area I guess I should say, uncheck Same for All. And then what I'll do is I'll add a Padding value of 10 pixels to the right and a Padding value of 10 pixels to the left. So, Padding in CSS is the spacing on the inside of your div, or on the inside of your object, right. Now, what has to happen, though as well, is I have to reduce the Width of my overall object by the amount of padding that I just added in here. So I'm going to change my Width to 303 pixels, just like that. So I just subtracted 20 pixels from my overall Width. Go ahead and click on OK. Save everything up - Command-S or Ctrl-S - head back to your Browser, Refresh and hopefully everything should be hunky-dory. Now, it's up to you, if you want to mov your text down inside your div, well that would be the Padding top, right, so you can go and monkey around with that. And, as I say, I'm going to leave it up to you to fix your remaining divs. It might take a little bit of fiddling around and it might take a little bit of work to get them all happening but at least that gives you sort of an introductory sense of how CSS functions inside your Web Layout.