Wrappping text around picture with caption

[MikeCloutier]

Well it definitely is a missing style definition, and I have partly solved it.

[chipbennett]

Here's the view of the picture without the caption
http://www.ridgewayherald.ca/index.p...ze-says-mayor/

And here's a sample with the caption. All settings are the same as above. It's password protected because I don't want it publicly available. The password is chip.
http://www.ridgewayherald.ca/index.php/test-for-chip/

Thanks for your help.

Sorry, just now had a chance to take a look.

It seems that you're making progress in getting the alignment/text-wrapping to work properly.

The CSS classes that you need to ensure that you're defining:

div.wp-caption - This class applies to the div that contains both the image and the caption. This is where you will want to ensure that you properly define your alignment/floating. Of course...

.alignright - this is the class that is also added to the above div, if you specify align right. I've never seen this class not work before, so I'm thinking it must be something in your theme-specific CSS that is overriding it.

p.wp-caption-text - this is the paragraph that holds the caption text, within the div container. You shouldn't have to do anything to this class regarding alignment, but only font styling as applicable. (In fact, if you do, it will only apply within the space contained by the div.wp-caption, and should have no affect on anything outside the div.

Things in your theme-specific CSS to check:

1) Make sure you're not declaring .alignright (or .alignleft) in a way that overrides WP's declaration of these classes.

2) Make sure that you're not specifying clear:left (or clear:right or clear:both) for your paragraphs, as this declaration will force left- or right-floated elements essentially onto their own line.

More, if I can think of anything else later...

[MikeCloutier]

Thank you, that is helpful. I patched in some code from the default theme into my theme and did some fiddling so it works with the left alignment. There is still some work to do and any other help is greatly appreciated.

[chipbennett]

Thank you, that is helpful. I patched in some code from the default theme into my theme and did some fiddling so it works with the left alignment. There is still some work to do and any other help is greatly appreciated.

So, if you insert the image using align-left, it works - but if you insert the image using align-right, it doesn't work?

That definitely sounds like a CSS issue with .alignleft and .alignright.

By the way, you can get that same effect with your sidebar using only CSS, without having to insert as an image/caption. For example, assuming that "sidebar" image is named "sidebar.jpg", resides in a folder "images" within your theme folder, and is 100px wide by 20px tall, in your CSS file:

.sidebar {
     background: transparent;
     background: url(images/sidebar.jpg) no-repeat scroll left center;
     width:100px;
     border: 1px solid #999999;
     margin: 5px;
     padding-top: 25px;
}
.floatleft {
     float: left;
}
.floatright {
     float: right;
}

And then, in your post, wherever you want your sidebar to appear:

<div class="sidebar floatright">Sidebar text goes here...</div>

That will probably be easier and more useful, also, as you will have more control over the style/layout of the sidebar text.

[MikeCloutier]

Would you know of a resource that would explain all these different definitions?

[MikeCloutier]

Regarding the code for the sidebar, that might be helpful. If you go to the page now http://www.ridgewayherald.ca/index.p...ze-says-mayor/ you'll see what I want to do -- cut in a sidebar into a large copy block to make it easier on the eyes. The sidebar would contain some relevant background or something related to the main story.

I used the image and caption function of Wordpress to help me do this. It's not perfect -- I can't break paragraphs and retain the left alignment of the text, and that's because of the inconsistencies in the coding the way I have patched it together -- but it's a start.

[Ipstenu]

The CSS ones? http://www.w3schools.com/css/default.asp

[chipbennett]

The CSS ones? http://www.w3schools.com/css/default.asp

Yep, I second w3schools. It's the best resource I've found, and I've been using it for years.

[chipbennett]

Regarding the code for the sidebar, that might be helpful. If you go to the page now http://www.ridgewayherald.ca/index.p...ze-says-mayor/ you'll see what I want to do -- cut in a sidebar into a large copy block to make it easier on the eyes. The sidebar would contain some relevant background or something related to the main story.

I used the image and caption function of Wordpress to help me do this. It's not perfect -- I can't break paragraphs and retain the left alignment of the text, and that's because of the inconsistencies in the coding the way I have patched it together -- but it's a start.

All you really need to do is add:

<div style="float:right;">
TEXT GOES HERE
</div>

In the HTML editor.

You can either hand-code your paragraphs (by adding <p></p> tags), or flip back over to the visual editor, and replace "TEXT GOES HERE" with your sidebar text, using all of the normal formatting tools available in the visual editor.

That will get you a quick-and-dirty sidebar. You can even then add in the sidebar graphic that you normally use, centered with no caption, and then add your sidebar text as per normal.

Of course, that will get to be a lot of work, if you intend to use that sidebar frequently - so that's where you would want to get comfortable with using CSS declarations to do most of the dirty work for you, automatically.

The code above that I gave you does two things:

1) Automagically adds in the sidebar graphic whenever you add a <div class="sidebar">

2) Floats that sidebar div left or right, whenever you add a <div class="sidebar floatleft"> or <div class="sidebar floatright">

(I should note one caveat: I don't think IE6 recognizes multiple class declarations such as 'class="sidebar floatright"' - it will only apply the first class, i.e. "sidebar". In such case, you will need to use <div class="sidebar" style="float:right;">)

To use this method, open your theme's style.css file, and add the above CSS code. (You can tweak it to your liking once you see it in action.) Then, when writing a post, just add a <div class="sidebar floatright"></div> and add your sidebar text inside the div.

The visual editor probably won't render the sidebar properly; you will need to preview the page to see the CSS properly applied.

[Otto]

More info on the styles used by WordPress (but which the theme should be defining) are here: http://codex.wordpress.org/CSS