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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIV DIV within LI

    Code:
    ul {
    	margin-left: 0;
    	padding-left: 0;
    	display: inline;
    } 
    
    li {
    	display: inline;
    	list-style: none;
    	}

    does any know why if I use DIV inside LI like below, the LIs will not line up horizontally anymore? Anyway to make it so?

    Code:
    <ul>
    <li>                
         </div>
           ABC            
        </div>
    </li>
    <li>                
        <div>
         ZXY            
        </div>
    </li>
    </ul>
    thanks for any input

  • #2
    New Coder
    Join Date
    Aug 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That code displays as:

    ABC
    ZXY

    Isn't this how you want it to display?
    Yeah, I have 2 cents.

  • #3
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A div is a block level element... you'd need to have li div { display: inline } in there. Not sure if div's should be in li's really though... :/

  • #4
    New Coder
    Join Date
    Jul 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hum....not sure what i should do then...

    i want a tabbed menu

    with each tab, a LI

    displays couple lines of text and an image
    with the layout using div


    is this possible?....

  • #5
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well you can do it, just maybe a <span> would be better suited.

  • #6
    New Coder
    Join Date
    Jul 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hum i tried something like below, but didnt work....
    am i doing sotmehig wrong?



    <ul>
    <li>
    <span>
    <table><tr><td>
    ABC </td></tr></table>
    </span>
    </li>
    <li>
    <span>
    ZXY
    </span>
    </li>
    </ul>

  • #7
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why are you using a table?

    Start again and explain what you're trying to do and what you want it to look like...

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Auuugh, don't throw tables in there… div or span is much much better. They don't mean anything semantically.

    The LIs don't line up anymore because the div is a block-level element (like a list item), and by default it takes up 100% width.

    If you goal is to have each menu item contain an image and a couple of lines of descriptive text, I probably wouldn't use an unordered list at all. Post a screenshot of what you're trying to do and I'll show you how I'd mark it up.

  • #9
    New Coder
    Join Date
    Jul 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry tried to make it easier to read before, but i guess made it more confusing =P

    below is what i am trying to do

    it will update the message-US and message-CA with DOM & AJAX
    and background bgcolor will change as will

    i have all this working, just that i wanted to be in a horizontal tab layout

    Code:
    <ul>
    <li>
                    <div >
                        <div><H3>US</H3></div>
                        <div>
                            <table><tr>
    
                                <td id="td1-US" width="100" bgcolor="white" border="2">
                                    <div id="message-US" align="center">empty</div>
                                </td>
                            </tr>
                            </table>              
                        </div>
                    </div>
    </li>
    
    <li>
                    <div >
                        <div><H3>CA</H3></div>
                        <div>
                            <table><tr>
    
                                <td id="td1-CA" width="100" bgcolor="white" border="2">
                                    <div id="message-CA" align="center">empty</div>
                                </td>
                            </tr>
                            </table>              
                        </div>
                    </div>
    </li>
    
    
    </ul>
    Last edited by khan8822; 09-28-2006 at 11:03 PM.

  • #10
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    no code
    show picture
    or link

    Because your code says you want to have data tables with the word "empty" in them.

  • #11
    New Coder
    Join Date
    Jul 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hope this helps =)
    Attached Thumbnails Attached Thumbnails DIV DIV within LI-myc.jpg  

  • #12
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    So you want each section to have the name of a country, then below some related number, then line those up horizontally like tabs?

  • #13
    New Coder
    Join Date
    Jul 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yep
    is it really difficult?

  • #14
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    No. I guess I just don't understand what the numbers are all about.

    The reason why I even want to know is because HTML is nothing more than defining (marking up) your content semantically. So, in this case I'd probably use definition lists as my markup:

    Code:
    <dl>
     <dt>US</dt>
     <dd>245000</dd>
    </dl>
    Because there's no built in wrapper for each definition term I'd use separate lists:

    Code:
    <dl>
     <dt>US</dt>
     <dd>245000</dd>
    </dl>
    
    <dl>
     <dt>CA</dt>
     <dd>255555</dd>
    </dl>
    Then to give the whole thing some sort of style hook I'd throw it all in a <div>:

    Code:
    <div id="menu">
     <dl>
      <dt>US</dt>
      <dd>245000</dd>
     </dl>
    
     <dl>
      <dt>CA</dt>
      <dd>255555</dd>
     </dl>
    </div>
    Then you can start styling:

    Code:
    *	{
    	margin: 0;
    	padding: 0;
    }
    		
    #menu	{
    	border-left: solid 1px #000;
    	margin: 1em 0;
    }
    		
    #menu dl {
    	width: 200px;
    	float: left;
    	border: solid #000;
    	border-width: 1px 1px 1px 0;
    }
    
    #menu dt, #menu dd {
    	text-align: center;
    	padding: .5em 0;
    }
    		
    #menu:after	{
    	content: ".";
    	display: block;
    	height: 0;
    	visibility: hidden;
    	clear: both;
    }
    …and take it from there. There are a bunch of different ways to approach this… this is my two cents. Hope it helps…

  • #15
    New Coder
    Join Date
    Jul 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi, just wondering if is possible to use UL and LI to achieve this?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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