Centered equal-width horizontal nav list CHALLENGE

Objective: Using an HTML list, create a horizontal nav menu with these
characteristics:

- All menu items have the same width at all times.
- When the window width is reduced, the menu items stack, rather than
creating a horizontal scroll bar.
- The menu cluster is always centered on the window.

See
http://pages.prodigy.net/chris_beall...al%20list.html

I've tried 4,238 permutations, without success. I'm beginning to
suspect it's impossible.

Oh, no JavaScript allowed, and HTML and CSS must validate...

Chris Beall

Chris Beall wrote:

Objective: Using an HTML list, create a horizontal nav menu with these
characteristics:

- All menu items have the same width at all times.
- When the window width is reduced, the menu items stack, rather than
creating a horizontal scroll bar.
- The menu cluster is always centered on the window.

ul.menulist li p {

display: table-cell;
width: 10em;
margin: 0;
padding: 0;
}
and wrap the links in the <p> element:
<li><p><a href="#">Dummy1</a></p></li>

This has other issues but meets the stated requirements.

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

Jim Moe wrote:

Chris Beall wrote:

Objective: Using an HTML list, create a horizontal nav menu with these
characteristics:

- All menu items have the same width at all times.
- When the window width is reduced, the menu items stack, rather than
creating a horizontal scroll bar.
- The menu cluster is always centered on the window.


ul.menulist li p {
display: table-cell;
width: 10em;
margin: 0;
padding: 0;
}
and wrap the links in the <p> element:
li><p><a href="#">Dummy1</a></p></li

This has other issues but meets the stated requirements.

Jim,

In IE 6, this results in the menu items being stacked regardless of the
window width, i.e. it does not meet the objective of creating a
HORIZONTAL menu.

The 'other issue' that I notice is that in Firefox the border of each
item is offset below the text, so the top line of the border strikes
through the text. Although not stated as a requirement, I think this
makes this approach unacceptable.

I have added your attempt to the referenced page.

Anyone else care to try?

Chris Beall

Chris Beall <Chris_Beall (AT) prodigy (DOT) net> wrote:

Anyone else care to try?

This issue has been dealt with, several of the regulars here have pages
up on this, search the archive (keywords "inline-block" and "centered").

--
Spartanicus

Spartanicus wrote:

Chris Beall <Chris_Beall (AT) prodigy (DOT) net> wrote:


Anyone else care to try?


This issue has been dealt with, several of the regulars here have pages
up on this, search the archive (keywords "inline-block" and "centered").

Spartanicus,

I got 32 hits, including two references to pages you wrote. I've tried
to interpret what I read there and have added it to the demo page at
http://pages.prodigy.net/chris_beall...al%20list.html

It now works as well as can be expected in IE 6. There's an odd
border-position issue with Firefox (and NN 7.1) and Safari which I would
have to resolve. Any suggestions on that?

Chris Beall

Chris Beall wrote:

Spartanicus wrote:
(snip)
This issue has been dealt with, several of the regulars here have pages
up on this, search the archive (keywords "inline-block" and "centered").

Spartanicus,

I got 32 hits, including two references to pages you wrote. I've tried
to interpret what I read there and have added it to the demo page at
http://pages.prodigy.net/chris_beall...al%20list.html

It now works as well as can be expected in IE 6. There's an odd
border-position issue with Firefox (and NN 7.1) and Safari which I would
have to resolve. Any suggestions on that?

Chris Beall

I've now determined that the border offset is related to line-height:

150%, which I had added to avoid vertical overlap of the menu items when
they were stacked. Removing this brings the text back inside the border
(but pressed hard against it at the top, except in IE). I've found no
twiddling of padding and margins that will center it in both Firefox and
IE, nor have I resolved the vertical overlap problem. I've added my
current attempt, with styling to match the intended final version, to
the demo page.

I am increasingly suspicious that my original objective is impossible to
meet. This is frustrating because the page is one that my daughter is
working on; it looked fine with a table layout (but menu entries would
not stack in narrow windows). I talked her into discarding tables and
using a list, but so far can't replicate the appearance of the original
table even in wide windows.

Chris Beall