Web Analytics Made Easy -
StatCounter DIV DIV within LI - CodingForum

Announcement

Collapse
No announcement yet.

DIV DIV within LI

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    That code displays as:

    ABC
    ZXY

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

    Comment


    • #3
      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... :/
      markaylward.co.uk

      Comment


      • #4
        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?....

        Comment


        • #5
          Well you can do it, just maybe a <span> would be better suited.
          markaylward.co.uk

          Comment


          • #6
            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>

            Comment


            • #7
              Why are you using a table?

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

              Comment


              • #8
                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.
                drums | web

                Comment


                • #9
                  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; Sep 28, 2006, 07:03 PM.

                  Comment


                  • #10
                    no code
                    show picture
                    or link

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

                    Comment


                    • #11
                      hope this helps =)
                      Attached Files

                      Comment


                      • #12
                        So you want each section to have the name of a country, then below some related number, then line those up horizontally like tabs?
                        drums | web

                        Comment


                        • #13
                          yep
                          is it really difficult?

                          Comment


                          • #14
                            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…
                            drums | web

                            Comment


                            • #15
                              hi, just wondering if is possible to use UL and LI to achieve this?

                              Comment

                              Working...
                              X