By jesusphreak on

I've got an image right beside a paragraph.

Basically, it looks something like this:

<p>text</p><img src="/example" />

But what ends up happening is the image displays below the paragraph, when I want it to display beside it.

What CSS can I use to get the image to display to the immediate right of the paragraph?

Thanks :)

Comments

laura s’s picture

laura s commented

I answered your post here: http://drupal.org/node/23368 -- specific to taxonomy_image module, but I think you'll ge the idea for other applications.
===
Laura
pingV

_____ ____ ___ __ _ _
Laura Scott :: design » blog » tweet

sicario’s picture

sicario commented

If u still need fix this.
Thee css that you need here, is something like this:

.right {
float: right;
margin: 0 0 4px 4px; /*distance between pargraph and the content around it*/
border: 1px solid #777; /*just if u want border, if no, just put 'none'*/
padding: 2px;/*distance between the 'margin' and the image itself*/
}

And the HTML for apply that code, it's something like this:

<p>
<img class="right" src="/images/image.gif" alt="Image" />Some dummy text...
</p>

Hope this be useful :]

conann’s picture

conann commented

I use image assist for all of my entries and use the same method sicario has so nicely explained, the only difference is with the html. While the it will work with the image nested inside the p tags it does not have to be that way. It should work as long as the image appears before the paragraph in the code

ghankstef’s picture

ghankstef commented

The example from sicario is a good one, but what if I need to be able to float the image to the left or the right. Is there a way to hack Image_Assist to do this?

nevets’s picture

nevets commented

If you are using the image module you can use the image filter to achieve this. from the readme for image filter

Syntax: [image:node_id (left|right|top|middle|bottom|absmiddle|texttop|baseline) hspace=n vspace=n border=n width=n height=n].
Every parameter except node_id is optional.

The image code(s) will be replaced by a thumbnail-sized image linked to the full-size image node.

conann’s picture

conann commented

There is no hacking needed just css, follow the easy path float:right; Float left is all you need pick appart my theme if you need or contact me and I will walk you through it.

ghankstef’s picture

ghankstef commented

conann, thanks for your reply can you elaborae a bit more or give an example?

I know how to float and image left or float and image right with CSS. I am trying to figure out how to give the user this option when adding an image. I think you are trying to tell me how to do this but I don't understand your answer. Which theme ddid you do that I can pick apart?

Thanks