How to spread text along a line without hand-coding tables WordPress
- SOLVED
[[LINK href="http://seahorseartssalon.org/?p=14"]]How can I get lines flush justified here?[[/LINK]]
Take a line like this:
natalie peart …………………………………………………………… chris keriazis
Other than hand-coding tables, how might I get "natalie peart" to the far left and "chris keriazis" to the far right?
The site is running autofocus pro on top of Thematic.
I tried "justify" but that has little effect
Answers (3)
Sébastien | French WordpressDesigner answers:
<div class="dotted">
<div class="left">natalie peart</div><div class="right">chris keriazis</div>
</div>
<div class="clear"></div>
.left {float:left;}
.right {float:right;}
.clear {clear:both;}
.dotted{
float:left;
width:100%;
border-bottom:1px dotted #000;
}
Sébastien | French WordpressDesigner comments:
better result :
.left {float:left;background:#fff;margin-bottom:-8px;margin-top:8px;}
.right {float:right;background:#fff;margin-bottom:-8px;margin-top:8px;}
.clear {clear:both;}
.dotted{
float:left;
width:100%;
border-bottom:1px dotted #000;
}
Sébastien | French WordpressDesigner comments:
so you can add this classes in tinymce :
[[LINK href="http://azaozz.wordpress.com/2010/01/02/can-themes-style-the-visual-editor/"]]http://azaozz.wordpress.com/2010/01/02/can-themes-style-the-visual-editor/[[/LINK]]
or you can use custom fields
Sébastien | French WordpressDesigner comments:
is it ok lawrence ?
Lawrence Krubner comments:
Thank you for the link to azaozz.wordpress.com. That is good info.
Michael Fields answers:
This is one of those sticky scenarios. IMHO it is best to not use tinyMCE for strict formatting like this. Is it possible that this type of list could go above or below all other content? If so, I would suggest building a custom metabox which stores a variable number of key/value pairs which can be serialized and stored as a hidden custom field for the post. You can then filter the_content and prepend or append as necessary. If the formatted text needs to appear <em>inside</em> the_content then the only true solution would be to use a shortcode.
The markup/css needed to render this formatting is pretty exact and would most likely break if entered into tinyMCE. I have similar formatting on my site's [[LINK href="http://wordpress.mfields.org/index/"]]index page[[/LINK]] which is delivered via shortcode. The plugin that generates it can be [[LINK href="http://plugins.trac.wordpress.org/browser/taxonomy-list-shortcode/trunk/taxonomy-list-shortcode.php?rev=252833"]]found here[[/LINK]].
Wish there was an easy answer to this one, but unfortunately there is not.
Lawrence Krubner comments:
More complicated than I wanted, but this is also looks to be the most exact.
Jens Filipsson answers:
You could do it by placing the names in two divs, like this:
<div class="left">natalie peart</div><div class="right">chris keriazis</div>
<div class="clear"></div>
Then you add this to your <strong>style.css</strong> file:
.left {float:left;}
.right {float:right;}
.clear {clear:both;}
Lawrence Krubner comments:
My client is not very technical. Is there way I can sort of automate this? some formatting trick that's already in TinyMCE?
Jens Filipsson comments:
Not that I can think of right now. But maybe it's better that he puts it in two custom fields then, and that you take care of the styling in a template. Or a custom post type with some custom meta boxes for the names.