Single row navigation menu

Discussion in 'HTML' started by Paolo, Jul 15, 2007.

  1. Paolo

    Paolo Guest

    Hello,
    on the top right side of my page, I've a 4 elements navigation menu
    that is css formatted
    <ul>
    <li>...</li>
    .
    .
    <li>...</li>

    </ul>

    When I resize the window in *width* (x axis) the last element is moved
    to a second row below the initial one, creating problem to the rest of
    the fluid layout. How can I fix that, making sure that after a certain
    point the scrollbar for the width appears allowing to scroll rather
    than sending the last element to the next row? In other words, how can
    I make sure the navigation menu is not broken into multiple lines when
    I resize the window?

    thanks,
    Paolo
    Paolo, Jul 15, 2007
    #1
    1. Advertising

  2. Paolo

    wayne Guest

    Paolo wrote:
    > Hello,
    > on the top right side of my page, I've a 4 elements navigation menu
    > that is css formatted
    > <ul>
    > <li>...</li>
    > .
    > .
    > <li>...</li>
    >
    > </ul>
    >
    > When I resize the window in *width* (x axis) the last element is moved
    > to a second row below the initial one, creating problem to the rest of
    > the fluid layout. How can I fix that, making sure that after a certain
    > point the scrollbar for the width appears allowing to scroll rather
    > than sending the last element to the next row? In other words, how can
    > I make sure the navigation menu is not broken into multiple lines when
    > I resize the window?
    >
    > thanks,
    > Paolo
    >

    Are you saying the menu is on one line from left to right and when you
    make the width smaller, the item that exceeds the window width moves
    down to a new line?

    If so, you must format your elements so they do not exceed the allocated
    minimum width. Perhaps your menu items text could be made shorter or
    the menu "blocks" (padding?) may be too large.

    --
    Wayne
    www.glenmeadows.us
    "Faith means not wanting to know what is true." [Nietzsche]
    wayne, Jul 15, 2007
    #2
    1. Advertising

  3. Scripsit Paolo:

    > on the top right side of my page, I've a 4 elements navigation menu
    > that is css formatted [and marked up as a <ul> element ]


    Well, fine, but where's the URL so that we can see the CSS code (as well as
    the problem in action).

    > When I resize the window in *width* (x axis) the last element is moved
    > to a second row below the initial one, creating problem to the rest of
    > the fluid layout.


    Why would it create a problem to the rest of the fluid layout? What do _you_
    mean by "fluid layout"? The way I see it, it includes the idea that the
    content wraps to next line if it does not fit to the available horizontal
    space.

    > How can I fix that, making sure that after a certain
    > point the scrollbar for the width appears allowing to scroll rather
    > than sending the last element to the next row?


    So you want non-fluid layout? At least in this respect. Think again. Now,
    think _again_. Then reject the idea, and consider reducing the navigation
    menu (it has too many items anyway), and also take the possibility of line
    wrap inside it as a real possibility that _will_ materialize at times
    (though not often if you make the menu reasonably small).

    > In other words, how can
    > I make sure the navigation menu is not broken into multiple lines when
    > I resize the window?


    It depends on how you have written your CSS code for formatting the menu.
    However, my crystal ball says that you would need to add

    ul#navmenu { white-space: nowrap; }

    You might have some other id="..." value instead of "navmenu". And my
    crystal ball _has_ been wrong. (I think it was in 1998.) Besides, this was a
    wrong thing to want.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Jul 15, 2007
    #3
  4. Paolo

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Sun, 15 Jul 2007 04:42:29 GMT
    Paolo scribed:

    > Hello,
    > on the top right side of my page, I've a 4 elements navigation menu
    > that is css formatted
    > <ul>
    > <li>...</li>
    > .
    > .
    > <li>...</li>
    >
    > </ul>
    >
    > When I resize the window in *width* (x axis) the last element is moved
    > to a second row below the initial one, creating problem to the rest of
    > the fluid layout. How can I fix that, making sure that after a certain
    > point the scrollbar for the width appears allowing to scroll rather
    > than sending the last element to the next row? In other words, how can
    > I make sure the navigation menu is not broken into multiple lines when
    > I resize the window?


    Lots of ways to do that, but then it wouldn't be fluid.

    If you still insist, explore the css quality of "white-space:nowrap;"

    --
    Neredbojias
    A self-made man who worships his creator
    Neredbojias, Jul 15, 2007
    #4
  5. Paolo

    Paolo Guest

    Hello,
    the page is not online yet, I'm still working on it.

    This is the css code

    ..nav-top-menu
    {
    font-family: Arial, sans-serif, 10%;
    margin-top: 1%;
    margin-left:12%;
    }

    ..nav-top-menu ul
    {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align:center;
    }

    ..nav-top-menu li
    {
    float: left;
    margin: 0 0.15em;
    }

    ..nav-top-menu li a
    {
    height: 3em;
    line-height: 2em;
    float: left;
    width: 7em;
    display: block;
    color: #0d2474;
    text-decoration: none;
    text-align: center;
    }

    ..nav-top-menu li a span
    {
    color: white;
    text-decoration: underline;
    font-style: italic;
    font-weight: bold;
    font-size: 1em;
    }

    and here the html code

    <div class="nav-top-menu" width=100% >
    <ul>
    <li><span>Item1</span></li>
    <li><span>Item2</span></li>
    <li><span>Item3</span></li>
    <li><span>Item4</span></li>
    </ul>
    </div>

    Thanks!
    Paolo
    Paolo, Jul 15, 2007
    #5
  6. Paolo

    Paolo Guest

    On Jul 15, 12:44 am, "Jukka K. Korpela" <> wrote:
    > Scripsit Paolo:
    >


    >
    > > How can I fix that, making sure that after a certain
    > > point the scrollbar for the width appears allowing to scroll rather
    > > than sending the last element to the next row?

    >
    > So you want non-fluid layout? At least in this respect. Think again. Now,
    > think _again_. Then reject the idea, and consider reducing the navigation
    > menu (it has too many items anyway), and also take the possibility of line
    > wrap inside it as a real possibility that _will_ materialize at times
    > (though not often if you make the menu reasonably small).
    >


    it materializes only when the window is becoming too small, in most of
    the cases it works just fine. In those situations (and only in those),
    I'd like to enable the width scrollbar at the bottom of the window.

    thanks,
    Paolo
    Paolo, Jul 15, 2007
    #6
  7. Paolo

    Paolo Guest

    On Jul 15, 12:44 am, "Jukka K. Korpela" <> wrote:
    > Scripsit Paolo:
    >


    >
    > > How can I fix that, making sure that after a certain
    > > point the scrollbar for the width appears allowing to scroll rather
    > > than sending the last element to the next row?

    >
    > So you want non-fluid layout? At least in this respect. Think again. Now,
    > think _again_. Then reject the idea, and consider reducing the navigation
    > menu (it has too many items anyway), and also take the possibility of line
    > wrap inside it as a real possibility that _will_ materialize at times
    > (though not often if you make the menu reasonably small).
    >


    it materializes only when the window is becoming too small, in most of
    the cases it works just fine. In those situations (and only in those),
    I'd like to enable the width scrollbar at the bottom of the window.

    thanks,
    Paolo
    Paolo, Jul 15, 2007
    #7
  8. Paolo

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Sun, 15 Jul 2007 18:10:56 GMT
    Paolo scribed:

    > Hello,
    > the page is not online yet, I'm still working on it.
    >
    > This is the css code


    Try adding width:28em; to .nav-top-menu ul.*

    * Opera bug.

    --
    Neredbojias
    A self-made man who worships his creator
    Neredbojias, Jul 15, 2007
    #8
  9. Scripsit Paolo:

    > Hello,
    > the page is not online yet, I'm still working on it.


    If you can't be troubled to upload your best effort so far, don't expect
    people to spend their time to help you. Bye.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Jul 15, 2007
    #9
  10. Paolo

    Jim Moe Guest

    Neredbojias wrote:
    >
    > If you still insist, explore the css quality of "white-space:nowrap;"
    >

    Have you actually tried that? It does not work.

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
    Jim Moe, Jul 16, 2007
    #10
  11. Paolo

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Mon, 16 Jul 2007 06:45:20 GMT
    Jim Moe scribed:

    > Neredbojias wrote:
    >>
    >> If you still insist, explore the css quality of "white-space:nowrap;"
    >>

    > Have you actually tried that? It does not work.


    No, not with floats. I followed-up with another solution.

    --
    Neredbojias
    A self-made man who worships his creator
    Neredbojias, Jul 16, 2007
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Randall Parker
    Replies:
    1
    Views:
    602
    S. Justin Gengo
    Dec 12, 2005
  2. Laurahn
    Replies:
    3
    Views:
    902
    Steven Cheng[MSFT]
    Feb 6, 2007
  3. D
    Replies:
    0
    Views:
    204
  4. Philip
    Replies:
    1
    Views:
    314
  5. swetha

    Single page navigation

    swetha, Jun 29, 2010, in forum: Javascript
    Replies:
    13
    Views:
    221
    Thomas 'PointedEars' Lahn
    Jun 29, 2010
Loading...

Share This Page