However I search, I cannot find a valid example....
I have a typical horizontal menu build with a :
div ul li a li a ... /ul / div
(li elements has align left)
Overflow hidden applied on div or ul does nothing. I have always a vertical adjust of li elements when I resize the browser to test the overflow behavior
I have played with position, etcs....
Can any "charitable" soul write an example or give a link?
Thanks....
If your div or ul don't have a specified height, they will grow to adjust to their content, and the content will not be treated as overflow.
Unless you properly clear: both; after floating your li elements, the div and the ul will have no height at all.
If you have done that, then it is not very clear what you are trying to hide, with overflow: hidden;
One thing is sure: You should figure out if the div and ul have heights and widths, and what those values are, and if they don't, you can manually assign them, to fit your toolbar (for example).
Related
I have a menu which is made as a list with inline items. While rendering correctly on large screens, elements move underneath the menu when the browser window gets smaller, instead of putting them to the right of the rest of the content.
With min-width:100%; for .drop_menu I was expecting that the menu would be 100% of the screen width at minimum, but stretch to fit more menu items in the x direction if necessary.
With width:500px; for .drop_menu it works, but I didn't want to give the menu a fixed width.
The reason that I want the items to overflow in the x direction is because I was going to implement a javascript scroller so the menu would scroll when the mouse cursor gets close to the edge. I can't scroll in the x-direction if there's no x-overflow.
I've created a jsfiddle of my failing menu here: http://jsfiddle.net/j41jfjqL/3/
Since they are inline, use white-space:nowrap to prevent the list items from appearing on a new line.
Updated Example
.drop_menu {
white-space:nowrap;
}
.drop_menu > li {
white-space:normal;
}
Since you don't want this to occur on the children li elements, set the white-space property value to normal.
In the code presented on the gist : https://gist.github.com/1341600
I am trying to use ul/li elements for grouping together some search form elements (instead of table).
When inspecting the output in the browser (Chrome 15/FF 7 with firebug) the ul element seems to have height 0 and the li elements are displayed outside of it. When I am commenting out the
float: left; statement from ul.search-inputs li CSS declaration then the height of the ul element is displayed correctly.
Could anybody point me to a solution in order to see correctly the height of the ul element?
That's not a bug, it's a feature!
The container of a floated element is shrunken so that other inline elements will flow around it (as per specs).
The 3 options in this case are to:
Use a known height value and apply it to the ul element.
ul { height: 150px; }
Use the overflow property on the ul element to force the browser to recalculate its height along with all the elements inside of it.
ul { overflow: hidden; } /* hidden is preferred as it never adds scrollbars */
Float the container itself. As there is no need to shrink it if it floats by itself.
ul { float: left; }
Add following css:
ul.search-inputs {
overflow: hidden;
}
Also see this jsfiddle.
This behavior complies to W3C spec. It's deliberately, but can be a bit confusing first time. Container of the floated content must be shrunken to allow another inline content to flow around it's own one.
E.g. if you have a
<p>
<img class="float" height="1000">
sometext
</p>
<p>
sometext
</p>
you probably would expect that some text from the second p flow image.
If you need a container with width and height you can either specify them manually, or apply css overflow:auto or float:left to container;
Basically, I want to be able to specify the height of my "li" element for a horizontal list I'm making. "line-height" and "height" have no impact on the visible height of the "li". The only thing that changes the height of the "li" is changing the size of the font used within the "li". This even happens when the "list-style" is set to "none".
What gives?
Set the li to display: inline-block or float: left.
list-style basically just determines the bullets to be used for the list, and doesn't really affect the inner elements otherwise.
Do this:
ul {
overflow: hidden;
}
li {
float: left;
height: 200px; /* as required */
}
The above is another method for getting list items to display inline, without using display: inline; which is a very restrictive property and should be applied sparingly.
Try setting
display:block on the li
font-size could affect the computed height of an li element (depending on what's inside) IF line-height is proportional or relative AND no height is set on li (or li is display:inline).
line-height could affect the computed height of an li element (depending on what's inside) IF no height is set on li (or li is display:inline).
height will affect the computed height of an li element if it's display:inline-block or display:block only (height has no effect at all on display:inline).
See http://moorer.me/mmKVHM for examples of how font-size and line-height can affect the height of li in different ways depending on the technique used. The differences are somewhat obviated if a is set to display:block, so for example purposes I did not do so.
Others have already shared the two most common solutions to horizontal menus -- inline-block or floated blocks. Inline can be used, but likely won't give you the control you need.
I am having difficulty aligning SNS buttons using CSS on this page giantmango.com/news. I am using the exact css and html, but I cannot align giantmango.com/news SNS buttons like the giantmango.com ones.
If you talk about social netoworks buttons, then you can make the first to be upper adding margin-top: -8px; for #content .mixi in style.css
Try this:
Set the width of the UL element to something that would fit all LI elements (e.g. if each of the LI element is 20px wide and there are 5 elements, the UL element should be at least 100px.) You should also consider the padding and margin of each of the UL element and add that to the total width of the UL element.
Set the style of the LI element to: li { float: right; }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css" media="screen">
div.menu {position: relative; width: 600px; overflow: hidden;}
ul.menu {display: block; padding: 0px; width: 1500px; margin: 0; list-style: none;}
.menu li {display: block; float: left; padding: 0 2px; }
</style>
</head>
<body>
<div style="width: 500px;" class="menu">
<ul class="menu">
<li>
<div id='outer'>
<div id='inner' style="margin:0 auto;width:100px;">
I want this text to show up
</div>
</div>
</li>
</ul>
</div>
</body>
This is stripped down version of a full page. I can see the text 'I want this text to show up' in FF. But this is invisible in IE7 and IE6. The moment I remove 'auto' word from margin in inner DIV, it shows up on both explorers. How can I fix this? I can't remove 'auto' as I want inner div to be centrally aligned inside outer div.
NOTE: It's a part of DIV slider.
Regarding your problem itself, IE developer tools suggests that the following is happening (with the IE exception in boldface):
div.menu is styled as width 500px with overflow hidden
The enclosed ul.menu is styled with width 1500px, and an li floats therein. In IE, the li incorrectly takes the width of its parent ul (1500px) rather than the width of its child block elements, namely, div#outer, which derives its width from its child div#inner, which is 100px.
The div#inner is centred in div#outer (in some versions of IE, you might need to add text-align: center in the style for div#outer). In IE, this is too far to the right due to the oversizing of div#outer caused by the oversizing of li. Even if you don't use developer tools, turning div.menu to overflow:visible quickly makes the location of the text to show up clear.
Recommended solutions:
Make the width of li no more than 500px.
There's no need to add a useless outer div within li. Unless you have a compelling reason, just plop div#inner right in li.
Download IE Developer tools
There are a few parts of the CSS that don't seem to make sense to me, that perhaps once you cleared up, might make the problem easier to isolate.
div#outer may potentially be spanning the full width of your LI, which is 1500px wide (inheriting from your UL CSS declaration). If div#inner is centered and 100px wide, it would display outside the scope of your overflow:hidden on div#menu.
I believe I can see where you are trying to go with this, perhaps trying to have a gallery slider. You may need to explicitely set the width of your LI to 500px. You can then have three LI's floated next to each other.
As noted above your div#outer is spanning the full width of the LI(1500px). Divs are block level elements which means that by default they will span the entire width of their containing element unless told otherwise.
Also, the statement made about the LI incorrectly taking it's width from it's containing element rather than it's child elements is not totally right. By default that is true, but the CSS rule declared to make the LI (display:block;) changes the LI from an inline element to a block level element which like the DIV will take it's width from it's containing element.
In summary: block elements span the entire width of their containing element by default, inline elements span the width of their widest child by default.