Formatting text next to pics on Wordpress

4 replies
  • WEB DESIGN
  • |
I want to have 5 pics on my page, with text to the right of each pic. On my previously static site, I used a table. In WP, I have got the text to the right of the first and subsequent pictures, but I can't seem to get a new line between each picture, so they end up staggered.

What is the best way to do this?

Not sure I really need a table, but some way of having a couple of lines between each pic/text combo. But when I hit Return, they look ok in the Editor window, but disappear when I click Update.

Why is that?

Thanks,

Jon
#formatting #pics #text #wordpress
  • Profile picture of the author webdesigners
    Could you show me your url so that I can see the errors.
    {{ DiscussionBoard.errors[998821].message }}
    • Profile picture of the author Sunlust
      Yes, would need a URL or the code to see the problem.
      {{ DiscussionBoard.errors[999306].message }}
      • Profile picture of the author deu12000
        That sounds like a CSS problem. A lot of themes don't seem to have the CSS code properly setup to get the text aligned properly to the images.

        Try adding one of these into your CSS file. It might fix the problem:

        Code:
        .aligncenter,
        div.aligncenter {
           display: block;
           margin-left: auto;
           margin-right: auto;
        }
        
        .alignleft {
           float: left;
        }
        
        .alignright {
           float: right;
        }
        Code:
        img.alignright {float:right; margin:0 0 1em 1em}
        img.alignleft {float:left; margin:0 1em 1em 0}
        img.aligncenter {display: block; margin-left: auto; margin-right: auto}
        a img.alignright {float:right; margin:0 0 1em 1em}
        a img.alignleft {float:left; margin:0 1em 1em 0}
        a img.aligncenter {display: block; margin-left: auto; margin-right: auto}
        img.centered {
        display: block;
        margin-left: auto;
        margin-right: auto;
        }

        img.alignright {
        padding: 4px;
        margin: 0 0 2px 7px;
        display: inline;
        }

        img.alignleft {
        padding: 4px;
        margin: 0 7px 2px 0;
        display: inline;
        }

        .alignright {
        float: right;
        }

        .alignleft {
        float: left
        }
        {{ DiscussionBoard.errors[999567].message }}
  • Profile picture of the author iBBnet
    Yeap, I would have offered the same solution as deu12000 above. Edit the CSS stylesheet for image alignments
    Signature
    Bryan
    After5PC.net
    Freelance Web Development
    and Graphic Design Services
    {{ DiscussionBoard.errors[999616].message }}

Trending Topics