Need help? Check out our Support site, then


WordPress.com Forums » Support

How do I get text to stay below a row of pictures?

  1. webbeetle
    Member

    This question is about a specific page: http://webbeetle.wordpress.com/2009/12/31/image-types-and-their-compression-2-png/

    I would like the text of the new paragraph to start in anew line below a ROW [!] of images. The graphics have to be in one row because I'm trying to show a comparison. In a perfect world I would like to see all images in one row, but that doesn't seem to fit with my 'theme' (it looks correct in my 'Visual Editor' / 2 rows are still o.k.)...

    Whatever I try: the text always sneaks up next to the last image in BOTH rows.

    I have tried:
    1. changing image alignment - center and none both put all images below each other, not in a row
    2. entering a line break (both options:
    and </br>) in the HTML code editor - which it simply ignores
    3. inserting a clear spacer gif in one and in both lines - makes things only messier since I cannot really judge the proper dimensions required.

    Anything obvious I have missed?

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

  2. webbeetle
    Member

    Attention: a line break tag works in this forum (just not in WordPress), so in above text is a ‹br› missing (I wonder how this will show up = no preview of post).

  3. raincoaster
    Member

    Try using div code instead. Or you could make the images larger, which would push the text below them.

  4. webbeetle
    Member

    How would I succeed with with divs? They seem to be getting ignored, too...

    What I've done now is I have enclosed the images between an opening <div> and a closing </div> and then the supposedly next paragraph into another div bracket - it made it worse!

  5. raincoaster
    Member

    You have two rows of pictures. Enclose EACH of them in div tags. That should do it. You may need to put a row of Open Div, Close Div below them, though.

  6. webbeetle
    Member

    o.k. - I'm getting somewhere now [it only took some bloody 5 hours or so...]
    After the suggestion to use a <div> , and my first version not working, I entered another search for div this time, and stumbled upon http://wpbtips.wordpress.com/category/alignment/ {HIGHLY RECOMMENDED!].
    Next I tried the tip from there about "if you want more blank space between paragraphs, you cannot do it by pressing return repeatedly" - insert a <div style="height:1.4em;visibility:hidden;">ANY_CHARACTER_HERE</div> - that didn't work either!!!

    I finally found further down the same page TABLES mentioned - I didn't know I could use them, and in any case wouldn't have throught of a table since I try to avoid them in my "normal" CSS based web pages...

    Anyhow:it (kinda) WORKED USING A TABLE = not the look I want but heaps better!

  7. raincoaster
    Member

    Is that text a Caption? If it is, delete it and put it in as a normal paragraph, centered. That should do it.

  8. 1tess
    Moderator

    @webbeetle

    WP.COM is tricky if you are wanting to be particular about the precise arrangement of images. Tables are truly the only way to go. In my opinion, you should avoid the gallery features, and captions. We have only a little control over either here. (also note that the shortcodes may not be easy to control without some html coding)

    Basic plain html which we can use:
    http://en.support.wordpress.com/code/

    Also note that there are a number of quasi CSS "tricks" which will work here. Panos's site is indeed excellent… (take a look at how inspired by him I have been if you like.
    #1 fan, me)

    Also note that some writing you put into the html editor gets amended or stripped if you switch to the visual editor and back to the html editor.

    (just my 2-cents here)

  9. webbeetle
    Member

    "Also note that some writing you put into the html editor gets amended or stripped if you switch to the visual editor and back to the html editor."

    Yep - I have noticed that - A LOT - like I used a font tag size="-2" to get some smaller text, and in visual editor it disappears everytime...

  10. panaghiotisadam
    Member

    @webbeetle: My "ANY_CHARACTER_HERE" code is for space between paragraphs - nothing to do with preventing text-wrap. What you need is this after the last image code:
    <br style="clear:both;" />

  11. panaghiotisadam
    Member

    PS

    "it (kinda) WORKED USING A TABLE = not the look I want but heaps better!"

    If you tell us what the look you want is, Tess or I can tell you how the table code should be.

  12. 1tess
    Moderator

    ~~mr. adam~~~

  13. panaghiotisadam
    Member

    ~~

  14. webbeetle
    Member

    Thanks for the tip with line break +clear:both - I'll try that!

    After all I don't want to spend too much time on this - all the great help sofar is appreciated! Very Much!!!

    I have closed this as "resolved" - and am trying to give some back by posting to other questions...

    Happy New Year to y'alls (as they say in the southern US)

  15. webbeetle
    Member

    BTW: a friend recommended this page http://en.support.wordpress.com/code/ to find which html code ONE CAN USE in WordPress = very useful!!!

  16. 1tess
    Moderator

    @webbeetle
    Happy new year to all you"ll as well! (hope that is correct grammar?!)

    Yes, that is the link I showed you. Some of those work, and some do nothing. Very worth studying…

    cheers

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags