PDA

View Full Version : How to put a 15 px space between two pictures using div tags and CSS?

x_siobhan_x
10-10-2007, 07:11 AM
I have to put three pictures on my website with 15 px in between each picture. I have to use div taghs and CSS to do this. I have searched all over and cannot figure out how to do it. I am using Dreamweaver by the way.
joyaz711
10-10-2007, 07:24 AM
You could simply add hspace (horizontal space) to the middle image. It would add 15 px on the left and the right of that one image, thus giving you the spacing you desire. Not CSS, but easy.

<img src="pic.gif" hspace="15">

To do this with CSS you could add an inline style to the middle image like this-

<img src="pic.gif"
style="padding-left:15px";
padding-right:15px">

or create a custom class with those CSS definitions. Lots of ways to do this.

Joyce
http://www.DesignByJoyce.com/
tiggsy
10-10-2007, 07:30 AM
Dreamweaver is irrelevant, except to say you have to go to the code window to do this.

It's code you are talking about. To be honest, easier in a standard HTML editor, or even notepad, than a hulking great frontend that tries to take over.

Anyway. Put this in the area between <head> and </head> somewhere (or just add the bit about the img to your existing stylesheet)

<style type="text/css">
img {
margin-right: 15px;
}
</style>

In the bit between <body> and </body>, where you want it to appear, put this:

<div>
<img src="1stimage.ext" alt="description">
<img src="2ndimage.ext" alt="description">
<img src="3rdimage.ext" alt="description">
</div>

Could it be much easier?

You would be well advised to stop using Dreamweaver as a learning tool. It is not a learning tool. It is a production tool. It will most likely hinder you if you are learning code, as you will try to use it as a shortcut and it is very much not that.