PDA

View Full Version : Getting global menu items to slide sideways



nxgn
Jun 20th, 2009, 11:11 AM
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.]

nxgn
Jun 20th, 2009, 04:10 PM
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.

abduraooft
Jun 20th, 2009, 05:26 PM
Setting a suitable width to the container element of your links would do the trick.

nxgn
Jun 20th, 2009, 06:18 PM
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:

<td><a href="#">sign</a><a href="#">in</a></td>

It Works!!! and it only took me I-don't-know-how-many-hours! :rolleyes:

abduraooft
Jun 20th, 2009, 06:21 PM
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?

nxgn
Jun 20th, 2009, 06:50 PM
I've tried it so many different ways, but at the beginning the code was basically something like this...

HTML:



<div id="globalheader">

<ul id="globalnav">
<li><a href="#">sign in</a></li>
<li><a href="#">help</a></li>
</ul>

</div>


CSS:



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).

nxgn
Jun 20th, 2009, 07:28 PM
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. :thumbsup: