Jump to content


Photo
- - - - -

PL button and image aligned?

Buttons Alignment Tables

  • Please log in to reply
5 replies to this topic

#1 Off to Races

Off to Races

    Advanced Member

  • Members
  • 36 posts
  • Country: Country Flag

Posted 06 February 2013 - 10:25 PM

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.09KB   4 downloads



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 February 2013 - 11:16 PM

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?



#3 Off to Races

Off to Races

    Advanced Member

  • Members
  • 36 posts
  • Country: Country Flag

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

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.



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

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.

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. 



#5 Off to Races

Off to Races

    Advanced Member

  • Members
  • 36 posts
  • Country: Country Flag

Posted 08 February 2013 - 07:37 PM

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



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

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.