Question
Example here: http://rakavus.net/pvpguides/navbar.html
When resizing the web browser to something smaller than the length of the li, it should not overflow onto the next line and it should not provide any overflow scroll bars (the only way to scroll to see the entire thing should be the web pages scroll bar at the bottom.)
Using overflow:hidden doesn't give the desired effect since it gets rid of the li the second the browser can't fit the entire thing. (to see this add overflow:hidden to the li and then resize the window to slightly bigger than needed and then slowly make it smaller.)
It should be able to be done with inline-block, but none of the ways I have been trying seem to get the desired result.
Solution
You need add a width to your ul container. Remove floats and left rules from your containers and do instead:
https://stackoverflow.com/questions/21585517
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian#centeredmenu ul {
position : relative;
width : 840px;
margin : 0 auto;
overflow: hidden;
}
#centeredmenu ul li {
position : relative;
float: left;
}
Here is an edit based on your example http://jsfiddle.net/ETsR8/
OTHER TIPS
Try this:
#centeredmenu > ul
{
float:none;
text-align: center;
white-space:nowrap;
}
#centeredmenu > ul > li
{
float: none;
display: inline-block;
}
a lot of css. I Copied it for a fiddle and appended some new definitions. You can see the result here: http://jsfiddle.net/NicoO/SpVWV/
Encapsulate the whole thing with <table width='900'><tr><td> ... </td></tr></table> which will give it a fixed width to work from. I tried it and it works here.
e.g.
<body>
<table width='900'><tr><td>
<div id="centeredmenu">
<ul>
...
...
<li><a href="arms_warrior_intro.html">Arms</a></li>
</ul>
</li>
</ul>
</div>
</td></tr></table>
</body>
(I think it would be nice to update the css for the fluid design to work properly, .. rather than to try and force this to a fixed width but that is another issue outside the scope of your question.)
