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 13 of 13
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    ul with witdh 100%

    Hello,

    here is my example code
    Code:
    <div style="width:500px;">
       <ul>
          <li>MenuItem1</li>
          <li>MenuItem2</li>
          .....
       </ul>
    </div>
    I need to set the same width to all <li> elements so they will allways fill 100% of parrent <div>. It looks simple in my example, I can just set <li> width to 250px or 50% (2<li> * 250px = 500px) but the problem is I don't know how many <li>s there will be as they are generated dynamically.

    Is there any way to do it?

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    umm if you style the li tag then ANY and ALL list tag elements will be styled, no matter if they're dynamic or static.
    Teed

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I know, but how to set their width, so they all will always fill the parrent div?

    In case of 1 <li>, it will have 100% width, in case of 2 - 50% width, in case of 3 - 33% width. But I DONT KNOW how many <li>s there will be, so how to do it?

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    oK width is left to right...correct? Doesnt matter how many li's you have each will be the same width.

    Height on the other hand is up and down. In this case, a div's natural behavior is to expand vertically to contain all its content. Thats provided of course that you dont set a height on that div.

    Are you sure you know what you're wanting to do??
    Teed

  • #5
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,725
    Thanks
    41
    Thanked 191 Times in 190 Posts
    are you missing a key piece of CSS.... are you floating your <li>'s?

    Edit: without that piece of info we have to assume that the <li>'s are "normal" and stacking on top of each other, and not going left to right

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #6
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts
    No, defaultly they don't have the same width. Their width depents on the text inside them.

    Sorry, I forgot to mention that I am doing a horizontal menu. And yes, I know what width and height is.

    So here is more specific example what I am really doing.
    Code:
    <html>
    <head>
    <style>
    ul
    {
    margin:0;
    padding:0;
    }
    
    li
    {
    display:block;
    float:left;
    }
    
    div
    {
    width:500px;
    background:yellow;
    }
    
    </style>
    </head>
    <body>
      <div>
        <ul>
          <li style="background:red;">Menu1
          </li>
          <li style="background:blue;">Menu2dsadsaddsa
          </li>
          <li style="background:green;">Menu3dsads
          </li>
        </ul>
        <div style="clear:left">
        </div>
      </div>
    </body>
    </html>
    I repeat, I don't know how many menu items (<li>s) there will be, all menu items have to be same width and they have to fill the parrent div's width.
    Last edited by Radovan; 07-28-2011 at 09:29 PM.

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    li {
    	background-color:red;
    	list-style-type:none;
    	margin:2px;	
    }
    #list {
    	width:500px;	
    }
    </style>
    </head>
    
    <body>
    <div id="list">
       <ul>
          <li>MenuItem1MenuItem1MenuItem1</li>
          <li>MenuItem2</li>
          <li>.....</li>
       </ul>
    </div>
    </body>
    </html>
    Is this not what you're trying to do basically? Three different text lengths, but as you can see the red background color on the li tag all extend the same length.
    Teed

  • #8
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,725
    Thanks
    41
    Thanked 191 Times in 190 Posts
    i think what he is trying to do is something like

    Code:
    li{float:left;}
    
    <li>one</li><li>two</li><li>three</li><li>....</li><li>n</li>
    and the <li>'s are added one at a time so....
    one, two, three, ... and so on until nth list item reached

    this cannot be done via html/CSS alone (i'm pretty sure) but you can do some sort of math javascript function where you count how many li's are added, then divide that across how many px you have (let's say there are 5 li's total with 100px of room... 100/5 each li is 20px) now target the li's and assign the width of 20px

    OP... am i on the right track?

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    Radovan (07-29-2011)

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    ahhh ok well then I totally misread/interpreted the question...lol

    and no cant be done with html/css. And. once it reaches so many list items, wont they get so small they'll be hard to read?? lol

    I think maybe this idea/layout scheme needs to be reworked and thought out better.
    Last edited by teedoff; 07-29-2011 at 02:14 AM.
    Teed

  • Users who have thanked teedoff for this post:

    Radovan (07-29-2011)

  • #10
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts
    teedoff: Yea, they have same width, but as I said, I need a horizontal menu and the only way is to float them. After floating them, their width differs because it depends on the text inside them.

    alykins: I know I can do it using JavaScript (I can even edit PHP code that generates the menu) but I was just hoping it's possible to do it with CSS.

    Anyway thanks to all

  • #11
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,725
    Thanks
    41
    Thanked 191 Times in 190 Posts
    the function would be client side, so it would be after the php generates it (assuming php is generating the li's) if not and js is generating the li's then call the function after the js gen fxn fires, and if php do it on page load... i am not an expert js writer. maybe someone in js forum is bale to help more efficiently... i personally would tackle each aspect at a time... first id get the math part, then id write the restyle part, then id handle calls

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #12
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    but as I said, I need a horizontal menu and the only way is to float them
    Well no you never said that until now, which is why I was not answering you correctly..lol

    I would again suggest you rethink this concept/idea. If you have to resort to js to get any functionality to work in your site, then somethings wrong. Just my two cents.
    Teed

  • #13
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I have found a CSS solution - style it like a table. It doesn't work in some browsers but still good idea

    div {
    display: table;
    width: 100%;
    border-spacing: 5px;
    table-layout:fixed;
    }
    ul {
    display: table-row;
    height: 2em;
    }
    li {
    display: table-cell;
    border: 1px solid black;
    }
    Last edited by Radovan; 07-29-2011 at 01:05 PM.


  •  

    Posting Permissions

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