Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Getting global menu items to slide sideways

    They keep popping down on me when I resize the window width-wise.

    I want the link menu items to stay side-by-side as the window is narrowed.

    Google.com is a good example.

    The menu links that they have running across the top... they have a set on the left and a set on the right.

    The ones all the way to the right, just slide over to the left as the window gets smaller, without popping down like mine do.

    How'd they do that?

    [My left menu is floated left, and the right menu is floated right...they both stay together, except when the window is very,very narrow - then each list item pops down individually... google's never pop down... the right OR the left... while both of mine do.]
    Last edited by nxgn; 06-20-2009 at 11:23 AM. Reason: more info

  • #2
    New Coder
    Join Date
    May 2009
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Lightbulb Google does it different

    After going through the page source for a while (a google groups page), it looks like they use tables w/ position:relative and absolute for their menus, instead of floating a list of links, like mine. They also use the <nobr> tag throughout.

    Haven't gone through the trouble of testing this out yet, but that's my guess from reading their code.

    Hope this helps someone.


    Edit:

    position:relative top:whatever doesn't change anything
    <nobr> tag is deprecated
    CSS white-space: nowrap doesn't work

    So it's probably the fact that they use tables to create their link menu lists.
    Which makes sense I guess... the table probably keeps the content from sliding down individually.
    Last edited by nxgn; 06-20-2009 at 04:57 PM. Reason: more info

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Setting a suitable width to the container element of your links would do the trick.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    May 2009
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Cool The mini-table works

    I'm probably missing something, but I've tried width, height, max-height, etc... and the browser window just warps (squishes) the container and lets each link pop down individually to the next line as the browser window gets narrower.

    Putting the links in a table works, but the only thing is the links can't have any spaces in them, like "sign in", or the the words bulge out of line - "sign" slightly above the line and "in" right underneath it, slightly below the line. valign="top" doesn't fix it.

    What I did was just make "sign" its own link and "in" also, both in the same <td> tag, and that kept it from bulging:
    Code:
    <td><a href="#">sign</a><a href="#">in</a></td>
    It Works!!! and it only took me I-don't-know-how-many-hours!

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I'm probably missing something, but I've tried width, height, max-height, etc... and the browser window just warps (squishes) the container and lets each link pop down individually to the next line as the browser window gets narrower.
    How about posting a link to your page or showing your code?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    May 2009
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Thumbs up code

    I've tried it so many different ways, but at the beginning the code was basically something like this...

    HTML:

    Code:
    <div id="globalheader">
    
    <ul id="globalnav">
    <li><a href="#">sign in</a></li>
    <li><a href="#">help</a></li>
    </ul>
    
    </div>
    CSS:

    Code:
    li{
    display:inline;
    }
    
    #globalheader{
    width:100%;
    }
    
    #globalnav{
    float:right;
    width:20em;
    }
    
    #globalnav a{
    float:right;
    width:5em;
    text-align:center;
    }
    It works ok until the browser window is almost to it's most narrow and then the links start popping down to the next line one-by-one.

    Any suggestions to make it work w/ the list method would be appreciated, since I know that using tables isn't the best way (w/ all due respect to google).

  • #7
    New Coder
    Join Date
    May 2009
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    #%@!#$%^&

    In posting my previous reply w/ the code, I realized what I was doing wrong (noob mistake).

    You're absolutely right... making the list container a fixed width keeps it from letting the list items pop down to the next line.

    Thanks for your help! Now I don't have to use tables and can stick to my lists.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •