Need help using bullet list and displaying image beside it

[elkman]

I am working on a new template layout and everything has been working fine. I have run into a problem when I create a bullet list and want to place an image associated with the list contents to the right of the bullets.

I can't get the pieces to play nice. The goal is to allow the website admin to create the list and then use TinyMCE to select an image file that will show directly to the right of the created list. I want to basically wrap the bullet list and the image.

Here is what I am getting now:
http://www.aaronsmithplasticsurgery.com ... procedures

Placing the image and postioning it to the right using TinyMCE has simply pushed the bullet list down on the left. Is there any way to place the list on the left in line with the image to the right using just TinyMCE?

I am trying not to have to use anything that a client's staff couldn't do easily.

Wrapping an image to the left or right of normal text is a breeze.

Thanks for any help or suggestions!

Using 1.9.4.3 and TinyMCE 2.9.1

[nervino]

I think you should put the floated image tag at the end of the unordered list, and in the same paragraph.

Something like this:

Code: Select all

<p>Breast Procedures:
<ul>
<li>Breast Augmentation</li>
<li>Breast Lift (Mastopexy)</li>
<li>Breast Reduction</li>
<li>Breast Reconstruction</li>
<li>Male Breast Reduction</li>
</ul><img style="float: right;" src="uploads/images/Breast%20Augmentation/adjustable-breast-implants.jpg" alt="" height="189" width="200"></p>

[elkman]

Thanks for the idea. However, TinyMCE simply added back in the <p> tags. This simply pushed the image below the list and to the right.

I can just drop in a <div> like this:

Code: Select all

<p>Breast Procedures:</p>
<div><img style="float: right;" src="uploads/images/Breast%20Augmentation/adjustable-breast-implants.jpg" alt="" width="200" height="189" /></div>
<ul>
<li>Breast Augmentation</li>
<li>Breast Lift (Mastopexy)</li>
<li>Breast Reduction</li>
<li>Breast Reconstruction</li>
<li>Male Breast Reduction</li>
</ul>

But, my client won't know to do this and they want to add a lot more content.

[Dr.CSS]

Your best bet is to use CSS to style UL image, add a class to the UL then style it as you want, they won't have to mess with the image at all...

[elkman]

Great thought Dr. CSS. Thank you. I was wondering if I was missing something in TinyMCE.