Picture / text layout problem

  • MikeF

    (@teddybare)


    22 years ago

    Hi, I have what I hope is any easy problem.
    I struggle big time to get my head around CSS and want to change the way I display the pictures in my newly setup WordPress blog.
    I am using this code
    ‘<img border=1 hspace=5 vspace=5 width=160 height=120 src=”http://www.foston.net/wordpress/wp-images/uploads/IMAGE_00010.jpg&#8221; alt=”office” />
    ‘
    to display a thumbnail in my blog, that you can click to view the full image, and it works perfectly, thanks to other posts in the forum here.
    Now what I would like to do, it add an align=left to the image tag, so that the text appears down the side of the image, and not at the bottom. But when I do this, find the blog entry below the current one then merges with the entry with a picture. I thought something simple might fix it, but I can’t do it.
    Help? Anyone?
    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Chris J. Davis

    (@chrisjdavis)

    22 years ago

    You should use float: left instead of align. So your code would look like this:
    <img style="float: left" src="whatever/the_path/totheImage_is.gif">
    That is how I get the images on my site to float to the right of all my text.

    Thread Starter MikeF

    (@teddybare)

    22 years ago

    I think I have found the solution, from this post, http://wordpress.org/support/5/2428#post-1 which pointed me to this page of explaination, http://www.complexspiral.com/publications/containing-floats/
    Now I just have to see if I understand what is on the page and how I get that into my WordPress page. hehe.

    Mark (podz)

    (@podz)

    22 years ago

    I’ve had a look at your page, and it seems fine here – I’m using Firefox.
    The CSS will look like this in your wp-layout.css
    div.picbox {
    float: left;
    padding: 5px;
    width: 100%;
    font-weight: normal;
    }
    div.picbox img {
    float: left;
    margin: 5px;
    }
    div.clearer {
    clear: left;
    line-height: 0;
    height: 0;
    }
    So to incorporate that, when you write a post, do it this way;
    <div class="picbox">
    Here is a picture .
    <img src="" alt="" />
    All the words go here.
    </div>
    <div class="clearer">&nbsp;</div>
    That *should* give you text that flows around the image – depends of course where you put the image tag with respect to your text.
    I’ve only briefly played with this though, so no promises….

    Mark (podz)

    (@podz)

    22 years ago

    I’ve had some success playing with that code, but I cannot replicate the break through of an image.
    I put it here too :http://www.tamba2.org.uk/graphicalcss/align
    It’s rough, but it works ….

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Picture / text layout problem’ is closed to new replies.