469,286 Members | 2,522 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,286 developers. It's quick & easy.

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

Jan 19 '06 #1
5 4253
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)
Jan 19 '06 #2
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
Jan 19 '06 #3
Chris Beall <Ch*********@prodigy.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
Jan 19 '06 #4
Spartanicus wrote:
Chris Beall <Ch*********@prodigy.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

Jan 19 '06 #5
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
Jan 20 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by yawnmoth | last post: by
17 posts views Thread by No One | last post: by
3 posts views Thread by Ryan Wade | last post: by
3 posts views Thread by gentsquash | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.