Formatting Images
Q: How can I get automatic space around my pictures so that text doesn’t squish up against it? Like Iris House?
A: It is only possible with a CSS-based site – then it is easy.
- Open up your stylesheet.
- Add the following lines:
.floatedDivRight {
float: right;
margin-bottom: 5px;
margin-left: 5px;
border: 1px solid #111111;
}
.floatedDivLeft {
float: left;
margin-right: 5px;
margin-bottom: 5px;
border: 1px solid #111111;
}
- Save and upload.
- Now, open up the XHTML file you want to add pictures to. Go INSERT è IMAGE and scroll to and select the image. Now right-click on the image, then scroll over to “CSS Styles” then choose .floatedDivRight for a right-aligned image or .floatedDivLeft for a left-aligned image.
- In the .floated tags I also include a thin black border around the pictures. Most people think it looks nice. Feel free to delete or edit it if you want.
Q: My assistant keeps distorting the layout by inserting images way wider than the column it is in. How can I stop this?
A: Teach them a little Photoshop and how to resize images. But, if that doesn’t work, I like adding a line to my image tags for the right column that forces the pictures to be a certain width. Of course the image is often squashed looking, but it is easy to resize by clicking once on the graphic and grabbing the bottom resize handle and moving it up until it looks normal. The code for the width command would be something like:
#rightColumn img { or whatever you call your right column
width: 150px; or whatever the width of your column is minus padding
}