CSS Headache - Guru Required!

If you have questions about using mojoPortal, you can post them here.

You may want to first review our site administration documentation to see if your question is answered there.

This thread is closed to new posts. You must sign in to post in the forums.
8/12/2010 10:37:48 AM
Gravatar
Total Posts 116

CSS Headache - Guru Required!

Hi all, hopefully someone will be kind enough to put me out of my misery with this one!

I have a page that has a paragraph at the top then an images which is floated to the left.  To the right of the image I have some more text that includes an unordered list.  I had problems getting the list to look right as the bullet points stayed inside the image so set an enclosing div with a margin-right property to clear the image and that worked fine.

The real trouble started when I wanted to have some paragraphs also to the right of the image that used the slideshow feature.  As they have to be 1st level elements I closed the above div that contained the other text and put them in their own div with the class set to match the slideshow...... if I don't float the div it goes into the image, if I float it left it goes to the right of the image but goes very narrow so I also set width:100% and that kinda works - what is totally defeating me is getting the paragraphs to center to the right of the image and I have tried allsorts - text-align, margin-auto on the div etc.  My CSS could be better but I think I have gotten to the point of not seeing the wood for trees.........  

Is there anyway to apply the slideshow effect to 2nd/3rd level elements or can anyone help with the css - the abbreviated markup so far is:

<p>Text</p>
<p> </p>
<p><img class="floatleftimagebtm" src="" alt=" " width="260" height="481" /></p>
<div style="margin-left: 270px;">
<p>Text</p>
<ul>
<li>First of several list items.</li>
<br />

............
</ul>
<p>Text</p>
<p></p>
</div>

<!--
<div class="pcuSlide" style="float: left; margin-left: auto; margin-right: auto; width: 500px; border: 1px solid black;" _mce_style="float: left; margin-left: auto; margin-right: auto; width: 500px; border: 1px solid black;"> 

-->

<div class="pcuSlide" style="float: left; width: 100%;">
<p><strong>Text</strong></p>
<p>Text</p>
</div>
<p> </p>
<p> </p>
<p><img src="/Data/Sites/1/uploadedfiles/pdficon.png" alt="PDF Icon" width="32" height="32" /></p>
<p><Text</p>

 

Any tips would be greatly appreciated.

Regards

Andrew

8/12/2010 10:52:24 AM
Gravatar
Total Posts 2239

Re: CSS Headache - Guru Required!

Hi Andrew,

Is there any way you can provide a link to the site? I would love to help but I don't really have time to recreate your situation.

Thanks,
Joe

8/12/2010 10:56:33 AM
Gravatar
Total Posts 116

Re: CSS Headache - Guru Required!

Hi Joe,

I will send you an email with the details so you can take a look.

Many thanks,

Andrew

Edit - Have sent email, let me know if you don't receive it.

You must sign in to post in the forums. This thread is closed to new posts.