Archived

This topic is now archived and is closed to further replies.

  • 0

PL button and image aligned?


Question

Posted · Report post

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? post-40554-0-98279400-1360189509_thumb.p

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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="http://kidsbridgemuseum.org/wp-content/uploads/2012/08/WALKLogo-300x215.jpg" 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="http://www.crowdrise.com/kidsbridgewalk2stopbullying" target="blank" ]Donate to Walk [/pl_button]</td>
</tr>
<tr>
<td>[pl_button type="kidsmoney" link="http://www.crowdrise.com/kidsbridgewalk2stopbullying" target="blank" ]Register to Walk [/pl_button]</td>
</tr>
<tr>
<td>[pl_button type="kidsmoney" link="http://kidsbridgemuseum.org/wp-content/uploads/2013/02/2013WalkCorpSponsor.pdf" 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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

<table class="mytable">
<tbody>
    <tr>
        <td class="mytable" id="cell1">
            <p>Button 1</p>
        </td>
        <td class="mytable" id="cell4" rowspan="3">
            <p>This is where the picture goes</p>
        </td>
    </tr>
    <tr>
        <td class="mytable" id="cell2">
            <p>Button 2</p>
        </td>
    </tr>
    <tr>
        <td class="mytable" id="cell3">
            <p>Button 3</p>
        </td>
    </tr>
    </tbody>
</table>

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

 

There are other methods including our Grid System http://demo.pagelines.me/tools/ (see Grid System by scrolling down).  Note, the 4 and 8 model would be ideal.

 

Another method would be CSS tables. http://coding.smashingmagazine.com/2008/08/13/top-10-css-table-designs/ 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: http://www.w3schools.com/css/css_table.asp

 

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. 

Share this post


Link to post
Share on other sites

Posted · Report post

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

 

Could you elaborate a bit more? Thanks.

Share this post


Link to post
Share on other sites