I'm wondering why the height: 100% on the li's in this does not set the height to the ul they're a child of.
http://homecoming.umd.edu/index2.html
?_?
You need to set an explicit non-percentage height on a parent element. You currently have height:100% on your <ul>, too, which you'll notice isn't doing anything. If it were working, your navigation would expand your whole page, because its parent is your wrapper div that contains a bunch of other stuff. However, if you set your <ul> to something like height:40px, the <li> will follow suit.
height:100% depends on an explicit height set somewhere in a parent element. If no height is ever set with anything other than percentages (or if every parent element all the way up to <body> and <html> doesn't have height:100% set), then it will never actually do anything, because it has no reference height to start from.
I'm not sure what other people are getting, but using FF4 with Firebug I can see that there is no height: 100%; for the li's. There is for the ul however and that seems to be working fine.
Maybe trying putting height: 100%; in your css file for #nav li. Also, there's a padding in there that may throw you off in the future. Be sure to look into that if it's giving you problems.
EDIT: This is what I'm seeing in Firebug for the #nav li:
#nav li {
float: left;
position: relative;
width: 9.09%;
}
No mention of the height attribute.
This would fix it (it won't fix the overlap in 'Greek organizations' though)
#nav { height: 44px; }
#nav a { height: 30px; }
I was kinda hoping the height would
be explicitly set by the height of the
container. Like, in the event we ever
needed a 100 word title for some
godforsaken reason, it'd automatically
do it.
If I'm understanding this correctly and this is the real reason you are asking this question, just set #nav to "height:auto;" and, if you want it to be at least a certain height use something like "min-height:44px;"
Height of 100% in CSS can be tricky sometimes, as it depends on the size of the parent containers. Here are some similar questions/answers that might help.
Related
I have a Bootstrap dropdown menu. The menu items can be quite large in some cases. So I need to set a max-width. In addition, I don't want the menu items to be cut so I must use white-space: normal too. The problem is that my max-width is completely ignored. If I set width instead it does work. But I do not want that as I may have menus where the whole menu would fix in much less space than width. That's why I need max-width to work rather than width.
This JSFiddle illustrates the problem. As you can see, the menu items are not expanded up to 400px.
[UPDATE]
Ok, I was clearly missing the position: relative. That fixes the menu of the first case which I tried to isolate as much as possible. My code actually relies on this Bootsnipp. In that example, position: relative breaks such a cascade submenu.
Any ideas how can then make such a cascade menu with my contrains?
Thanks a lot in advance
You just need to add the following:
width: 100%
max-width: 400px;
Your element needs a certain width so that max-width works
http://jsfiddle.net/dvwz5omq/1/
You have to change the value of the min-width property because it is set to 160px;
.dropdown-menu {
max-width: 100px;
min-width: 1%;
}
Just override the position: absolute; style from .dropdown-menu with position: relative;.
By default the dropmenu has been position absolute to its parent
element. It will take the same width if given the style width: 100%.
since it has some min-width which make it to exceed its parent
width. Therefore we have to make the dropmenu independent of its
parent element width.
I hope it will helps you
I want to constrain the width of an <ul> tag in a dropdown menu in CSS to the width of the parent <li>of that <ul> in the simpliest possible form, and without setting any fixed with.
I had made a lot search and testing, without achieving it or understand it. Precisely, I want to understand how it works.
What could the property that could make it happened ?
I have settled the simpliest jsfiddle http://jsfiddle.net/zAXRK/2/ I could come up with to see if someone could explain why if it's possible, and how ?
I you try the example, when you use the cursor to over the First Item = the sub-menu appears and the <li>who contains it, is going larger, pushing other elements.
What I want to do is making the sub-menu inside the width of its parent element, whatever the width, and without fixing it. (if there is no solution, I'll do it with JS, but I would prefer have it clean in CSS and I think this a good exercice).
Thanks to anyone willing to help me understand CSS rules. If the answer is somewhere outside, either I didn't find it, or I didn't understood it, please forgive.
You need to set some position properties on the li and the .submenu so you can set a width: 100% (it's not a fixed width, I hope it's not a problem):
Here are the changes :
.menu > li {
position: relative;
}
.sub-menu {
position: absolute;
width: 100%;
}
And the working jsFiddle.
This is giving me such a headache i just have to ask. I never seem to have trouble with C# or Java or SQL or JS as I have with CSS, and i spend too much time trying to figure things out.
I have a table div and some row and cell divs inside it. And i just want to make table div to be of exact height.
My current style:
div .table
{
width: 410px;
height: 410px;
max-height: 410px;
display: table;
border-spacing: 10px;
border-style:dotted;
border-width:medium;
overflow: visible;
}
What else do I have to do to make div exactly 410 px high?
I tried wrapping it in a outer div (with blue borders in picture with specific height and display:block) but table div does not seem to notice it. I added a div with clear:both at the bottom, sometimes it helps but not today...
It appears that:
display:table;
will force the element to expand to fill the width of the content. Even if you set "overflow" to be hidden.
Here's a fiddle with some examples:
http://jsfiddle.net/dRLfv/
I think you'll need to do a regular "display:block" and then set overflow appropriately. That would probably require you to adjust some of your other styles for the table/form elements inside but that should be double and I'm sure others will be happy to help.
I hope that helps!
Cheers!
I'm trying to make a div assume 100% of it's parent div. The parent div acts as a page wrapper, so it's already assuming 100% of the page width. I've tried adding width: 100%, but this did not seem to work. I'm a little baffled, because this seems like a relatively simply thing to do.
Don't specify a width at all. For a div element (or any block level element for that matter), this will make it assume 100% width regardless what padding/margin settings it has set.
Depending on the box model, explicitly setting 100% width can actually make the element too wide because paddings are calculated into it.
If this doesn't work, there is some other CSS setting interfering and you need to show more of your layout and HTML code.
display: block;
width: auto;
Should work for you.
You need to show more of your existing css code as normally, a div takes by default the whole space available to it, provided it has some content.
Other than that, make sure you set margin and padding of the parent div to 0.
.parent{
margin:0;
padding:0;
overflow:auto;
}
.child{
margin:0;
padding:0;
}
On a customer website, I have to add a background image for only a contained region of the page (its real content part).
The problem is, if the content is short enough, then the image will be clipped. How would be possible to have the image completely visible? I have tried to add the "overflow" CSS attribute but unfortunately it did not help me.
Here is an example of the website I have to work on: http://www.sfp-pensioen.nl/werknemer/welkom The background image is on the div element with id="content".
On the specific link that I am sending it is not an issue because the content is long enough, but if you remove elements using firebug then the problem will become obvious.
ps: IE6 must be supported.
Following on from Graham's answer:
"height" in ie6 acts like "min-height" across other browsers.
min-height: 50px;
_height: 50px;
The example above will provide a cross browser minimum height of 50px. ie6 will read "_height" where other browsers will not. If you don't hacks, use a conditional statement.
Rich
you could either give a height to the id #content
or
apply the background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll left top transparent; to #mainContent instead of #content
overflow for background-images is impossible, but you could set a min-height for content (or set the image in another div with lower z-index and position it abolutely to appear at the place you want - but thats a very bad solution)
The overflow attribute controls what happens to the div when the content is too big to fit - if you have a fixed-size div with some content that might overflow, you generally want the auto option. overflow has no effect on a background image.
For your case, it sounds like you want to specify a min-height on the content div. Note that this isn't supported by older browsers like IE6, which you may or may not care about. There are plenty of ways to work around this, though.
What you want is the 100% height you can achieve this with the following.
html {
height: 100%;
}
body {
height: 100%;
}
#content {
height: 100%;
}
You need the min-height and the body needs a height so every child element of the body will follow the rule.
Also by adding min-height: 100%; to all css rules will solve all your problems for any grade A browser.
If you know the #sidebar or #main will always have a visual height the same or larger than the background image then you can simply add the background image to:
.sub #wrapper #mainContent {
background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll 0 150px transparent;
}
instead of where it is an the moment on #content