I have a stack of 3 PL buttons and wish to align an image to the right of them. I tried making a table and putting the stack in one column and the image in another. But the stack overlapped in Chrome, so I reverted. What should I do?403.09K 4 downloads
PL button and image aligned?Buttons Alignment Tables
Posted 06 February 2013 - 11:16 PM
Have you considered boxes?
I presume from your attached image you want the blue image (people walking), aligned with the group of three buttons.
How did you apply the three buttons?
Posted 07 February 2013 - 03:02 AM
Boxes would shorten the length of the buttons, which are consistent throughout the site. The code for the screen shot I had uploaded is:
<img src="" alt="KidsBridge Logo_P4" width="300" height="215" class="alignright size-medium wp-image-1657" /><table border="0" cellspacing="0" cellpadding="0">
<td>[pl_button type="kidsmoney" link=" " target="blank" ]Donate to Walk [/pl_button]</td>
<td>[pl_button type="kidsmoney" link=" " target="blank" ]Register to Walk [/pl_button]</td>
<td>[pl_button type="kidsmoney" link=" " target="blank" ] Corporate Sponsors [/pl_button]</td>
WIthout the table, the buttons touch. With the stack in one column and the image in another, the stack overlapped in Chrome.
Posted 07 February 2013 - 04:44 AM
This is generic code for a two-column table in which the right column has merged three rows and in which content would be centered.
The left column has three rows with no specific alignment. Keep in mind, this is unstyled, I don't believe the alignment actually works in WP.
You don't need the <p> and </p> tags.
There are other methods including our Grid System(see Grid System by scrolling down). Note, the 4 and 8 model would be ideal.
Another method would be CSS tables.if you really want to stick with tables.
Also, if you're going to style the existing table or the one I pasted above, see this:
Just to let you know, this: table border="0" cellspacing="0" cellpadding="0" doesn't work in WordPress. That's older HTML code which is outdated in HTML5 and unnecessary in CSS3. I should also point out that WP, by default, adds lots of padding and margins to table cells. Thus I really don't recommend any older HTML based tables.
Another consideration is that HTML tables may not work in responsive applications like a mobile device, and the code will be subject to the variables of browsers.
Posted 08 February 2013 - 07:37 PM
As I said, using a table in that manner causes the buttons to overlap in Chrome.
Posted 08 February 2013 - 10:09 PM
Hi, Sorry for my confusion, but in which manner? I proposed three different options.
Could you elaborate a bit more? Thanks.