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.
Related
I understand how to override parent styles, and I know this example is contrived, but is there a way (with inline CSS) to cause the child span to show, even though its parent is set to no display?
<span style="display:none">
<span style="display:block;">Test</span>
</span>
No, you cannot override the effect of display: none on inner elements. The reason is that the CSS specification explicitly says, in the description of value none for the display property:
This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants.
Short answer: No.
Long answer: There is no way to override display in children if the parent is hidden. You could use JavaScript to remove the child span from its parent, and place it in the body where you can apply a display style. Things like display, opacity, visibility etc, effect the children of elements they are applied to, the effects can't be completely countered, but for things like opacity they can be added to.
The answer to this question is "wrap the input in a span, and apply overflow: hidden to the span."
This works because it establishes a new block formatting context for the span, making room for the floats.
Why does applying overflow: hidden directly to the input not work? Why is it necessary to wrap the input in a span?
The behavior of block formatting contexts next to floats is not fully specified. From CSS2.1 (emphasis added):
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.
So the (unsatisfying) answer is effectively "that's just how browsers behave". This means that layouts that rely on the "shrink to fit" behavior -- the effect produced by wrapping the input in a span, in the question's example -- are relying on unspecified browser behavior. From the point of view of the spec, browsers could just as well always clear the block formatting context below the float.
It appears there's been some activity to better specify this corner of CSS for CSS3, but I haven't found anything authoritative.
Overflow: hidden applies to the container element, instructing the browser how to manage content that extends beyond the defined limits of the container's borders. By adding overflow: hidden directly to the input you're not really adding anything since the input doesn't have any child elements to affect the positioning or proportions.
Setting overflow doesn't clear the float at the element, it self-clears. This means that the element with overflow applied (auto or hidden), will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing), assuming that the height isn't declared.
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.
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'.
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.