Formatting pages

  • melissad

    (@melissad)


    13 years ago

    I am trying to format a page on my website so that my notes appear below graphs – currently they are appearing along the right side and then toward the bottom but not aligned.

    In edit mode, the notes appear below the html code for the graphs (or boxes). I try to fix the problem by hitting return a few times, hoping the text will move to below the charts, but they do not look different in preview.

    I am not overly digitally savvy and have no experience with html code – is this all making sense? Has anyone else experienced this problem?

    Please help!

Viewing 6 replies - 1 through 6 (of 6 total)
  • peredur

    (@peredur)

    If you floated your graph image (I imagine it’s an image?), then the text will appear to the left or right depending on whether you floated your image right or left respectively.

    If this is the case, edit your image in the editor (click on the image button that appears when you click over the image) and check the ‘Alignment none’ radio button.

    HTH

    PAE

    Thread Starter melissad

    (@melissad)

    The graph is not an image rather a code thats been written into the page – see below:

    [box size=”single” title=”Fixed Rates” color=”transparent”]
    [table id=1 /]

    [/box]

    [box size=”single” title=”ARM Rates” color=”transparent”]
    [table id=2/]
    [/box]

    My text starts below such as this but appears to the left on the live site.

    peredur

    (@peredur)

    Sorry. No idea what the code means, and without a link to your site I can’t even look at it in Firebug.

    I guess these are short codes from a plugin, so maybe you’d be better off asking the plugin developers for help? As I say, without a link, I can’t see what html is being generated.

    Sorry I couldn’t be of more help.

    Cheers

    PAE

    Thread Starter melissad

    (@melissad)

    I should have included the link.

    Here is the page I’m referring to:
    https://canadianafinancial.com/brokers/rates/

    peredur

    (@peredur)

    The tables are floated and do not fill the with of their container, so the text appears to the right, and then clears the floats as best it can.

    If you want all the text to appear underneath the two tables, you need the first paragraph after the tables to clear the floats. If you’re doing this in your post/page editor you could add an element style:

    <p style="clear:left;"><strong>Please contact...

    If you want to do it in CSS, you could try:

    .content-full p {
  clear: left;
}

    I’d prefer the latter. It does assume you always want to clear any floats in the content at this point, however. So you could never have any floats that behave in the expected way in your content.

    To be more specific, you’d have to add some ids or classes to ancestor elements. For example you could do this by adding a call to body_class() on the body tag, in header.php. This would give you a hook to use for specificity.

    HTH

    PAE

    Thread Starter melissad

    (@melissad)

    Thanks so much for your help! I used the html code and it worked.

    Very much appreciated ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Formatting pages’ is closed to new replies.