Sent by Bob Easton on 5 September 2005 11:11
Kristina Floyd wrote:
> (please accept my apologies for the re-post but I haven't seen my email
> come through and I sent it 5 days ago)
>
> Hello List
>
> I'm trying to find an example of a horizontal nav bar that expands and
> detracts according to its width (there is no start width set). And is
> always 100% of the width, with the buttons filling up what ever space is
> available.
>
> Currently there are 7 buttons, written in the HTML as a list and then
> displayed with graphics and inline via the CSS.
>
> To see an example that my colleague is working on please go to
> <http://25.m-corp.com/>
>
> If you know of any examples of this, I have searched the net but can
> only really come up with horizontal nav bars that have a set start
> width, or only take up part of the horizontal bar.
>
Your first posting made it to the list OK. It wasn't answered. Having
watched this list for several years, I see the unanswered questions
usually falling into one of two categories:
- The question was not understood, obscure in some way, and no one
bothered to ask for clarification.
- The question was clear enough, but there's no good answer.
Yours falls into the second category. There's no reliable way to meet
all of the requirements with CSS. The usual way to style horizontal
lists is either use display:inline or to float each list item to the
left, letting them stack up along the line. That's OK until you say you
want expanding and contracting widths. Floats should have widths set
explicitly. Some browsers let us get away with not setting float
widths, but when we do this the results are not consistent across
browsers. Throw in that last requirement of using 100% of window width,
no matter what width that is, and all bets are off.
Something that can come close is this:
- style each link (list item) as display:inline
- use a pleasing amount of padding to left and right of each link text
- center the entire list
- use a repeating background image to give the button appearance
- use a simple border-right as the tab separator
I did this a while back at http://evaeaston.com/pr/
Pay attention to the HTML for <div id="tabs"> and to all the CSS for
#tabs in the screen.css file. (not the v4.css file; that's for older
broswers.)
The design does not spread out to 100% width, and in extremely narrow
windows the navigation bar will wrap, but that is not likely with only a
few navigation elements. To prevent wrapping, prop the window open with
min-width, which of course doesn't work in IE and will need a script.
--
Bob Easton
Accessibility Matters: http://access-matters.com
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
