5 replies to this topic

[Off to Races]

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?

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  403.09K   4 downloads

[Rob]

Hi, 

 

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?

[Off to Races]

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="

Please Login or Register to see this Hidden Content

" alt="KidsBridge Logo_P4" width="300" height="215" class="alignright size-medium wp-image-1657" /><table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[pl_button type="kidsmoney" link="

Please Login or Register to see this Hidden Content

" target="blank" ]Donate to Walk [/pl_button]</td>
</tr>
<tr>
<td>[pl_button type="kidsmoney" link="

Please Login or Register to see this Hidden Content

" target="blank" ]Register to Walk [/pl_button]</td>
</tr>
<tr>
<td>[pl_button type="kidsmoney" link="

Please Login or Register to see this Hidden Content

" target="blank" ] Corporate Sponsors [/pl_button]</td>
</tr>
</tbody>
</table>

 

WIthout the table, the buttons touch. With the stack in one column and the image in another, the stack overlapped in Chrome.

[Rob]

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.

Please Login or Register to see this Hidden Content

You don't need the <p> and </p> tags.

 

There are other methods including our Grid System

Please Login or Register to see this Hidden Content

(see Grid System by scrolling down).  Note, the 4 and 8 model would be ideal.

 

Another method would be CSS tables.

Please Login or Register to see this Hidden Content

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:

Please Login or Register to see this Hidden Content

 

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. 

[Off to Races]

As I said, using a table in that manner causes the buttons to overlap in Chrome. 

[Rob]

Hi,  Sorry for my confusion, but in which manner? I proposed three different options. 

 

Could you elaborate a bit more? Thanks.