Page 1 of 1

Can I emulate tis table behavior using <li>

Posted: Mon Oct 15, 2007 4:19 pm
by alex.barylski
I have a horizontal series of <li><a> which are used to generate a rolodex style index mechanism for an app I am developing.

Code: Select all

<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
<li><a>D</a></li>
...
These are displayed horizontally across the top of the screen. I also have two items at the right and left side of this above which are always dynamic in width, such as...

Code: Select all

[See All][A][B][C]...[Z][0 to 9]
I cannot for the life of me figure out a way to have each of the items consume the perfect amount of space given their content, so that the entire horizontal space is consumed...

Much like:

Code: Select all

<table width="100%">
  <td>See All</td>
  <td>A</td>
  <td>B</td>
  <td>C</td>
  <td>...</td>
  <td>0 to 9</td>
</table>
Any ideas? Should I just use a table?

Posted: Mon Oct 15, 2007 4:27 pm
by Kieran Huggins
maybe margin:auto; ? That wouldn't grow the elements, but at least they'd be spaced evenly.

Other than that I'm out of ideas :-( CSS is nice, but there are design problems yet to be solved elegantly.

Posted: Mon Oct 15, 2007 4:36 pm
by alex.barylski
Bummer.

I suppose I can use tables, as it's auto generated from code so only the resulting HTML would be bloated.

I'm starting to second guess my choice of having this quick indexing. Works good and looks good, but with the multi-language issues, I'm starting to wonder if it's really worth it.

Thanks :)

Posted: Mon Oct 15, 2007 4:44 pm
by Kieran Huggins
When all else fails, ask yourself: WWAD?

(what would apple do?)

EDIT: Sorry about the double post, I was posting just as the server died :-( Must have been my shaky hands at the prospect of no DevNet.

Posted: Mon Oct 15, 2007 10:29 pm
by gregwhitworth
Nice repeat of posts there K (Hope you don't mind me callin you that), anyways - I don't quite understand what your asking. Are they going to be shown alone and rotate, thus being a roladex style. This would mean that you would only need each <li> to consume the desired space. You can however, encase each ul with a <div> that is your desired space amount - this is what I would do with that div:

Code: Select all

#roladex {
      width: 780px;
       margin: 0 auto; /* this centers using CSS */
       overflow: hidden;
       float: left;}
This basically tells the div to be 780px, the kicker is in the overflow: hidden, this makes it so that you can put 600 of these divs in another div (make sure to apply the overflow hidden to that as well) and they will line up next to each other, the div will expand with the content. Unfortunately I am not at home, so I can't fully test this out - but hopefully this gives you a good start.

I do know that IE runs into some problems with overflow: hidden, it cuts anything outside of the box, so I always have to use an IE hack to fix that problem:

Code: Select all

....
overflow: hidden;
/*\*/* overflow: visible; /**/
..
hope that helps:
Greg

Posted: Mon Oct 15, 2007 10:31 pm
by gregwhitworth
Oh by the way, here is a site that I recently created using only divs and this idea:
http://www.itsak.com/staging/kenaipeninsula/index.htm

Not a single table, a lot of ap items - hopefully it helps ya.

--
Greg

Posted: Tue Oct 16, 2007 12:11 am
by Kieran Huggins
@G: I don't mind at all 8)

The iPhone lists letters vertically down the right side of long lists. Not surprisingly, it's a very natural interface.

Posted: Tue Oct 16, 2007 1:27 pm
by gregwhitworth
Hey K, we are actually quite close, well closer than most. I live in Wasilla, Alaska!

Posted: Tue Oct 16, 2007 3:11 pm
by matthijs
If I understand correctly what you want you could also set the widths of the individual li elements with a certain %. Only drawback is that you should know in advance how many you'd have.

Posted: Tue Oct 16, 2007 11:06 pm
by Kieran Huggins
You should drop by for coffee sometime... a mere 4,064 miles!