Advanced Dreamweaver 8 - How to Use CSS Styles to Align Images

This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Video Transcript

So, let us create a couple more styles on this and then we are going to attach an external style sheet so we do not have to recreate all the styles on this page. If you just right click, new and let us create a class style and this time we are going to create a style that we can apply to images. Now, this is a common check on the web but if you do not know it, you are going to love it. We are going to create one style for our right aligned images and another one for our left aligned images. The most important thing when you are aligning images is going to be the margin options. So, if we click on box, we see patting margin.

This is also a great opportunity now for me to show you how patting and margin options work. If I give an image both patting and margin and I set a boarder color, you will be able to see what happens. So, let us set this boarder to solid, make it medium width and give it black. Now, watch what happens when I apply this style to an image. Notice that when you are dealing with image styles, they move to a different part of the properties inspector. So, I want that right aligned option and now, you start to see patting is inside and margin is outside.

So, if you do not have the boarder turned on in an image, this really is not going to make much difference. The patting and the margin are both outside the image. On some elements, this is going to matter a lot. For example on a table cell, you can have patting on the inside of the cell but if you apply a margin, nothing is going to happen because you are trying to affect things inside the table cell, margin will not make a difference.

So, it is easy to think that patting a margin kind of do the same thing. But if you can look at what is happening here, the patting is inside, the margin is outside. I do not really want that patting between the boarder and the image. So, let us reset this the way I do want it. Double click on right aligned and let us go back to box and let us just turn off the patting option. And this time that the margin similar to other settings that we have done, I almost never want the same margin around something. One of the advantages of CSS is that unlike traditional HTML where if you select an image, your previous options were just H space and V space right?

With H space, you could not control if there was space on the left or the right, it went to both sides automatically. Similarly with V space, it went to the top and the bottom. Uncheck same for all and in this case to align my image, when I am using image right, I am going to leave the top set to zero, I am going to set the right margin to 15, the left margin to 10 and the bottom I am just going to give it 5 pixels of space.

Now, you can set this to whatever you prefer and whatever works in your design. Click okay and since I kept my boarder, I have a nice boarder around my image. One other little thing, I wanted this right aligned. Now, I could use the right align tag here or I could use the image right tag which would wrap the text to the left and that will work. But I recommend instead, let us put it back to default that you set the alignment in the CSS style. That is because one of the advantages of CSS is that you keep all of the styles that apply to a particular element in one place. And that way, if you make changes later, you can change them all at ones. And you do not have to remember; when I change that style it will change some things but not others.

So, resist the temptation to go back to that habit of using the property inspector even for alignment. You can do that back in this box option under float. Now, if you have never used the float option and styles, this is where you will find the left and right alignment for something like an image. Now, you can apply box settings to any element on the page. But this is particularly helpful when you want to align images.

So, if I set this now to float right and click okay, I will get exactly the same effect as if I had chosen align right from the image alignment option. Except that, that alignment is now associated with the style for my image. Now, notice that I called this right aligned because I was talking about aligning the image to the right but I encourage you to be very specific with names because once you have 50 styles over here, it is easy to forget what you called them.

So, if we right click, we can rename this. I am going to actually call this image right. So, I think that will be more intuitive later when I am not remembering what I might have called it and I am going to create another one now for image left. Again, I want to class style and if I forget to put that little dot in there, Dreamweaver is going to do a nice little favor for me and pop it in there for me. This time, I am going to create a box. I am going to float to the left. Uncheck the same for all box and this time, I want you to give the bottom margin 5, the left and right margin 10. Now, I am using slightly different spacing around my images because when I have an image aligned to the right, I want one kind of spacing and when I have an image aligned to the left, I want another kind of spacing.

So, if we click okay, and we scroll down, now, we have a left aligned image with its spacing option and a right aligned image with its spacing option. And one little detail that is different here, I did not put a boarder around that one. So, let us go back, image left and just go into the boarder option, set this to a solid line, medium thickness black. Okay. So, I want a different alignment options on my image but I wanted boarders on all of them.

Notice that when I change that style name, the results dialogue box open. If this gets in your way, you can always just close it. Remember, you are in control of your work area in Dreamweaver.