[Updated April 2013.] [Pt.1 here; pt.3 here.]
Example:
Obviously the code above is for poll or gallery to the left, text to the right: you can use “float:right” and “margin-left” if you want it the other way. And you can adjust the vertical space that separates the text by changing the margin number.
Depending on the theme and the exact placement of the poll or the gallery, you may need to add top and bottom margins as well, i.e. write the opening part of the code this way (the numbers are just an example):
<div style="float:left;margin-top:3px;margin-right:14px;margin-bottom:7px;">
(The number is just an example: you can change it.)
Example:
Poll centered
Example:
Audio player centered
Example:
For the “closed” version of the audio player you can use the same code, using 81 instead of 290 for the width. This way the player won’t expand when clicked. Example:
https://wpbtips.wordpress.com/
Hi Panos,
When you have a minute, what am I missing here:
http://en.forums.wordpress.com/topic/positioning-of-poll-on-page?replies=14#post-351317
[Reply given in the forum – P.]
Posted by Tess | June 19, 2009, 22:33You are a master!!! Exactly what I was looking for!
Posted by Unraveled | September 24, 2009, 00:17You’re welcome.
(I’m not a master: I just know some html and like to experiment!)
Posted by Panos | September 24, 2009, 01:30Brilliant. That’s just what I was looking for to position my Contact Form 7 form on a WordPress page. Thanks
Posted by danmason | December 29, 2009, 19:31@danmason: You’re welcome. Since my post doesn’t mention contact forms, could you please give a link to the page in question so I can see what you’re talking about? Might be useful to others too.
Posted by Panos | December 29, 2009, 22:05You just saved my post with a poll from being visually challenged. Thank you!
Posted by bs angel | January 2, 2010, 02:47@bs angel: You’re welcome! (Sorry for the delayed response – was on vacation.)
Posted by Panos | January 6, 2010, 18:31I’m real close but I can’t seem to get the left alignment I want. The
SHORTCODE HERE
code helped but it only worked on a single player. When I listed multiple ones, it indents a little. how do I remove the indent?
Posted by CaptKewl | August 2, 2010, 22:10@CaptKewl: Please link to the post or page in question.
Posted by Panos | August 2, 2010, 23:20Hi,
Thanks for the helpful tips!
My problem is that when I use this code, for one column of text and the other for youtube the text column doesn’t valign to the top, no matter what I do. Any suggestions?
see: http://peace4israel.wordpress.com/2011/04/13/rare-species-the-tragedy-of-the-powerful/
Posted by Eyal | November 6, 2011, 13:51Hi,
But there’s no video on the post you linked to. Please link to a post with the issue in question so I can see what you have tried and what must be changed.
Posted by Panos | November 6, 2011, 15:42Woops, sorry. This is it: http://peace4israel.wordpress.com/2011/02/21/iraq-to-iran/
Posted by Eyal | November 6, 2011, 15:46a) Vertical align commands are used in opening td tags only, not tr tags.
b) The valign coding you’ve used is deprecated. Your td tags need to be like that:
<td style="vertical-align:top;border:none;padding-top:10px;">
Use zero padding in the text cell (as you’ve done) and change my 10px in the video cell, if you wish, to fine-tune the vertical alignment of the video.
But using table coding will give you two columns of equal height, so if the height of the text is larger than the height of the video, you’ll get too much empty space below the video. If what you want is text-wrap, you should use this instead:
<div style="float:right;margin:7px 0 0 30px;">YOUTUBE SHORTCODE HERE</div>TEXT HERE
In case you’re not familiar with this, four values for margin or padding = top/right/bottom/left.
Posted by Panos | November 6, 2011, 16:23Wow! Thank you very much. First of all the float thingy changed it all, and I’m going to use it from now on all the time!
As for the table, I was guessing, apperantly wrong. :)
Thank you SO MUCH.
Posted by Eyal | November 6, 2011, 16:34You’re welcome!
As for your “guessing”: If a table was the best solution, you were guessing right that you needed a valign command (the reason for the original quirky alignment is one of the various stupid defaults in the theme you’re using: the default vertical alignment for images and other embedded objects is the baseline). And the valign=”top” and all similar snippets that are deprecated unfortunately circulate a lot in tutorials you can find online. Now all commands need to be inline CSS, that is, properties and values inside the style attribute of an opening tag.
Posted by Panos | November 6, 2011, 16:50Just a note:
you will want to update the table valign information in this post to
style=”vertical-align:top (middle or bottom)” and so on
https://wpbtips.wordpress.com/2009/06/10/formatting-text-pt-1/
I’m finally catching on to the concept of inline CSS, but apparently LiveWriter is not? Did you see how I tried not very well to help Mike in the forum today with his cell borders? I seem to be missing something obvious…
Posted by Tess | November 8, 2011, 06:13Ah, then:
http://en.forums.wordpress.com/topic/formatting-table-cells?replies=11#post-739041
tkx
Posted by Tess | November 8, 2011, 06:36Right, thanks!
As for the forum thread, you said “there seems to be some odd CSS going on with tables in twenty ten” so I just provided the info on what the oddities are: I didn’t say or imply that you “tried not very well”.
Posted by Panos | November 8, 2011, 06:49Indeed.
When one tries to be a night in schlining armer, at least the battle with such windmills should be logical.
You explained why I needed to set the whole table into a div align center (perhaps less efficient than making the width of the table 100% as you said)
I don’t really know how to read what the CSS for a theme is. What would someone be thinking to force such odd prerequisites for a commonly used code to the design of a theme?
Posted by Tess | November 8, 2011, 10:02What would someone be thinking? Although tables can be used for a variety of purposes, as you know, the default CSS for tables in themes such as 2010 and 2011 is designed with only one purpose in mind: rows of data, separated by horizontal lines only, and spanning the entire width of the main column.
Yes of course, the battle should be logical – or rather, there should be no battle. In my opinion a table should be neutral, so that you add whatever you need if and when you need it (and that’s what table tutorials assume). If I write a plain td tag, I expect a plain cell: when I have to add border:none backround:transparent padding:0 to each and every td tag to get plain cells, then what I am thinking is that some lunatic is satisfying his sadism.
If you are an average blogger and you use one of these quirky themes, you cannot tell why your tables don’t appear as expected. For example, you create a table with two cells per row and just one word in each cell; you expect a narrow table but you see your words separated by hundreds of pixels if you’re using 2010: that’s because tables have a predefined 100% width; but you don’t know that. Or you create a table with content that should fit in your main column but you find it doesn’t: that’s because each cell has a predefined 24+24px left and right padding; but you don’t know that either. (Things like these are exactly what I was referring to when I told DS about “giving inline CSS solutions to users who cannot fathom why their tables are a mess in some of the newer themes”.) Even I cannot always know what I need to override unless I examine the stylesheet of the theme: if I see horizontal borders, for instance, then what’s the default, borders for the tr tags or borders for the td tags? Examining the stylesheet isn’t something that the average blogger can or should do to create a fucking table…
Posted by Panos | November 8, 2011, 23:04