tab-like ul on multiple lines

[Daniel Jung]

Hi

This is not a "CSS I want you to do for me since my boss needs it
yesterday"... I am wondering about a few things, and I am still working
on this, but wanted to share it with you at this stage. Maybe you have
some input, which I would appreciate.

I made a tab-like display of a <ul>. It's easier shown than explained,
so here is the link: http://lingo.uib.no:9002/MOO_info/main.html

The part in question is the "div.menutablist" (at the bottom of the CSS
section). I want to discuss the list layout only.

All in all, I think it works fine. But if there are too many tabs, or
the horizontal space is too small, they get broken over more than one
line. Try yourself by adjusting window width to display three and two
links in a row. I think it's kind of cool that the links now are
displayed almost 3d-ish.

Still there is something missing. I added

... a {margin-bottom: 2px solid #EDBD79;}

but it had a bad effect on the "floating" links, and even worse for the
ones on the ul container bottom line; they got these small lighter
angles in the lower left corner (of course). I added

... ul.menu {background-color: #F6DEBC;}

to gather the link some more, in an attempt to make them appear in some
kind of "field", but that didn't work.

That, and then that the display (when broken over lines) is misguiding:
The first list element would appear in the back row, which gives the
impression that is is not amoungst the first ones the user should read.
The order of links has, of course, a meaning.

I hardly want to reverse the order of links - that would make the first
element appear on the right. And since I don't know how many links per
row the user actually views, I cannot take the row with the chosen link
and display it first and move the others back. The links are server
generated; when the page is requested, I can sort the links
alphabetically, chronolocically, and interchange them like I please.

Theoretically, I could force the chosen link to be amoungst the three
latest links, thus ensuring it "always" would stay in the bottom line.
But that would mean changing the order of links (and/or: rows) whenever
the user clicks on one - generally not a good thing, I think. And I have
no control over the user's viewport, so I don't even know if he will
always have at least three links in one row.

This is a "pattern" what will serve a range of pages. The number of
links could be from 3 to maybe 16, and the length could vary a lot (up
to a few words). I really want to make that work neatly for all pages,
so I'm working on a solution that works for rather long lists as well.

How about a bottom line for each (virtual) row? A line that would appear
only when the list is broken over more than one line, and which would
stay behind the nearest/lowest links? Can't see the coding for that
right now. But maybe someone has done that already, or something similar?

Needless to say, I don't want graphics, and I want to do that as
low-level-CSS as possible, since I am afraid I can't trust the users to
have latest CSS level.

Thanks for listening, and maybe input.

- Daniel

[Jim Moe]

Daniel Jung wrote:

Hi

This is not a "CSS I want you to do for me since my boss needs it
yesterday"... I am wondering about a few things, and I am still working
on this, but wanted to share it with you at this stage. Maybe you have
some input, which I would appreciate.

I made a tab-like display of a <ul>. It's easier shown than explained,
so here is the link: http://lingo.uib.no:9002/MOO_info/main.html

Your URL is broken:

An internal server error was encountered. If this problem persists please
notify a MOO administrator.

Failed request was: GET /MOO_info/main.html HTTP/1.0
Details:
Traceback 3116:
$MOO_info:main_html, line 52 (Type mismatch)
.... called from $httpd:get, line 70

(End of traceback)
--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Daniel Jung]

Jim Moe wrote:

so here is the link: http://lingo.uib.no:9002/MOO_info/main.html

Your URL is broken:

Wooops - some changes I made and didn't check... Thanks for looking, and
thanks for reporting! Very sorry. I fixed that now. You may have a look
again.

- Daniel

[Jim Moe]

Daniel Jung wrote:

All in all, I think it works fine. But if there are too many tabs, or
the horizontal space is too small, they get broken over more than one
line. Try yourself by adjusting window width to display three and two
links in a row. I think it's kind of cool that the links now are
displayed almost 3d-ish.

Change "ul.menu" to
ul.menu { margin: 0; padding: 0; white-space: nowrap; }
The nowrap applies since the <li>'s are display:inline.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Daniel Jung]

Jim Moe wrote:

Daniel Jung wrote:

All in all, I think it works fine. But if there are too many tabs, or
the horizontal space is too small, they get broken over more than one
line. Try yourself by adjusting window width to display three and two
links in a row. I think it's kind of cool that the links now are
displayed almost 3d-ish.

Change "ul.menu" to
ul.menu { margin: 0; padding: 0; white-space: nowrap; }
The nowrap applies since the <li>'s are display:inline.

Thanks for replying!

But I don't really see why I should do that (white-space: nowrap in ul).
That would mean forcing them on one row, and that would mean horizontal
scrolling when there are too many links or horizontal space is too
small. I DO want them to appear on the page, and I want to get them nice
when they DO wrap; hence the rest of my OP.

- Daniel

[Chris Sharman]

Daniel Jung wrote:

Hi

This is not a "CSS I want you to do for me since my boss needs it
yesterday"... I am wondering about a few things, and I am still working
on this, but wanted to share it with you at this stage. Maybe you have
some input, which I would appreciate.

I made a tab-like display of a <ul>. It's easier shown than explained,
so here is the link: http://lingo.uib.no:9002/MOO_info/main.html

The part in question is the "div.menutablist" (at the bottom of the CSS
section). I want to discuss the list layout only.

All in all, I think it works fine. But if there are too many tabs, or
the horizontal space is too small, they get broken over more than one
line. Try yourself by adjusting window width to display three and two
links in a row. I think it's kind of cool that the links now are
displayed almost 3d-ish.

The 3d-ish effect seems to break down for extremely large or small text
- for very large there's no overlap, for very small the text starts to
be occluded. I suspect it's padding in ems & border in px. Perhaps a
little margin to get rid of the "3d-ish" effect would be the best solution.

Otherwise, as you say, fine.

Chris

[Spartanicus]

Daniel Jung <ju**@uib.no> wrote:

That, and then that the display (when broken over lines) is misguiding:
The first list element would appear in the back row, which gives the
impression that is is not amoungst the first ones the user should read.

http://www.w3.org/TR/CSS21/visudet.h...ef-line-height

Btw, don't size fonts with the px unit, IE users will have difficulties
scaling them.

--
Spartanicus