If i add an image to entries that i publish the text is always shown underneath the image while i would like to make it appear next to the images that i publish in my entries. So my question is: How can I add images to entries without leaving a white space next to the image in the entry when it’s published?

The following site shows the way I want to display my entries (text and an image combined in each entry):
http://www.geenstijl.nl/

Here’s an example of what happens now when i add an image to an entry with pMachine:
http://www.martijnvanosch.nl/comments.php?id=87_0_1_0_C

Thanks in advance.

Martijn

You need to add a css class to your image tag and “float” the image.

Depending on your setup you might be able to get away a more generic declaration, without having to class every image.

That says every image that appears in a paragraph, that appears in the column with the class “.weblog” will have those styles attached.

Thanks smallbeer!

Just adjusted the css and it works.  :-)

Martijn

You are wonderful!! Thank you! It worked.

I have the same problem with floating images—in Firefox the images look fine, but in IE the picture just disappears.  (Example here.)

Sometimes I don’t mind posting the picture on its own with no text alongside it (like here —image is at the bottom), and other times I want the image to float.  So I am probably better off using the .image tag for specific weblog entries.

My only question is—where specifically would I put that css tag?  I tried to put it in the beginning of the entry, using <style> tags (is that right?), but it didn’t work—again, looked fine in Firefox, no joy in IE.  Thanks in advance!

Bump—still can’t get my image to float.  Smallbeer’s advice is to add css class to the image tag.  I want to give that a try but I don’t know how.  Do I post this css class in the weblog entry when I upload the image?  Am I supposed to add it to the existing css for weblog.php?  Somewhere else?

Stennie -

There’s two basic steps:

#1.  Adding a declaration in your CSS file.

#2 - Referencing that declaration from the image HTML from within the entry.

#1 - Here’s some code that I’ve used, and it works both in FF and IE.  This floats the images right and also adds a background and border for a “framed” effect:

#2 - Here’s the Image code from within an entry:

Hi, Michael—

Thank you for your response.  I added the “right” declaration to the CSS file (also a “left” one), and the class tag to the post entry.  Unfortunately—still not showing up in IE!  Take a look.

One thing I noticed is that when adding class=“left” to the <img> tag, because of the way pmachine auto-codes image tags, it wouldn’t allow me to put the class tag before the src, so I put it after.  Would that make a difference?

Stennie - I was able to get the image to appear and float right in IE by doing the following:

-add this to your right and left image css declarations:

-putting the class=“right” into the img tag (which you can do by editing the code that pM drops in for you after uploading the image).

The root cause was a “layering” issue with the center column and the image….

Yaaaaaaaaaay!  THANK YOU so much, Michael, that worked—I really appreciate your help.

Glad it worked.  CSS is pesky sometimes..