...

View Full Version : Side by Side buttons



davidduizer
02-03-2012, 12:02 AM
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

abduraooft
02-03-2012, 04:58 AM
Try
<a style="float:left" href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>

davidduizer
02-03-2012, 05:39 PM
Thanks so much for the reply. It didn't seem to work though.

Here's an example URL:

http://www.damyhealth.com/2012/02/cookie-dough-hummus-5-minute-recipe/

Thanks,

David

dylanbaumannn
02-03-2012, 05:56 PM
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.



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.

davidduizer
02-03-2012, 06:06 PM
That doesn't seem to work either. So they are just stacked really tightly both floating left.

David

dylanbaumannn
02-03-2012, 06:10 PM
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

davidduizer
02-03-2012, 06:45 PM
They are on the same line now but not level. They seem staggered.

Any ideas?

Thanks!

David

dylanbaumannn
02-03-2012, 07:55 PM
I'm not entirely sure what all else you have going on, so the quickest fix I can think of would be to apply:



div{
margin-top:-3px;
}


it's a quick-fix that doesn't directly address the issue, but it'll fix it :D

dylanbaumannn
02-03-2012, 09:04 PM
also, try adding:



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.

dylanbaumannn
02-08-2012, 04:47 PM
You got it working I see :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum