How can I match the layout in edit and preview?

  • Author
    Posts
  • #1209798

    When I am creating a post and insert images I find that although I can get the layout right in the wysiwyg editor this does not translate as the correct layout when previewing the post. I have to make numerous adjustments such as adding or removing lines in order for things to display as I want them.

    I am using Oulipo which is quite narrow and I’m sure this is the issue, but is there an easy way round this?

    Thanks.

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

    #1209922

    raincoaster
    Member

    Have you tried using Windows Live Writer? It knows how wide themes are and accounts for it.

    #1209925

    I have never heard of that. Do you have more info?

    Thanks.

    #1209928

    justpi
    Member

    The “wysiwyg editor” is not a wysiwyg editor: it has the same width and the same font no matter what the theme (with a few exceptions). What exactly are you trying to do?

    #1209949

    timethief
    Member
    #1209968

    I was trying to align images in various positions but was finding that how it looked in the editor was not how it looked in my layout (text wrapping problems, essentially) and I was having to mess about with it to get it looking right.

    (I meant wysiwyg as opposed to the text option.)

    Thanks for the link. Will check it out.

    #1210055

    justpi
    Member

    Saying “images”, “various positions”, “how it looked”, “text wrapping problems” is as vague as your original question. If you want precise help you need to make precise questions: link to a post you’re having problems with and tell us exactly what you’re trying to do or what you want to change.

    #1210064

    I apologise for having a general query rather than a specific issue or bug.

    The problem occurs with ALL posts, and it is simply that arranged pics and text how I want them in the editor things then get squeezed in to my narrower style, causing the alignment to be forced out of kilter.

    I get it right eventually, but it is a fiddly process and I was looking for tips to make life easier.

    It looks like the Live Writer will be the best thing to pursue.

    Thanks to everyone for their help.

    #1210065

    justpi
    Member

    Your general query has been answered: what you think of as a wysiwyg editor is not a wysiwyg editor. The Visual editor is the same no matter what the theme, while each theme has a different column width (plus different font family and font size for regular text, and different styling for specially formatted blocks such as blockquotes or headings).
    To see the actual result when editing a post, you need to click Preview.
    What I do with my posts is publish them as private at first, check the result on the actual blog, then turn them to public if I’m satisfied with the result or after I make adjustments.

    In your first post above you wrote:
    “I have to make numerous adjustments such as adding or removing lines in order for things to display as I want them.”
    What do you mean by that? Lines of text or blank lines? If you mean adding blank lines to correct text-wrap issues, that’s wrong – you need a different solution.

    #1210068

    Thanks for the clarity about the editor. That does explain a lot.

    To fix the text wrap I have previously relied on adding blank lines, which is a messy method. What is a better way of doing this?

    Thanks.

    #1210069

    raincoaster
    Member

    Using Windows Live Writer, which translates that into web-viable code.

    #1210078

    justpi
    Member

    Adding extra blank lines isn’t just messy, it’s plain wrong (for various reasons I needn’t explain now). Assuming you mean you insert a left or right aligned image, and you want some text next to it, but you want to prevent the rest of the content from also wrapping around, you switch the editor to Text (=code) and paste this before the rest of the content:
    <div style="clear: both;"></div>

    #1210079

    Thanks justpi. I’m guessing the blank lines method is wrong on a coding level and may not work in other browsers so may still not achieve what I think it has.

    Thanks for the code fix. Will give that go.

The topic ‘How can I match the layout in edit and preview?’ is closed to new replies.