www.webdeveloper.com
Results 1 to 3 of 3

Thread: floated image getting in between bullets and list text

  1. #1
    Join Date
    Mar 2014
    Posts
    1

    floated image getting in between bullets and list text

    Hello,

    I'm trying to float an image to the left of an unordered list that uses a background image to create the bullets. When I float the image, the bullets are showing up to the left of it, separated from the text they are supposed to go with. I'd like them to stay to the right of the image along with the list text.

    Here is the HTML
    <h4>Programs</h4>
    <p class="text_1">MIT Faculty Co-Teaching Residencies at SUTD</p>
    <p>Through this program, MIT faculty travel to Singapore to foster the development of a rigorous and innovative academic culture at SUTD. MIT professors spend five to six hours each week in the classroom and have the opportunity to get involved in many other ways. They may mentor SUTD faculty, work with students and help out in cohort classrooms. </p>
    <p><img src="images/JohnTeaching.jpg" width="186" height="276" class="round" style="float:left; margin:10px"></p>
    <p>Residencies are possible in various formats to minimize the impact on MIT departments. They also include generous compensation and travel allowance. Options include:</p>
    <ul class="list-2">
    <li>Two four-week residencies during MIT's fall or spring term (with department replacement)</li>
    <li>Single four-week residency during MIT's fall, spring, summer or IAP term (without department replacement)</li>
    <li>Single two-week residency during MIT's fall, spring, summer, or IAP term (without department replacement)</li>
    </ul>

    And here is the CSS line for the list-2 class
    .list-2 li{padding:0px 0 10px 14px;background:url(../images/list2-marker.gif) 0 7px no-repeat;}

    Any thoughts?

    Thanks!

  2. #2
    Join Date
    Oct 2013
    Location
    3rd planet from the sun
    Posts
    171
    if you don't have a website place your code on a site like codepen.io so we can see what you're doing

  3. #3
    Join Date
    Mar 2014
    Posts
    3
    Hello , Try add
    list-style-position: inside;
    your code will be
    .list-2 li{padding:0px 0 10px 14px;background:url(../images/list2-marker.gif) 0 7px no-repeat; list-style-position: inside; }
    and give me more explain about your problem .

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles