Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Side by Side buttons

    Hey Everyone,

    I'm not sure if this post is in the correct forum but I believe it will be simple for someone to solve.

    I simply want to have my pinterest and facebook buttons side-by-sided (right now they are stacked).

    Here is my code:

    <?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
    <a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="horizontal">Pin It</a><div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

    Thanks in advance!

    David

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try
    Code:
    <a style="float:left" href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Didn't work

    Thanks so much for the reply. It didn't seem to work though.

    Here's an example URL:

    http://www.damyhealth.com/2012/02/co...minute-recipe/

    Thanks,

    David

  • #4
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    EDIT: i just looked at your code, you'll actually need to apply the float:left; to your <iframe> tag that you have & the <div> you have for your facebook button.

    Code:
    iframe{
    float:left;
    }
    .fb-like fb_edge_widget_with_comment fb_iframe_widget{
    float:left;
    width:150px;
    }
    You also need to change the width of your "fb-like fb_edge_widget_with_comment fb_iframe_widget" <div> because it's sent to 450px right now, which is causing the button not to float since it cannot fit on the line above it. If you reduce the width to about 150px you should be fine.
    Last edited by dylanbaumannn; 02-03-2012 at 07:03 PM.

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    doesn't work

    That doesn't seem to work either. So they are just stacked really tightly both floating left.

    David

  • #6
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    the width of your iframe around your facebook button is still set to 450px, so it is unable to float next to your pintrest button.

    You'll need to change the width of the iframe if you want the button to sit next to the pintrest button

  • #7
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    level

    They are on the same line now but not level. They seem staggered.

    Any ideas?

    Thanks!

    David

  • #8
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    I'm not entirely sure what all else you have going on, so the quickest fix I can think of would be to apply:

    Code:
     
    div{
    margin-top:-3px;
    }
    it's a quick-fix that doesn't directly address the issue, but it'll fix it

  • #9
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    also, try adding:

    Code:
    position:relative;
    to both of the iframe and the <div>.

    Floating basically says, "hey, if there is room up to the left/right of you then you should sit there instead". However sometimes with statically positioned elements they will stop short of their desired position based on the previous element's height/content/whatnot. By changing the position to relative you're telling it to sit relative to where it should be instead of where it currently is.
    Last edited by dylanbaumannn; 02-03-2012 at 10:08 PM.

  • #10
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    You got it working I see


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •