473,387 Members | 1,757 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

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 4533
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
by: Freek te Water | last post by:
Hi, Hope no-one is offended by my probably noob question... Context: I have a web page design, which always centres in the middle of the screen (using a 100%*100% HTML-table). Now I also use...
4
by: Mimo Zus | last post by:
I'm hoping that someone can explain what's going on; better yet provide a workaround. I'm designing a centered CSS site based on a 550 pixel wide vertical background image. Onto this background...
4
by: yawnmoth | last post by:
The buy behind the csszengarden has a tutorial on how to center absolutely positioned elements. Here's the last example: http://www.mezzoblue.com/tests/centered-css/ex5.html I've tried...
17
by: No One | last post by:
Is there a way to keep a control centered inside a form without having to recalculate everytime the form is resized?
3
by: Ryan Wade | last post by:
If the user resizes IE I want the webform controls to be automatically repositioned in the center of the form. How can I accomplish this? Ryan
4
by: Austin Powers | last post by:
I want to (on one line) show something like the following ------------------------------------------------------- left centered right...
6
by: hiervision | last post by:
Hi I have a question about a CSS menu. I've got a 700 pixel table centered in the body of my page. The table scrolls quite a ways down. I would like to place a menu flush against the right...
9
by: Troy Piggins | last post by:
If I use the code: ----- <div style="text-align: center;"> <a href="photos.php?img=xx1.jpg"> <img src="xx1.jpg" style="padding: 10px;" /> </a> <a href="photos.php?img=xx2.jpg">
3
by: Tobi Hammert | last post by:
i have a page that shows a random picture, centered. how do i create a layer that stays centered, but always 300 px down from the top? to make it clear again: i want to place a text layer,...
3
by: gentsquash | last post by:
I'm trying to display a paragraph that has a centered phrase, such as this one, in the middle of the paragraph. An example is the section "End of semester project" on my course-page ...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.