Support » Fixing WordPress » Image/Text Alignment

  • I am almost at wit’s end with this problem and it really shouldn’t be one that i can tell but it persists. I simply want to put 150px x 150px images on the left hand side of the page with a small text description underneath also on the left hand side of the page. i have tried to place the images with the editor, i have tried doing it with image handler plugin and then adding the text, i have tried to place everything in the post and then alight everything images and text left, but i keep getting this—> http://judgementalzine.com/zine/index.php/category/thezine/november-06issue-2/

    is there a simple fix to this without having to go in and recode everything by hand, or is it something else? i am working on osx 10.4.8 with firefox(camino and safari all do the same thing as well). is it the template i’m using that could be causing the problem? this seems to be a simple post that i’m trying to do, so i’m not sure why it’s giving me such a hassle.

    any help greatly appreciated. cheers!
    christie

Viewing 7 replies - 1 through 7 (of 7 total)
  • 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="http://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.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Image/Text Alignment’ is closed to new replies.