How do you create space around photos and text ?...

brichardson

so that there is space in between the text and photo)?

Michael

That is a pretty design-specific question.  I'd start, though, by trying CSS and apply a margin around the IMG element:

img{

margin: 2px;

}

That creates a 2 pixel margin around every image element.  If you want it more specific, you can do that:

img.myClass{

  margin: 0px 5px 10px 10px;

}

That places no margin at the top, 5 pixels on the right, and 10 pixels on the bottom and left sides of any image that has the attribute: class="myClass"

Other ways you could do it would be to put the image in a one-cell table, but CSS is the correct way to do it.

You'll want to do some cross-browser checking, though, because I've found IE and FireFox don't always agree...

Michael

sorry, meant to add:

You can also use the style attribute on the img itself:

img src="myimage.jpg" style="margin: 5px"

Finally, "margin" is a css shorthand that lets you combine:

margin-top

margin-right

margin-bottom

margin-left

IN THAT ORDER!!

so, margin: top right bottom left (margin: 1px 5px 4px 5px

As if it needed to be more confusing:

If you use only one value, it applies to all 4.  (margin: 5px

If you use 2 values, the first applies to top and bottom, the second applies to left and right. (margin: 2px 8px

brichardson

Michael :

That is a pretty design-specific question.  I'd start, though, by trying CSS and apply a margin around the IMG element:

img{

margin: 2px;

}

That creates a 2 pixel margin around every image element.  If you want it more specific, you can do that:

img.myClass{

  margin: 0px 5px 10px 10px;

}

That places no margin at the top, 5 pixels on the right, and 10 pixels on the bottom and left sides of any image that has the attribute: class="myClass"

Other ways you could do it would be to put the image in a one-cell table, but CSS is the correct way to do it.

You'll want to do some cross-browser checking, though, because I've found IE and FireFox don't always agree...

Thanks for all the information, but I'm a BEGINNER on Convio so I don't understand a few things...

1. What is CSS - how do I access this. Right now, I go to Components and click on Image and pull up the image that I want to insert. I don't see anyplace where there is a box for margin. Can you give me some more direction....sorry!

Nathan Allen 2

brichardson :

Thanks for all the information, but I'm a BEGINNER on Convio so I don't understand a few things...

1. What is CSS - how do I access this. Right now, I go to Components and click on Image and pull up the image that I want to insert. I don't see anyplace where there is a box for margin. Can you give me some more direction....sorry!

After you insert the image, click the "Source View" button near the bottom of the page. This will show you the HTML view.

Find the image you inserted. It will look something like:

<IMG alt="Description of image here" src="../images/content/pagebuilder/1496.jpg" border=0 />

Then just add the CSS that Michael was talking about (style="margin: 5px") inside of the IMG tag, like so:

<IMG alt="Description of image here" src="../images/content/pagebuilder/1496.jpg" border=0 style="margin: 5px"/>

You can change the margin from 5px to whatever you want.

Noah Cooper

Nathan Allen:

After you insert the image, click the "Source View" button near the bottom of the page. This will show you the HTML view.

Find the image you inserted. It will look something like:

<IMG alt="Description of image here" src="../images/content/pagebuilder/1496.jpg" border=0 />

Then just add the CSS that Michael was talking about (style="margin: 5px") inside of the IMG tag, like so:

<IMG alt="Description of image here" src="../images/content/pagebuilder/1496.jpg" border=0 style="margin: 5px"/>

You can change the margin from 5px to whatever you want.

One thing to note is that Outlook 2007 does not support margin (or padding) on the img tag, so it is often best to use the vspace and hspace attributes instead:

<IMG alt="Description of image here" src="../images/content/pagebuilder/1496.jpg" border=0 vspace="5" hspace="5" />