WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Graph Alighment (21 posts)

  1. equinestaff
    Member
    Posted 11 months ago #

    Hi, on this page where i have the list of teams and the $ sign on the right of the photo i want to replace the names and $ amounts in a graph however everytime i add any size graph it goes under the photo- any ideas?
    gopalcare.com.au/2013bikeride

    Thanks.

  2. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    Possibly it's too wide for that space. Or it's a CSS issue. But without seeing the actual problem, no way to know for sure or suggest a way to fix it.

  3. equinestaff
    Member
    Posted 11 months ago #

    I have added the graph on this page http://gopalcare.com.au/test/ as you can see i want it under the STACKS LAW: GOULBURN TEAM to the right of the photo.

  4. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    That's because of this CSS from your theme:

    table {
        clear: both;
    }

    So try adding "clear: none;" to your CSS for that table on that page.

  5. equinestaff
    Member
    Posted 11 months ago #

    Sorry I'm confused, this is the php for that page... i can't find where it says table {
    clear: both;
    }

    to change it to

    table {
    clear: none;
    }

    [excessive code removed]

  6. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    CSS is in external CSS files. You can use a browser tool like Firebug to see what CSS is affecting an element on the page and where it is coming from. BUT you should NOT be modifying any theme files - as those changes will be lost when the theme is is updated. Instead you should be using a Child Theme or for only CSS changes, use Custom CSS. As is, you're adding all kinds of extraneous inline CSS - which makes it very hard to manage your site...

    If your theme does not have a custom CSS option, then add it via a plugin like Custom CSS Manager. Once you've added that plugin, add this code there:

    #post-544 table {
       clear: none;
    }
  7. equinestaff
    Member
    Posted 11 months ago #

    Perfect, thank you. just one more thing, how then do i get the words
    The Goulburn Team thanks you for your generous support. Your donation, no matter how large or small, is greatly appreciated”
    with the donate button under it in the middle and then the following line to go directly under the photo in the white space on the left.

  8. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    That's not possible with the HTML structure you have - what you need to do to make this all work better is divide those two sections into two divs and float them so they go side by side. So after this line of text "...Sunday 15 September."
    Put:

    <div id="leftdiv">
    put the image here
    then whatever you want under the image
    </div>
    <div id="rightdiv>
    put the right column stuff in here
    </div>

    Then add to the CSS:

    #leftdiv {
       float: left;
       width: 45%;
       min-width: 300px;
       margin-right: 20px;
    }
    #rightdiv {
       float: left;
       width: 45%;
       min-width: 300px;
    }

    Not sure that will all work correctly as is - as I can't test it fully, but it should get you started.

  9. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    You could also look for a plugin that will make columns for your - I know there are several...

  10. equinestaff
    Member
    Posted 11 months ago #

    No luck, it just leaves the line. #leftdiv { float: left; width: 45%; min-width: 300px; margin-right: 20px; } #rightdiv { float: left; width: 45%; min-width: 300px; } see http://gopalcare.com.au/2013bikeride/

    Any recommended plugins?

  11. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    You need to put CSS in the custom CSS section as above.

  12. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

  13. equinestaff
    Member
    Posted 11 months ago #

    I have this in my custom CSS i'm using the Custom CSS Manager plugin..

    #post-544 table {
    clear: none;
    }
    #leftdiv {
    float: left;
    width: 45%;
    min-width: 300px;
    margin-right: 20px;
    }
    #rightdiv {
    float: left;
    width: 45%;
    min-width: 300px;
    }

  14. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    And did you redo the content section of the page as I wrote above? The CSS won't work unless you redo the HTML structure.

  15. equinestaff
    Member
    Posted 11 months ago #

    Thank you for taking the time to help me. I think so my code is now..but no luck..

    <em></em><p style="text-align: left;"><span style="font-size: 18px;"><strong><span style="font-family: arial,helvetica,sans-serif;">                         </span><span style="font-family: arial,helvetica,sans-serif;">                                 Wilson Asset Management</span><span style="font-family: arial,helvetica,sans-serif;"></span></strong></span><strong><span style="font-size: 18px;">  <span style="font-family: arial,helvetica,sans-serif;">
    
    </span>                                                                                                                                  GOULBURN TO SYDNEY (CAMDEN) CORPORATE CHARITY CHALLENGE</span></strong></p><p style="text-align: left;" align="right"><strong><span style="font-family: arial,helvetica,sans-serif; font-size: 18px;">                                                                                                                                                                                                                                                                                                                        <span style="color: #ff0000;">Sunday 15th September 2013.</span></span></strong><span style="font-family: arial,helvetica,sans-serif;">
    </span></p><span style="font-family: arial,helvetica,sans-serif;">
    </span><p align="left"><span style="font-family: arial,helvetica,sans-serif;">The Goulburn To Sydney (Camden) Corporate Charity Challenge began with a tiny peloton of 7 riders in 2005 and since then has grown to raise substantial funds for the riders nominated charity. The Stacks Team supports the Goulburn Palliative Care & Oncology Support Group. The riders will leave from Clifford St Goulburn at 545 am, approximately two hours prior to the historic "Goulburn To Sydney Cycle Classic" and is expected to finish in Argyle St, Camden by 11am on Sunday 15 September.</span></p><span style="font-family: arial,helvetica,sans-serif;">#leftdiv {
     float: left;
     width: 45%;
     min-width: 300px;
     margin-right: 20px;
    }
    #rightdiv {
     float: left;
     width: 45%;
     min-width: 300px;
    }
    
    </span><p style="text-align: left;"><span style="font-family: arial,helvetica,sans-serif;"></span><span style="font-family: arial,helvetica,sans-serif;">
     <span style="text-align: left;">     </span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;"> </span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;"> </span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;">    </span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;"> </span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;">     </span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;">    </span></span><span style="font-family: arial,helvetica,sans-serif;"></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;"> </span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;">            </span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;">             </span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;">                            </span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;"><img class="alignleft" src="http://gopalcare.com.au/wp-content/uploads/2013/07/bannerfans_8402358.jpg" alt="bannerfans_8402358" height="307" align="left" width="414" /><span style="font-family: arial,helvetica,sans-serif;"><img src="http://gopalcare.com.au/wp-content/uploads/2013/07/Stacks-logo-300x20.jpg" alt="Stacks logo" class="size-medium wp-image-140 aligncenter" height="17" width="255" /></span></span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;">    </span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;"></span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;"></span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;"></span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;"></span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;">At Stacks </span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;">T</span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;">he </span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;">Law</span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;"> Firm Goulburn we are heavily involved in supporting the local community. Being the major sponsor for the Goulburn Team of the 2</span></span><span style="font-family: arial,helvetica,sans-serif;"><span style="text-align: left;">013 Goulburn to City Challenge is of great importance to us, this is the 3rd year running that we have provided our support. The ride importantly raises much needed funds for the Goulburn Palliative Care & Oncology Support Group which is a very worthwhile cause. We wish both our team and the other teams participating, a safe and enjoyable ride towards Sydney.</span></span>
    
    <strong>STACKS LAW: GOULBURN TEAM</strong></p>
    <table style="width: 477px; height: 197px;" cellpadding="0" cellspacing="0">
     <colgroup><col width="124" />
     <col width="96" />
     <col width="124" />
     <col width="96" />
    </colgroup><tbody><tr height="20">
        <td height="20" width="124">Angus    Taylor</td>
        <td width="96">$</td>
        <td width="124">Jason McLaughlin</td>
        <td width="96">$</td>
    </tr>
    <tr height="20">
        <td height="20">Chris Berry</td>
        <td>$</td>
        <td>Jim Hoskins</td>
        <td>$</td>
    </tr>
    <tr height="20">
        <td height="20">Chris leah</td>
        <td>$</td>
        <td>John Sharp</td>
        <td>$</td>
    </tr>
    <tr height="20">
        <td height="20">Craig Johnson</td>
        <td>$</td>
        <td>Kel Smith</td>
        <td>$</td>
    </tr>
    <tr height="20">
        <td height="20">Gary Sheehy</td>
        <td>$</td>
        <td>Philip Champion</td>
        <td>$</td>
    </tr>
    <tr height="20">
        <td height="20">Glen Apps</td>
        <td>$</td>
        <td>Issac Hogan</td>
        <td>$</td>
    </tr>
    <tr height="20">
        <td colspan="3" height="20">Dontation Total    (includes donation made to the team.)</td>
        <td>$</td>
    </tr>
    </tbody></table>
    
    <p>"The Goulburn Team thanks you for your generous support. Your donation, no matter how large or small, is greatly appreciated"
     <a href="http://gopalcare.com.au/donations-to-the-bike-ride/"> <img src="http://gopalcare.com.au/wp-content/uploads/2013/07/bannerfans_83971921.jpg" alt="bannerfans_8397192(1)" class="aligncenter size-full wp-image-266" height="40" width="150" /></a>
     "Your donation amount will be added to the team member's total"
    
     <strong></strong>
     <img src="http://gopalcare.com.au/wp-content/uploads/2013/07/cropped-cropped-SupportGroupLogo-page-00111-300x204.jpg" alt="cropped-cropped-SupportGroupLogo-page-00111.jpg" class="size-medium wp-image-25 alignleft" height="93" width="138" /><strong>Goulburn Palliative Care &<code><em> </em></code><em></em><em><code></code></em> Oncology Support Group</strong>
     The Corporate Charity Challenge bike ride is the highlight of the year for our charity. Thank you for your hard work organising and competing this year and for the tremendous work raising donations to help and support the local people receiving palliative care and oncology treatment here in the Goulburn district community.Enjoy your ride and stay safe.<em><a href="http://gopalcare.com.au/wp-content/uploads/2013/07/bannerfans_83971921.jpg"><em></em></a></em><em></em><em></em><em></em><em> </em>
     <span style="font-family: arial,helvetica,sans-serif;">                                                                                            <strong>
    
     <img class="ngg_displayed_gallery mceItem" src="http://gopalcare.com.au/nextgen-attach_to_post/preview/id--477" />
    </strong> </span></p>
  16. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    You really can't post that much code here and you ALWAYS need to use the code buttons....

    Do you know the basics of HTML and CSS? The CSS does not go in the content of the page - you have to rewrite the HTML code using the structure I posted above this:

    <div id="leftdiv">
    THIS NEEDS TO BE THE CONTENT YOU WANT ON THE LEFT COLUMN
    </div>
    
    <div id="rightdiv>
    THIS NEEDS TO BE THE CONTENT YOU WANT ON THE RIGHT COLUMN
    </div>
  17. equinestaff
    Member
    Posted 11 months ago #

    No not really, I'm still learning, sorry i didn't realize there was a code box- sorry. Can i pay you to jump in and fix this for me?

  18. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    It's fine, just wanted to see where you are. We can't take pay... And I have to get off for tonight as its late her, but we can pick this up tomorrow, okay?

  19. equinestaff
    Member
    Posted 11 months ago #

    Ok no worries, thank you, tomorrow is fine. I'm hoping to have it done by Monday (I'm in Australia and its currently friday night at 5.45pm) Thank you speak tomorrow.

  20. equinestaff
    Member
    Posted 11 months ago #

    Hi just seeing if you are around, i think i have done the
    <div id="leftdiv">
    THIS NEEDS TO BE THE CONTENT YOU WANT ON THE LEFT COLUMN
    </div>

    <div id="rightdiv>
    THIS NEEDS TO BE THE CONTENT YOU WANT ON THE RIGHT COLUMN
    </div>

    text correct now, however the graph still goes on the left now instead of under the
    STACKS LAW: GOULBURN TEAM

    see http://gopalcare.com.au/test/

  21. equinestaff
    Member
    Posted 11 months ago #

    Its worked..when i changed it to the normal page.... yeah..

    Thank you so much for all your time and effort.

Reply

You must log in to post.

About this Topic