My intention is to have 4 main Nav-bars at a site. If the user hovers one, it expands and should show content. But how should I do the content part?
#bottom-menu:hover #contact{
visibility: visible ;
}
If I make it visible when the box is fully expanded, it works but there is an issue: The content, while not visible, is still there and needs room which causes the layout to collapse.
I would like to do that with pure CSS, allthough i'm aware of jQuery.
http://jsfiddle.net/RbZwx/1/
visibility: hidden causes the element to continue to consume layout space.
display:none causes it to take up no layout space.
Think "spoilers" vs "hidden".
https://developer.mozilla.org/en/CSS/visibility
The visibility CSS property is used for two things:
The hidden value hides an element but leaves space where it would have been.
The collapse value hides rows or columns of a table. It also collapses XUL elements.
https://developer.mozilla.org/en/CSS/display
The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline.
In addition to the many different display box types, the value none lets you turn off the display of an element; when you use none, all child elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.
I would still encourage you to read both of these, and to learn how they affect the page more than just for this particular case.
Use display: none. See CSS 2.1: 11.2 Visibility: the 'visibility' property:
The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether). Values have the following meanings: [...]
hidden The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.
Related
I want to display a div with the following restrictions:
automatically hide under 1024px width
can be toggle by button under 1024px width, but if I click somwhere (not inside the div) the activeDiv class should be removed
I have a dummy example at codepen
So the following problems occured:
In IE10 the toggle button just not work (not hide/show the div) I check with the developer tools, but no sign of the display: initial
In Chrome 29 the div appeard next the button not under it. (Firefox is the same)
I know that the default display for div is block, but this css is not only for div tags that's why I try to use initial.
initial does not mean "the default value of a given property for a given element". It means "the default value of a given property as defined by the spec". The initial value of display is inline, not block, as stated here. This is regardless of what sort of element you apply it to. And as already mentioned, IE does not support the initial keyword.
If you want an element to be displayed as a block, use display: block. If you want it to be displayed inline, use display: inline. If you want it to use whichever is the browser default for it, do not set the display property at all.
what do you mean by this?
this css is not only for div tags
display:initial is CSS3 and not supported by IE10. If no display-rule is specified it can inherit from, it will fall back to display:inline.
display:block;
display:initial;
provides a fallback display:block.
For starters, check this fiddle -> http://jsfiddle.net/xV4s3/
As you can see, we have a wrapper with overflow: hidden and inside there is a native select with three options and an ul styled to look like a select with three items. Now, when you click on the ul, you can see its height changes (due to the script), but nothing beyond the wrapper is seen, because of the overflow: hidden. And that works as expected.
My question is about the default select's options, since I couldn't find anything in the specifications. Why are they not affected by overflow: hidden ?
This is probably nothing more than an implementation detail. The only thing CSS2.1 says about overflow control is that the overflow property controls overflowing of content according to the containing block to which the property is applied. It does not define the behavior and rendering of form elements and such with respect to this property.
As I commented, it's clear that the drop-down menu isn't being created as a descendant of the wrapper, or even the select element. In fact, it's possible that most browsers choose to render it completely independently of the canvas and as an application-level or system-level UI element in its own right (likely for usability reasons). Note that while you can apply CSS to the option elements to influence the way the drop-down menu displays, you cannot actually style the drop-down menu itself.
What is the difference between setting a control's style display: none and display: block?
The display property defines how a certain HTML element should be displayed. Display block and none are used to show or hide html elements. You can read more about display property and available options here.
none: The element will not be displayed at all.
block: The element displayed as a block-level element (like paragraphs and headers)
Display:none; - The element is in the DOM but is NOT visible and does not take up any space unlike visibility:hidden.
Display: block; - A block element takes up the full width available and does not allow other elements to be placed beside them. Example: div
These two style properties do two different things.
display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code. (The element will generate no box at all)
display: block the element will span the full width of the space available to it. (a line break before and after the element)
You are asking about a CSS property i think. This is used to show/hide DOM elements
CSS property is display and the value is 'none', 'block', etc
Referring from : CSS Display as suggested by http://w3fools.com/
block
Object is rendered as a block element.
none
Element is not rendered. The element (it has no effect on layout); all child elements also have their display turned off. The document is rendered as though the element did not exist.
inline
Default. Object is rendered as an inline element sized by the dimensions of the content.
list-item
Internet Explorer 6 and later. Object is rendered as a block element, and a list-item marker is added.
table-header-group
Object is rendered as tHead. Table header is always displayed before all other rows and row groups, and after any top captions. The header is displayed on each document spanned by a table.
table-footer-group
Object is rendered as tFoot. Table footer is always displayed after all other rows and row groups, and before any bottom captions. The footer is displayed on each document spanned by a table.
inline-block
Object is rendered inline, but the contents of the object are rendered as a block element. Adjacent inline elements are rendered on the same line, space permitting.
Display:none; means the element will not be displayed, and Display:block; means the element is displayed as a block-level element (like paragraphs and headers).
There is another nuance to display:none; if you dynamically insert a div as a child to a parent div--and you explicitly set the visibility property of the child to "visible", the visibility property of the parent will only make the parent visible/invisible; the child will remain visible, regardless of the parent's visibility setting.
In such a case (where parent/child visibility are set by different style rules), the display:none setting on the parent will hide all the children--even if parent/children are styled independently.emphasized text
display: none means that the element is not displayed at all (so you won't see it in the example either).
display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise
Display None: it hides the control. by setting the property of element style="display:none" element will not rendered in webpage and not take place
Display Block: Show the element on web page in block level
Display none will hide the contains, here if you apply it on div then width and height of div will also hide.
Display block will show the contains.
I'm want to have a div with class "a" to be invisible. I've tried already to give it the display: none; line in the CSS file but what it does is hide it, yet it doesn't catch any space and so all my other boxes don't stay in place.
Is there a way to do this using CSS?
add .a{visibility: hidden} to your CSS. More about it here:
http://reference.sitepoint.com/css/visibility
visibility:hidden should hide the element, while keeping it's space so as not to move your other elements around.
You can use visibility css property. From sitepoint reference -
This property specifies whether an
element is visible—that is, whether
the box(es) that are generated by an
element are rendered.
Note that even if a box in the normal
flow is hidden, it still affects the
layout of other elements, unlike the
behavior that occurs when we suppress
box generation altogether by setting
display to none. Descendant boxes of a
hidden box will be visible if their
visibility is set to visible, whereas
descendants of an element for which
display is set to none can never
generate boxes of their own.
More information can be found here.
I want to hide a form input field. But calling setVisible('inputID', false) causes my liquid layout to collapse. I don't want that.
Is there some easy workaround here? I thought about trying to render the input field's foreground color, background color, and border color to be all white. But that's getting unnecessarily complicated.
There are two ways of hiding elements using css:
Settings the display attribute to none
Setting the visibility attribute to hidden
The first option removes the element from the flow, while the second option hides the element but still lets it take up space in the flow.
You are using the first option and you want to use the second option instead.
Example:
document.getElementById('inputID').style.visiblity = 'hidden';
If you set an element's "visibility" style to "hidden" it will hide the element from view but it will not affect the layout of other elements.
It's hard to give better advice without seeing your code, but there's a few things you can do:
Given that you're using JavaScript, you could get the width and height of the form input you're removing, create a new div with those dimensions, inject it after the form element, then hide the form element. A bit of a hack, but it works.
Surround your input with a div in your HTML and give it an explicit width and/or height in your CSS. Then remove the input with JavaScript as you're doing already.
That's the definition of an element with relative positioning.
Just give it relative positioning and coordinates far off the screen.
e.g.
position:relative
left:-2000px
It should put the element out of the screen, but leave a "hole" where it would have been.