Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Dec 2009
    Posts
    108
    Thanks
    22
    Thanked 2 Times in 2 Posts

    put 'img' inside 'ul'

    is it a good practice to put 'img' tag inside 'ul'?
    e.g. have certain pictures somewhere inside the list

    it seems that if an img or div is put inside the 'ul', the behaviour is quite unexpected~~~

    if it is not a good practice, how to deal with this situation?

    thx in advance.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    If you put the <img> inside a <li> then it's valid and should not have any unexpected results.

    Code:
    <ul>
     <li><img src="" /></li>
     <li><p></p></li>
    </ul>
    Try posting your full script and tell us the unexpected results you are seeing.

    I wouldn't consider it "good practice" to put img inside a ul. A ul is a list! Inless your listing <img>s then there isnt a reason to use it.

    -thanks
    Last edited by Sammy12; 07-10-2011 at 07:03 PM.

  • Users who have thanked Sammy12 for this post:

    mehere8 (07-11-2011)

  • #3
    Regular Coder
    Join Date
    Dec 2009
    Posts
    108
    Thanks
    22
    Thanked 2 Times in 2 Posts
    it seems merely inserting an img into the list doesn't incur any side effect. I find my problem results from a containing div in the list:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    ul {
    	margin: 0px;
    	padding: 0px;
    	list-style-type: none;
    	background-color: yellow;
    	width: 100px;
    }
    ul li {
    	background-color: #9F0;
    	margin: 5px 10px;
    	padding: 0px;
    }
    .wrapper {
    	background-color: #FC6;
    }
    </style>
    </head>
    
    <body>
    <ul>
        <div class="wrapper">
            <li>haha</li>
            <li>hehe</li>
        </div>
        <img src="" width="100" height="10" />
    </ul>
    </body>
    </html>
    the last 'li' has a 5px margin-bottom but the bottom side of the 'wrapper' div overlaps the bottom of that 'li'. Also the first 'li' has a 5px margin-top, which doesn't show up ~~~

    Further, it seems that
    <ul>
    <li>haha</li>
    <li>hehe</li>
    </ul>
    also ignore the top margin of the first list item and the bottom margin of the last. Why is it like that ~~~

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Your code is invalid.

    You cannot use any element inside <ul> or <ol> elements other than <li>.

    Only <li> can be the child element of <ul> or <ol>.

    If you want to use in list, you should use following code:

    Code:
    <ul>
        <li>haha</li>
        <li>hehe</li>
        <li><img src="" width="100" height="10" /></li>
    </ul>
    Cheers

  • Users who have thanked vikram1vicky for this post:

    mehere8 (07-11-2011)

  • #5
    Regular Coder
    Join Date
    Dec 2009
    Posts
    108
    Thanks
    22
    Thanked 2 Times in 2 Posts
    thx
    i may ask my another question in another thread

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    U r welcome .....

    let me know through PM whenever you ll ask another ques...

    take care


  •  

    Posting Permissions

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