Image/Text Alignment

I’m looking at the site and don’t see any 150 X 150 images. Can you be more specific? Are you trying to add a sidebar type feature?

To place an image 150×150 on the left, with text beneath, left hand side:

1) resize your nov06/cover.jpg to 150×150. Its currently 450×300 (54kb). Most free graphics editors will let you do this. Upload to your image files.

2) Go to Your Post and insert this:

<img src="https://yourdomain.com/path to your images folder/nov06/cover.jpg" class="alignleft" />

3) In your style sheet insert this:

.alignleft {
width:150px;
border:none;
height:150px;
text-align:left;
margin:0 0 0 5px;
padding:0;
clear:all;
}

To ensure that your images don’t produce a border when used with hyperlinks:

img a {border:none;}

Note: margin:0 0 0 5px; forces the image 5px from the left so that its not squashed up against your left hand margin.

If you want the image on the left, and the text to start on the right and then ‘wrap’ around the image when the text runs past the bottom image margin, insert float:left; in your styling.

I’d also add <br clear="left" /> straight after my html just to be sure to clear all floating elements.

thanks! quick question tho…if i wanted to have a larger image show up at the top like the nov cover and then the small 150px underneath that with the text following can i still use the same code you gave me? and dumb question, but does it matter where in my style sheet i put the code?

regards ??

Put it wherever you want in the stylesheet, but it makes sense to put it with all image coding for ease of modifying, if necessary. Give it a header so you can locate it easily.

/**IMAGES
***********/
.alignleft {
width:150px;
border:none;
height:150px;
text-align:left;
margin:0 0 0 5px;
padding:0;
clear:all;
}

img a {border:none;}

A: yes, but you really won’t need to generate new code in the stylesheet for it. Just stipulate your image size in the img HTML like so

ie: <img src="yourdomain.com/path-to-image" width=300px" height="300px" border="0" alt="description of image" />

Don’t forget a ‘space’ and backslash to close the image tag.

you rock! thanks ??

I’d also add <br clear=”left” /> straight after my html just to be sure to clear all floating elements.

sorry but i have another dumb ?
after my html where? in my post html? or?….

If you use the image tag while writing your post, then you can insert that clearing br / after your image or text. If its inside a template, (ie: hard coded by you) you can do this also.

All the br / tag does is clear floating elements so whatever follows doesn’t float as well.