Need help? Check out our Support site, then


WordPress.com Forums » Support

problems with getting my pictures and text to stay where I put them

  1. outofourmindstoyours
    Member

    Here is a link to the page I am referring too: http://outofourmindstoyours.wordpress.com/get-it-done-wednesdays/

    My friend and I run this blog together, writing our own blurbs in the posts/pages. We always have difficulty from one entry to the next persons turn to enter their pictures and information. The pictures always are in different places with huge gaps between and then the next persons text ends up way up in between the others persons pictures.

    I have literally spent hours researching this problem out and haven't found what I'm looking for. I'm sure it's the html side, which neither of us know anything about! I did run across someones advice to put <br style="clear:both;" /> after every 4th and 8th picture to help with the side-effects of left alignment and wrap-around. I keep trying it, not sure if I'm putting it in the right place or not. But it usually looks like it worked, until the next time you go to that page and it's all messed up again. And the code I entered is no longer there, like it gets booted out or something. My stress level is beyond "high" right now! Please help!

    Another question: why does "edit" and "preview changes" show you something completely different than what the actual page looks like. We think we have it fixed and looking good in these modes, and then when you go to the actual page it's all kinds of messed up!

    The blog I need help with is outofourmindstoyours.wordpress.com.

  2. panaghiotisadam
    Member

    1) Yes, you need to paste that piece of code (in the HTML editor) wherever you want to cancel the wrap-around effect. For example, if you've got picture A with text B next to it, and then you need image and/or text C below A and B, you'll paste the code between B and C.

    2) The post editor is a generic tool: its width isn't the same as the width of your theme - in fact, the theme you're using doesn't even have a fixed width.

  3. outofourmindstoyours
    Member

    Thanks for answering me. I appreciate the time put in. Unfortunately, I have tried inserting that code where I think it should go. And it works when you check your page but then the next time you go to your blog page, it's back to the way it was before and the code is no longer there.

    I'm sure that I am not doing it right. I have knowledge or understanding of html. Could you be more specific on where exactly to insert the code?

    Here's the link to our page: http://outofourmindstoyours.wordpress.com/wp-admin/post.php?post=347&action=edit

    I am hoping you can see our edit page in html. But don't laugh (or cuss) at me if that didn't work! here's the page link:
    http://outofourmindstoyours.wordpress.com/get-it-done-wednesdays/

    here's a cut and pasted example of two pictures from our page in html:

    href="http://outofourmindstoyours.files.wordpress.com/2011/07/p7128323.jpg"><span style="color:#000000;"><img class="size-medium wp-image-400" title="OLYMPUS DIGITAL CAMERA" src="http://outofourmindstoyours.files.wordpress.com/2011/07/p7128323.jpg?w=300" alt="" width="300" height="225" /></span></span>[/caption]

    [caption id="attachment_401" align="aligncenter" width="300" caption="A closer look (as if we wanted to see this mess closer!)"]<img class="size-medium wp-image-401" title="OLYMPUS DIGITAL CAMERA" src="http://outofourmindstoyours.files.wordpress.com/2011/07/p7128325.jpg?w=300" alt="" width="300" height="225" />[/caption]

    I am assuming the line ending with [/caption] is the last of the picture code information. Do I insert the code on the same line as [/caption], right after it with no space, (which I have tried to no avail). Do I put a period then the code with no space between (which I tried to no avail) or a space between them? Or do I put the code on the next line right under the [/caption]? (which I tried to no avail)
    Or do I do a double space and then put the code and then double space again? There are so many places you can stick this thing :) When you have no clue what you're doing. I get what you're saying about putting it between B and C, I just don't know how exactly to do that and where exactly to do that.

    Please help the clueless out. Our blog name is Out of Our Minds . . . did we peg it or what?

    Thanks so much, you'll be saving my computer from almost certain death by sledge hammer!

  4. panaghiotisadam
    Member

    No sledge hammers please! It's just that arranging multiple images and chunks of text is practically impossible if you only use the simple tools of the visual editor. And the situation is worse when you're using a flexible-width theme: if you don't use the right HTML, each visitor will see a different mess (depending on their monitor size and screen resolution).

    The first link you gave me is of no use to me: I don't have access to your dashboard. The link to your published post is ok, as I can check the sourcecode of the post and see your HTML.

    But with so much stuff in the post, it's difficult for me to figure out what you want - especially since there may be other mistakes too (for example, if you want three images in a row, you don't set the alignment of the middle one to center).

    So, to make sure we sort this out correctly, you must tell me exactly what you want where (what should be left, what should be right, what side-by-side with what, what below what).

  5. outofourmindstoyours
    Member

    No sledgehammer? dang, I was hoping for a new computer . . .

    Okay you are assuming that we, ourselves, know what we want :)

    We are of the thinking that we should just delete everything and start over from scratch on this page. It just seems it might be easier than sorting through all that html and all the mistakes that are in it (trust me there's got to be a ton!) And start our page lean and mean from the start!

    It sounds as if we need to learn some html and not rely on the visual editor. So I guess what we are asking for is; can you give us a couple of tips to layout our page, how to do multiple pictures (probably 2 rows of 2 pictures -a grouping of 4 pics, and 3 pics in a row) at a time and to get the text to be under them? I don't think we want wrap around for those types of set ups.

    And, what do you recommend for beginners with no knowledge as a source to learn this stuff quickly and easily? Without, of course, going back to school and getting a degree – I'll never make it! I believe I saw an html for Dummies book once? There's one for everything else!

    And this might sound totally stupid, but what is the purpose of a flexible-width theme And can we make it a little less flexible. Or would it be better to find another theme? At this point in our blogging careers, we want to stay in the "free" range until we become blogging guru's. We checked out all the other "free" themes to find one that offered the custom backgrounds, headers and the menu tabs, etc. This one seemed the best. What has to be done differently with this flexible width theme to get it to look right for everyone?

    I bet it's just worth going the upgrade and customization route because you can get what you want without having to settle with this or that and deal with all these headaches!

    Thanks for dealing with us, I hope that what we're asking for isn't equivalent to asking you to reach up and grab the moon for us or something like that.

  6. timethief
    Member

    Side by Side
    If you would like to see images appear side by side on the same line, put the images next to each other and give them both either left or right alignment. Make sure the images are small enough that they will both fit on one line, including borders and margins. http://en.support.wordpress.com/images/image-alignment/#side-by-side

  7. 1tess
    Moderator

    A flexible width theme is not one for a beginner who wants to arrange pictures and text in a specific way.

    It means that when someone has a wide screen with high resolution, the theme will fill up the width. Or a reader might grab the lower-left corner and make the view of the blog very narrow (or has a lower resolution screen), the flexible width will adjust. This means that pictures and text will re-arrange themselves to fit the width of the viewer's screen.

  8. 1tess
    Moderator

    If you want to use captions on your images, then I would suggest that you write your posts with all the text and pictures.

    Leave the captions until last, after things are the way you like.

    If you don't do that, and are not using the html editor, there is a great probability that the captions and text code will get mixed up. The visual editor does not allow for precise placement of your cursor.

    I can see that happening in the posts you have now.

    If you leave the captions until last, then using the visual editor should work well for you.

  9. panaghiotisadam
    Member

    As Tess said, flexible-width means that the theme can stretch or shrink to fit a user's monitor width and screen resolution. But this is a mixed blessing: for example, if you arrange three images in a row that neatly fits the whole width of your screen, a visitor with a lower resolution screen than yours may see only two of those images next to each other and the third one below them. Drag the lower left corner of your browser window to make it narrower and see what happens. So, like Tess, I would strongly suggest you switch to a fixed-width theme: it makes arranging images easier, and it makes sure that what you see is what every visitor will see. Fixed-width means all themes but a few. If you're interested in a wide theme, check my post on main column width:
    http://wpbtips.wordpress.com/2009/07/23/maximum-image-width/

    Yes, I assumed you knew what you wanted - if you don't, I cannot really help! (Nor can I offer a complete tutorial here and now. If you check the blog linked to my username, you'll see that it's all about advice on wp.com blogs. One of the things I'm thinking of doing is a series of posts on handling and arranging images. Unfortunately for you, I haven't worked on that yet...)

    A couple of basics:
    a) Setting the alignment of an image to None or Center means no wrap-around: the rest of the content will start below that image. Setting it to Left or Right means wrap-around: the rest of the content will start next to the image. So, as timethief said, if you want two or three images in a row, you set the alignment of all of them to Left, and insert them the one after the other with nothing but a space between each one and the next. To make sure nothing else will squeeze itself next to the images, you add the br clear:both code after them. Same thing if you want a left or right aligned image with some text next to it: image - text - br clear:both after that text and before the rest of the content.
    b) If you want all your test to be centered, don't use the wretched tool of the visual editor: use this in the HTML editor:

    <div style="text-align:center;">
COMPLETE CONTENT HERE
</div>

  10. outofourmindstoyours
    Member

    Hey thanks everyone for your input, you have given two clueless chicks some well needed information. We appreciate your patience as well. We plan to camp out tomorrow recreating this mess and will put your suggestions to use. Hopefully you won't hear from us for a while. But, don't count on it :)

    Thanks again

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags