Lessons

Lesson Info

Margins, Padding and Borders

I'm gonna add a couple of images that I created there in the other folder. So I'm just gonna go grab them, You'll see to remove a row. Copy? Um, in I'm just gonna insert an image makeover. Find it in my redesigned site and images. I have a couple of arrows of an era left in an arrow. Right? Just go grab that. Yeah, Let me copy that right into my images folder. Remember, Dreamweaver will move it for you if you need it to. Its gonna be stuck down here at the bottom for a moment. Even though I was trying to put it on the right and left of the image. Let me insert one in here. What's happening is there's not enough room with the width of that def tags, and I'm inserting the right arrow open. Copy it in. Put it in my images folder. Moving a little quickly this afternoon because I've got ah, lot more to cover that I can. I got those. Reverse. Let's do it that way. Okay. Look at that. I could just switch him back and forth. Who like dancing mirrors. It's kind of silly. I really want them on e...

ach side of this. So the first thing you have to do is give this a little more space. So if I go back out here, you'll see the container is set to 1000 pixels. This image is 1000 pixels. I want those arrows. I'm going to get a little more breathing room. So 1200. I had this at 1400 it was a little much. Let's try see if I'm gonna make that work. All right. So Okay, now they're both on sides whips. One of the things you have to do is make sure they're in the right order. And I'm gonna use an alignment to control their positioning. But sometimes in design, you could be a little hard to see where things are positioned. This is part of why I, like split view over here and split view. If I get tired of messing around and designed to you and I can't get things where I want him, I can always come in here and just look at this. What have I got here? Is my e great image. Here's my right arrow. Here's my left arrow. All I really have to dio is just copy or cut and paste and change that order. Remember, having extra space in the code doesn't matter. Now. I know that my left arrow should be there and my right arrow should be there. And I didn't have to worry about messing around in design view. Sometimes it's really nice to be able to go into the code, and it's not as scary as you might think. Just to do things like that. Just look for the things you know and you'll find your way around The only thing that helps us if I click on an element and design view Dreamweaver shows me exactly where it is in code. Do. If I click on that image, it will show me that's where it is. If I click on that image, it will show me which piece of code corresponds to that. And that makes it easy to find your place in the code when you get there. So I've got that image is kind of where I want, But what I really want is for them to be centered on either side of this right. You kind of want the arrows to be right in the middle. And that kind of positioning will make you crazy injuring We were of your princess. I'm And it all comes back to CSS styles, and it all comes down to part Matt. A padding and margin. I tried to say those two words at the same time. It all comes down to padding and margin, which are two words. I use a lot together because padding put space inside a box margin put space outside of box. That box could be a did. That box could be an image. So, for example, if I wanted this to be just a little bit further away from that image, I could change the style to add a little space between their using margin space. We can't really put padding inside an image unless you have a border. That's another issue. We'll see if we have a second here to do a frame around this. Okay, so I put my little arrows in. I'm gonna look at the way I style these just to save some time here. What I did with some math. Honestly, I looked at This is a 600 pixel high image. My arrows are exactly 100 pixels high. So to put that in the center, I need it to be about 275 pixels from the bottom. So I created styles for right and left arrow. And I'm just gonna go into Maine style, create a new style. Now, there is no style called Arrow in the Code. Yet when I created those dibs before I put the definition of the same time, Dreamweaver is trying to guess what I want. It's completely wrong. I don't want any of that. I want to create a new style. You zoom in here again, I'm gonna create a new class style called Arrow. Right again. I can name these anything I want. I'm going to define the style so that when I apply it to that image, it will move that image to where I want it on the side of that main image. And just to make it easy, I'm going to hit the enter key. Now, I want some layout options, so I'm gonna put some margin down here. Okay? So think about this. I'm gonna add margin to the bottom of that image, and it's gonna raise up because there's gonna be all this margin underneath it. So if I look at my margin options, I can put them at the top right bottom or left. I'm gonna put some space at the bottom. I figured out I needed 275 pixels to get that to be centered on the left of the image. I'm gonna do that. And then I'm just gonna put the rest of them to zero just to make sure that I don't have any extra space inadvertently. So I know I've got that set on and let me know I've got arrow, right? I'm gonna also want an era left when you creating styles. One of the things that's kind of handiest ability to duplicate. Sometimes you don't have to start all over from scratch. You can just go from arrow, right era left. And now I can go over here and say, You know what? Actually, pixels of the bottom. I played around with some other styles. You'll see in a minute why I created different ones. If we get that far, I could create one style for arrows that move them both up. 17 75 pixels. But I'm a later one to adjust them slightly differently on the right and left, so creating two styles will allow me to do more things later. I'm planning ahead, but this is a perfect example of where and CSS Often you could do the same thing in two different ways. One style can apply to two things, and if you can do that, it's more efficient. But sometimes you need to styles to be able to have different elements at the same time or different effects. Okay, so let me zoom back out so you can see what you're doing. So I'm selecting this image and down here in the bottom, I want you to see that there's a class box here. This is the stone here is called the Property Inspector at the bottom of the window and Dreamweaver. If it's not open, you can open it under the Windows panel, and if you double click on it, it closes. If you double click on it again, opens a back up. If I select this arrow and I go into the class list, what you'll find is all of the class styles that I have defined today for this site appear in this drop down. If you've never defined a class style for the site, this will be blank. But as soon as you create a style with a dot indicating its class style Dreamweaver makes it available here, it just makes it easy to associate with an element. So before that arrow is going to go up to where I want it to be, I have to associate this style with it. So let's see if I did it right. Arrow left home. Look at that. Went right up where the margin setting was that I put it there and then over here arrow, right. Boom. Yea, cool. So now I have arrows on the right and left life, and I positioned them using margin to get them in the right place. No, Another thing. That's kind of nice to able to do with styles. It's foot frames around things. Another thing we often do is put borders around things. But sometimes when we put a border on one thing, it inadvertently ends up on something else, and you're going to see that now. So I'm gonna create a border for this image. So I basically create a picture frame around it. This will help you understand margins, padding and borders all at once. So I got an image, and that image is in my main content folder, and I can create a style that applies to all of the image tags out there. Or it can create a style that only applies to the image shag when it's in that holder mate compound versus regular tag style. So if I select the image and I open up, I've got a style. Uh, I'm going to create a new style, and Dreamweaver, now right away, says, Oh, you want an image style in Maine, Content in container, it's being specific. It's listing everything that's around that image. And again you have a choice. So you know what I do want This toe only apply to the images and main content, but I may or may not always have a paragraph tag around it. And in general, I don't want this to be more specific than it needs to be. And a lot of times I'll take paragraph tags out of my design layout. When I start using margin and patting because I get more control with margin padding than I do with that paragraph tag. So I'm gonna take that out, meaning it's not a requirement for the style of work the way it's set up right now. It would have worked either way, but as an advanced tip, you want to be only a specific, as you need to be for it to work and in this case defining the image tag in this specific enough. Now it's still gonna affect those two arrows. We're gonna have to undo that in a different way. But let's go ahead and start with us. So we've defined an image, were defining an image style in the main content folder. I hit the enter or return key, hit the enter or return key, Thank you, and it actually gets the properties available to me. And now let's go ahead and put a frame around this and again. I'm just gonna refer to my notes to save some time and make it easy. There lots of ways to create a frame around something like this. But what I did was I went first to the border now. Borders, as you might imagine, put Border and one of the reasons that there so many border options here it's kind of overwhelming is because CSS gives you a lot of control. You can have a border only at the top on Lee at the bottom, only on the right and left. Are you gonna border all the way around something, and that could be very handing. You can use borders on the side of dibs to create dividers between two columns. So if I have to devise lined up side by side, and I put a border on the right side of one of them, I've got a nice little line that perfectly separates those two boxes. So Borders air a very versatile element of CSS. But if we just want to put a box of Freeman around our picture, orders are a great way to do it. So I'm just gonna put a black order, so I'm gonna use black Hexi decimal color code for black is all zeros. If you want to be able to do a little transparency, you could use RGB A. If you're not using transparency, it doesn't really matter. Hit the return key and you see, because I set border color in that option. Dreamweaver filled it in for all four below it. I could have just put black on the bottom red on the top. I could use a different color all the way around many, many different options. Now I get to define how thick I want this to be. Now I may want a really thin border, just a fine black line. But if I'm creating something that's gonna look kind of like a picture frame, I might want a really thick border. So let's go with, like, 10 pixels, so have a nice, thick border around it. You can make borders as thick as you want, and you can kind of see over here this thick black border. You'll see it much better in a moment. You also have to define the style, and you have many options. But almost exclusively, I use solid. The others are not supported consistently, and they can look a little weird. You can always create an image to use as a border to, but solid is generally a good choice for borders. Experiment with them if you choose, so I've made a solid, thick black border around us. Cool. That's pretty straightforward, but There's another thing I kind of like to do, You know, usually when we frame a picture, we want a map between the frame and the image. And you might think, Well, I have to put a div tag around and then put a background on the divide, put a border on the dip. But you know what? You can do it just with the image. Watch this. So the other thing that I'm gonna do here is I'm gonna add some padding. Now, remember I said, patting goes inside the box margin goes outside the box, and usually you wouldn't think you've used padding with an image cause you want margin outside the image. But if you have a border, you have the option to use potting. And if you add padding in a background color, you can add a mat to your image. So let's do that again. I'm in my layout options now. We set margin before to move that arrow up and down. We're gonna do padding this time. If you want exactly the same amount of padding all the way around, click that little lock and I could do 25 pixels of patting all the way around. I don't have to take a four time. If you're really into matting, you might say, Yeah, actually, I want 25 pixels all the way around. Get it to say that. And then at the bottom, I want pixels, right? Most was make the bat mad, a little thicker at the bottom, then around. Isn't that nice that you can control that? So precisely so now look what's happened. It's moved that border museum back out, away from the image. Now don't worry about my arrows. I'll take the border off the arrows. Don't worry, but I wanted you to see this is applying to all of the images that fall in this place, right? Sometimes that's handy. Sometimes you can take care of three images at once this way. But if you don't want it, you can also undo things in styles. And that's what advanced tip. I'll show you in a second for those arrows. So now the one other thing I might do is, Do I want a white map, or do I want maybe one of those sort of beige? I don't know. What's the color they use for mats that kind of cream color. So that's just a background color, right? We're setting the background color around this image, which is only going to appear because we have a border and we put some padding around it. And now that backgrounds gonna show up. And if I click on the background options, I can change the background color and let me just find kind of, ah, a mat like color will disc estimate it so they're typing in the hex decimal color code, and you can see now I've created kind of a mat around that image just by using CSS to style around that image. No extra image that'll load so fast. And I can apply that toe every image of my site automatically. And I can change the color, shape, size, spacing on all of those images later. Very efficient way to design. Except I don't want it on my arrows. So let's just take it off the arrows. So if I come over here and I find my arrows now, they're a couple ways to do this. If I select this, Dreamweaver should find the style applied to it, but it's it's there we go. That's the style I want. I want that arrow left right, and now what I have to do to take the border off that arrow is to go into borders. And nothing's defined here because I didn't define a border in this. But if I define the border style as none, and I define the border color as none, so it doesn't matter. Left barrel right era. Yes, image left. So border style? None. Border color should be none. Why did not go away? Come on. Ah, because this one's more specific. Perhaps I'm changing these styles. I go to try and short in this lesson, always a dangerous thing to do. What, me. Try something real quick and see if it sells this problem for me. If not, I'll find another way. Now, sometimes being more specific helps. Let me to see if I swapped the other end era right era left. Setting the border to none should take care of it. Okay, that's such a nifty trick. When it works, here's what I will dio. And at the end of the day, if you're having trouble figured out your problem, there's always another way to do it. So let me just show you another way to do this. What I'm gonna do is change the way I put the border on the image so that it doesn't affect those two. And to do that, I simply need to create a style that only applies to this image instead of one. That applies to all of the images in this section. So let's just create a new style name. So instead of calling this main content image and defining that border, let's let me change that now. Now Dreamweaver is just giving me grief. It has been a little buggy about renaming, and I have to click on something just right to rename it in the finder. Sometimes that sometimes double click a photo shop. Now, if you double click on a layer, it's really easy. And Dreamweaver double clicking, clicking. I want to change the name of that. I'm gonna override it and just go into the code and do it here. There is always a way, even on live video. There was always a way to solve your problems, and sometimes people tell me it's when I screw up that they learn the most. So remember, if you can't get something to work and design Dio just go into co do and override it there. I know I can change it here. I know it's in the CSS code. That's the same style. This is just the Cody of that style and all that happened when I use that CSS designer to create that style is Dreamweaver wrote this code for me. So if I want to call this picture frame instead of main content image now, what's gonna happen is it's going to disappear off all three of them. So when I hit return, go back to design view and you see that frame disappeared off. All three is now. It's not associated with all the images tryingto unassociated with an image. It's actually easier to do what I'm doing right now. Just be more specific about how you assign styles. Now I can go in and associate that picture frame style with my image and because of the class style, it should now be in my list of class styles. If I choose picture frame, it'll go around the picture and you won't see it on the two eras. Can I get a woot? Thank you. Okay, cool, cause I'm about to recreate this page four times. I didn't want it to be a total meant. Now there's one other thing I might want to make those arrows just a little further off to the left or right. So I could just add a little margin around there, right? So we could go back into that picture frame and in the picture frame we defined there, we defined padding. We put a frame around, but we haven't touched margins. So now I'm just gonna put a little This is why did right and left differently. Um, I can put it on the picture frame and affect both. Or I can put it on the arrows and have it just on one side or the other. I'm gonna put on the picture frame and apply it to both. But again, there's not a right or wrong way. You could have left arrow with more space and right arrow with less space if you put the margin on the arrow instead of on the main image following me. Okay. I know I'm throwing a lot at once, so let's put 10 pixels there and 10 pixels here, and it just gives me a little breathing room between the image whips actually get 10 pixels there and they're now remember, all of this adds up. If my container is not wide enough for the size of those images plus the size of the banner plus the margin plus the padding, all of that has to fit or something's gonna wrap down below on one of those arrows is gonna end up underneath the image. So there is a map involved in this sometimes, and you do have to calculate once in a while you can always eyeball it. But honestly, a little math goes a long way in CSS. So let's just preview this real quick, See what we've come up with so far. So we have our I might want to position this differently. Now again, I change the size of the container in the middle of this class Toe fit the more contrarian constrained space. So I might want to adjust this and I think I will do that real quick. Um, this is in container. It also has its own style definition. Right. So we know that we have a style around, remember, you can always go back and change styles, redefined them, add things to them. So right now we have a style container, each one and again we have no margin set on it. So if we want to move that over so that it lines up at the top of this images of kind of hanging off by itself on the left, I just need to move it in with margin space margins. Space is something we use a lot in H in Web design these days. Maybe that's too much. Maybe I'm just eyeball in it now. I Children, math is your friend, but you can always eyeball it if you prefer, so get it to about where you want. Now. When I preview it, you'll see all I had to Dio was add a little bit of margin space to the silo. I'd already to find again multiple ways I could have. If there was a header up here and that was in the header. I could have had some padding inside the Hunter to move that over, or I can add it to the heading line itself and move it over with margin. All of these things are possible and they all have similar effects. But depending on how your whole layout works together, you will over time, find that some approaches to see us us are more efficient and depending on what you want to change later. So, for example, if I wanted a different amount of space around my left and right arrows, assigning two styles and said at one gives me more control later.