WordPress.org

Ready to get started?Download WordPress

Forums

Image/Text Alignment (8 posts)

  1. judgeMENTAL
    Member
    Posted 7 years ago #

    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

  2. Ghidra99
    Member
    Posted 7 years ago #

    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?

  3. KatGirl
    Member
    Posted 7 years ago #

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

    1) resize your nov06/cover.jpg to 150x150. Its currently 450x300 (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.

  4. judgeMENTAL
    Member
    Posted 7 years ago #

    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 :)

  5. KatGirl
    Member
    Posted 7 years ago #

    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.

  6. judgeMENTAL
    Member
    Posted 7 years ago #

    you rock! thanks :)

  7. judgeMENTAL
    Member
    Posted 7 years ago #

    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?....

  8. KatGirl
    Member
    Posted 7 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic