[thelist] preventing navbar element wrapping

John DeStefano john.destefano at gmail.com
Tue Nov 14 08:33:33 CST 2006


"Julian Rickards" <julian.rickards at gmail.com> wrote:
> Not exactly the answer you are probably looking for but here goes.

Not at all, Jules; I appreciate any feedback you have to give.

> You have tried the two properties I would have recommended, however, I am
> not convinced that your approach is correct.
>
> If the browser window is too small (or made smaller) and if either CSS
> properties worked, then one or more of the buttons would be inaccessible.
> Consider a cell phone or PDA screen: you wouldn't want many (most?) of your
> buttons to be out of reach of the user.

True.  This interface is designed for a select group, of which I am
not aware of any accessibility issues, and it will be accessed only
from PCs.  However, that's no excuse for not considering accessibility
in design.

> Design for a reasonable screen width (800 or 1024) and don't worry about
> what happens if someone with a smaller screen views the page: it may result
> in an appearance that you really didn't want but at least the page is still
> usable.

Fair enough.  I can do that.  However, being stubborn, I'd still like
to know what I'm doing wrong to keep my original idea from working. ;)


> HTH,
>
> Jules
>
> On 13/11/06, John DeStefano <john.destefano at gmail.com> wrote:
> >
> > What CSS style property would one apply to a horizontal
> > list/navigation bar to prevent its elements (i.e., "buttons") from
> > collapsing below each other as a browser window decreases in size?
> >
> > The width is currently set at 100% to apply a horizontal stripe across
> > the page to the right of the last button element.  The display is fine
> > at any width around 800px or above; as the browser narrows from there,
> > the navigation bar begins to degrade and the "buttons" begin to drop
> > beneath each other, starting to the one at the farthest right.  I'd
> > like the bar to remain intact, and for the page to scroll if necessary
> > instead of degrading the bar.
> >
> > I've tried applying "white-space: nowrap;" and "overflow: scroll;" to
> > the navigation bar container with no effect; adding "scroll" to a
> > top-level container just made unnecessary scroll bars appear.
> >



More information about the thelist mailing list