SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Salem, OR
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question UL, 3 LI need text to wrap image

    This is the issue I am currently trying to solve. Using UL I have 3 LI:

    1. Text title
    2. An image
    3. Text description that is long enough to flow around '2.'.

    e.g.,

    <ul>
    <li>This is a title</li>
    <li><img src=""/></li>
    <li>Praesent vestibulum, libero vel faucibus posuere, nisi ante gravida purus, eu imperdiet ipsum metus ut nunc. Aliquam porttitor convallis arcu. etc., etc.</li>
    </ul>

    The image is set to float: right. All works well except the text in the 3rd LI item forms a column to the outmost left-hand side of the image i.e., it does not flow and wrap underneath. i.e.,

    TTTTTTTT
    xxxxxxxxxxxxxxxxxxxxxxxxxxxx yyyyy
    xxxxxxxxxxxxxxxxxxxxxxxxxxxx yyyyy
    xxxxxxxxxxxxxxxxxxxxxxxxxxxx yyyyy
    xxxxxxxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxxxxxxxxxxxxxxxxxxxxxxx

    Where 'T' is the text in the 1st element
    Where 'x' is the text in the 3rd element
    Where 'y' represents an image

    Help.

  2. #2
    SitePoint Wizard bronze trophy hooperman's Avatar
    Join Date
    Jan 2006
    Location
    Manchester, UK
    Posts
    4,301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure whether this is the most elegant solution but could you assign a class to the 3rd LI and set its display to inline?

    HTML Code:
    <ul>
    <li>one</li>
    <li>two</li>
    <li class="inline">three</li>
    </ul>
    
    css...
    li.inline {
      display: inline;
    }

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why don't you just place the image in the same list item as the text? In fact, why use a list at all? Shouldn't it be a header, followed by a paragraph with a floated image inserted in the paragraph?


Bookmarks

Posting Permissions

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