Skip to Questions

Guide FAQ - Your LibGuides v1 Questions. Answered!

Q

I have an image floating left with a bulleted list to the right. The bullets are laying on top of the image. How do I move the bullets over?

Last Updated: Apr 16, 2013  |  3943 Views
Topics: Images, Boxes, CSS

Was this helpful? 3   7
A

Answer

Has this happened to you? Adding a bulleted list to the right of an image floating left? And the bullets are overlaying on top of the image?

To get the bullets to move over, you need to a margin-left, but you need to take into account the width of the image.

 

For example, this code would NOT provide enough of a margin-left because it doesn't take into account the width of the image.

 

<p><img src="Image style="float: left; border: 0; margin-right: 10px;" width="107" height="160" /></p>
<p>If you have an urgent or detailed question:</p>
<ul>
<li style="margin-left: 5px;">Text</li>
<li style="margin-left: 5px;">Text</li>
</ul>

Even though added a margin to the picture, which creates space between the regular text (not text in a bulleted list) and you added margin spacing in the actual LI tags, the 5px wasn't enough.

To fix this?

Take the width of the image + 10px = put this in the LI margin-left.

For example:

  • This Image is 107px wide. Add 10px = 117px. Put this in the margin-left: 117px for the <li style>

<p><img src="Image style="float: left; border: 0; margin-right: 10px;" width="107" height="160" /></p>
<p>If you have an urgent or detailed question:</p>
<ul>
<li style="margin-left: 117px;">Textt</li>
<li style="margin-left: 117px;">Text</li>
</ul>

 

Answered by Talia RichardsBookmark and Share

Other Answers / Comments (0)

    Need Help?

    This site contains FAQs for LibGuides v1 only.

    LibGuides v2 Documentation
    (You must have a LibApps account to access that site.)

    Or click HELP in the orange command bar of your v2 system.

    Support:

    Follow LibGuidesFAQ on Twitter Follow us on Twitter!
     Your questions, answered!

    Browse by Popular Topics

    Accounts  –  Admin Area  –  API / Widgets  –  Boxes  –  Catalog / Database Integration  –  CSS  –  Customization  –  E-Reserves  –  Embedding Objects  –  General System Questions  –  Group Management  –  Guides  –  Holiday Closures  –  How To...  –  Images  –  LibGuides CMS  –  Links  –  Mobile  –  Pages / Tabs  –  Profiles  –  RSS  –  Search  –  Security  –  Statistics  –  Subject Categories  –  Survey/Form Tool  –  System Administrators  –  Tags  –  Webinar  
    View All Topics

    Related content from Springshare v1 Help