View Full Version : ul with witdh 100%
07-28-2011, 09:21 PM
here is my example code
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?
07-28-2011, 09:29 PM
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.
07-28-2011, 09:45 PM
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?
07-28-2011, 09:56 PM
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??
07-28-2011, 10:21 PM
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
07-28-2011, 10:22 PM
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.
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.
07-29-2011, 02:57 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
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.
07-29-2011, 03:08 AM
i think what he is trying to do is something like
and the <li>'s are added one at a time so....
one, two, three, ... and so on until nth list item reached
OP... am i on the right track?
07-29-2011, 03:12 AM
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.
07-29-2011, 03:20 AM
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.
Anyway thanks to all
07-29-2011, 03:51 AM
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
07-29-2011, 03:53 AM
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.
07-29-2011, 01:40 PM
I have found a CSS solution - style it like a table. It doesn't work in some browsers but still good idea ;)
border: 1px solid black;