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
Related
I want to ask about CSS that cause my image stacking each other.
I can't give the fiddle because too many code and css, but I give my web page in here
As You can see there are thumb image for the slideshow, but they stacking each other. I have try to use margin or padding for the img, but nothing happened, except if I change the size of image to 100, it will run nomrally. I've try to change position to absolute, relative, etc, but the image being worst, full stacking.
So what must I do to create this image not stacking each other?
Sorry for my bad English.
From what I can see, you are setting each parent element to have a width of 69px, whilst each child image is 180px wide. This will cause overlapping, as the size of the image does not affect it's parent size.
applying these rule fixed the problem for me:
.es-carousel ul{
width: auto;
}
.es-carousel ul li {
width: 180px;
}
ensure you remove the 'width:69px' from each li element, too.
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 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.
I know that setting margin: 0 auto; on an element is used to centre it (left-right). However, I know that the element and its parent must meet certain criteria for the auto margin to work, and I can never seem to get the magic right.
So my question is simple: what CSS properties have to be set on an element and its parent in order for margin: 0 auto; to left-right centre the child?
Off the top of my head:
The element must be block-level, e.g. display: block or display: table
The element must not float
The element must not have a fixed or absolute position1
Off the top of other people's heads:
The element must have a width that is not auto2
Note that all of these conditions must be true of the element being centered for it to work.
1 There is one exception to this: if your fixed or absolutely positioned element has left: 0; right: 0, it will center with auto margins.
2 Technically, margin: 0 auto does work with an auto width, but the auto width takes precedence over the auto margins, and the auto margins are zeroed out as a result, making it seem as though they "don't work".
Off the top of my head, it needs a width. You need to specify the width of the container you are centering (not the parent width).
Complete rule for CSS:
(display: block AND width not auto) OR display: table
float: none
position: relative OR position: static
OR
parent element with display: flex
Off the top of my cat's head, make sure the div you're trying to center is not set to width: 100%.
If it is, then the rules set on the child divs are what will matter.
Off the top of my head, if the element is not a block element - make it so.
and then give it a width.
It will also work with display:table - a useful display property in this case because it doesn't require a width to be set. (I know this post is 5 years old, but it's still relevant to passers-by ;)
Here is my Suggestion:
First:
1. Add display: block or table
2. Add position: relative
3. Add width:(percentage also works fine)
Second:
if above trick not works then you have to add float:none;
Please go to this quick example I've created jsFiddle. Hopefull it's easy to understand. You can use a wrapper div with the width of the site to center align. The reason you must put width is that so browser knows you are not going for a liquid layout.
It's perhaps interesting that you do not have to specify width for a <button> element to make it work - just make sure it has display:block : http://jsfiddle.net/muhuyttr/
In case you don't have a fixed width for your parent element, having your parent element with display: flex worked for me.
For anybody just now hitting this question, and not being able to fix margin: 0 auto, here's something I discovered you may find useful: a table element with no specified width must have display: table and not display: block in order for margin: auto to do work. This may be obvious to some, as the combination of display: block and the default width value will give a table which expands to fill its container, but if you want the table to take it's "natural" width and be centered, you need display: table
Here's a question that's been haunting me for a year now. The root question is how do I set the size of an element relative to its parent so that it is inset by N pixels from every edge? Setting the width would be nice, but you don't know the width of the parent, and you want the elements to resize with the window. (You don't want to use percents because you need a specific number of pixels.)
Edit
I also need to prevent the content (or lack of content) from stretching or shrinking both elements. First answer I got was to use padding on the parent, which would work great. I want the parent to be exactly 25% wide, and exactly the same height as the browser client area, without the child being able to push it and get a scroll bar.
/Edit
I tried solving this problem using {top:Npx;left:Npx;bottom:Npx;right:Npx;} but it only works in certain browsers.
I could potentially write some javascript with jquery to fix all elements with every page resize, but I'm not real happy with that solution. (What if I want the top offset by 10px but the bottom only 5px? It gets complicated.)
What I'd like to know is either how to solve this in a cross-browser way, or some list of browsers which allow the easy CSS solution. Maybe someone out there has a trick that makes this easy.
The The CSS Box model might provide insight for you, but my guess is that you're not going to achieve pixel-perfect layout with CSS alone.
If I understand correctly, you want the parent to be 25% wide and exactly the height of the browser display area. Then you want the child to be 25% - 2n pixels wide and 100%-2n pixels in height with n pixels surrounding the child. No current CSS specification includes support these types of calculations (although IE5, IE6, and IE7 have non-standard support for CSS expressions and IE8 is dropping support for CSS expressions in IE8-standards mode).
You can force the parent to 100% of the browser area and 25% wide, but you cannot stretch the child's height to pixel perfection with this...
<style type="text/css">
html { height: 100%; }
body { font: normal 11px verdana; height: 100%; }
#one { background-color:gray; float:left; height:100%; padding:5px; width:25%; }
#two { height: 100%; background-color:pink;}
</style>
</head>
<body>
<div id="one">
<div id="two">
<p>content ... content ... content</p>
</div>
</div>
...but a horizontal scrollbar will appear. Also, if the content is squeezed, the parent background will not extend past 100%. This is perhaps the padding example you presented in the question itself.
You can achieve the illusion that you're seeking through images and additional divs, but CSS alone, I don't believe, can achieve pixel perfection with that height requirement in place.
If you are only concerned with horizontal spacing, then you can make all child block elements within a parent block element "inset" by a certain amount by giving the parent element padding. You can make a single child block element within a parent block element "inset" by giving the element margins. If you use the latter approach, you may need to set a border or slight padding on the parent element to prevent margin collapsing.
If you are concerned with vertical spacing as well, then you need to use positioning. The parent element needs to be positioned; if you don't want to move it anywhere, then use position: relative and don't bother setting top or left; it will remain where it is. Then you use absolute positioning on the child element, and set top, right, bottom and left relative to the edges of the parent element.
For example:
#outer {
width: 10em;
height: 10em;
background: red;
position: relative;
}
#inner {
background: white;
position: absolute;
top: 1em;
left: 1em;
right: 1em;
bottom: 1em;
}
If you want to avoid content from expanding the width of an element, then you should use the overflow property, for example, overflow: auto.
Simply apply some padding to the parent element, and no width on the child element. Assuming they're both display:block, that should work fine.
Or go the other way around: set the margin of the child-element.
Floatutorial is a great resource for stuff like this.
Try this:
.parent {padding:Npx; display:block;}
.child {width:100%; display:block;}
It should have an Npx space on all sides, stretching to fill the parent element.
EDIT:
Of course, on the parent, you could also use
{padding-top:Mpx; padding-bottom:Npx; padding-right:Xpx; padding-left:Ypx;}