...

View Full Version : ul with witdh 100%



Radovan
07-28-2011, 09:21 PM
Hello,

here is my example 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?

teedoff
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.

Radovan
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?

teedoff
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??

alykins
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

Radovan
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.


<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.

teedoff
07-29-2011, 02:57 AM
<!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.

alykins
07-29-2011, 03:08 AM
i think what he is trying to do is something like



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?

teedoff
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.

Radovan
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.

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

alykins
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

teedoff
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.

Radovan
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 ;)

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;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum