Graph Alighment
-
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/2013bikerideThanks.
-
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.
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.
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.
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]
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; }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.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.
You could also look for a plugin that will make columns for your – I know there are several…
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?
You need to put CSS in the custom CSS section as above.
You have a lot of errors on that page…
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;
}
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.
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>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>
- The topic ‘Graph Alighment’ is closed to new replies.