This might be a silly question, but I don't understand why the display property (per the following link: https://www.w3.org/TR/CSS22/propidx.html) is not listed as inherited.
Yes, <strong>strong</strong> will stay inline (and will not turn into block) if we put it inside <p>sentence</p>, but what about display: none? It seems that display: none is a special case and in such a case the value is inherited? And so when we talk about the display property we should say that it is not inherited except when its value is none, right?
Also, are there other such properties and values? I mean the ones that are inherited in most cases, but not in all cases.
Example 1:
<style>
p { display: block; }
strong { display: inline; }
</style>
<!-- `aaa` will stay inline -->
<p>foo <strong>aaa</strong> bar</p>
Example 2:
<style>
p { display: none; }
strong { display: inline; }
</style>
<!-- `aaa` will disappear, so I think it has inherited `display: none`
from its parent. -->
<p>foo <strong>aaa</strong> bar</p>
It's because of the way display:none is defined.
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 child elements aren't inheriting display:none from the parent element.
If they were, a child element with display:block !important would cause a contradiction. The parent element would not be displayed, but the child element (inside the parent) would be, so the child should both be displayed and not displayed at the same time.
Related
So I always thought if the parent container has a property set, it supercedes the child. So in my case I want the parent container to be hidden, but the child elements have a visibility of visible. But it seems the child elements visibility property supercedes the parents and thus will still show.
But the twist is if using display property, it works the way I want. Here is the html:
<div class="wrap">
title
</div>
<div class="wrap2">
title2
</div>
CSS:
.wrap { visibility:hidden; }
.wrap a { visibility:visible; }
.wrap2 { display:none; }
.wrap2 a { display:block; }
http://jsfiddle.net/yPXtB/
So what I want is the ability to hide the container if I set the visibility to hidden even if the child elements have visible.
Another workaround is to use opacity with values 0 and 1 instead of visibility.
(Though check out http://caniuse.com/#search=opacity for compatibility with too old browsers if it's important)
If you need the child css to have visibility: visible, then you can't simply set the parent to hidden, because parent doesn't override the child.
You'd need to either set each individual child to hidden as well, or wrap the children again in another div with visibility: visible, and toggle that to hidden instead of the parent, i.e.:
<div class="hiddenwrap">
<div class="visiblewrap"> /* toggle this instead */
/* content without visibility properties */
</div>
</div>
.hiddenwrap { visibility:hidden; }
.visiblewrap { visibility:visible; }
visibility: hidden causes the element not to be drawn, but it is still there and even the space it occupies stays occupied. The flow of the page isn't affected. Therefor it is possible to still draw the child in that space.
The child does use the parent's visibility if you don't specify it explicitly, as you can see here: http://jsfiddle.net/yPXtB/2/
display: none not only hides the element, but removes it from the flow of the page as well. Display affects the way the element behaves and changes the flow. There is no more space to draw the child in.
I'm refactoring an old site, and that maze is full of tables.
We're moving to HTML5 and I need to fix a table full of
<td align="center">
code.
I found a partial solution by creating a class
.centered {
text-align: center;
}
and assigning it to every TD containing text.
But this is not working on images and some other elements.
margin: auto;
won't work either.
What's the fastest way to center ALL content inside a TD?
If they're block level elements they won't be affected by text-align: center;. Someone may have set img { display: block; } and that's throwing it out of whack. You can try:
td { text-align: center; }
td * { display: inline; }
and if it looks as desired you should definitely replace * with the desired elements like:
td img, td foo { display: inline; }
You can use inline css :
<td style = "text-align: center;">
According to the HTML5 CR, which requires continued support to “obsolete” features, too, the align=center attribute is rather tricky. Rendering rules for tables say: td elements with that attribute “are expected to center text within themselves, as if they had their 'text-align' property set to 'center' in a presentational hint, and to align descendants to the center.”
And aligning descendants is defined as so that a browser will “align only those descendants that have both their 'margin-left' and 'margin-right' properties computing to a value other than 'auto', that are over-constrained and that have one of those two margins with a used value forced to a greater value, and that do not themselves have an applicable align attribute. When multiple elements are to align a particular descendant, the most deeply nested such element is expected to override the others. Aligned elements are expected to be aligned by having the used values of their left and right margins be set accordingly.”
So it really depends on the content.
you can use this code as replacement for table align
table
{
margin:auto;
}
Add this code into your StyleSheet:
margin-top:80px;
I want to change the style of my li tag for particular div means I want to show that element for whole page,but at start I don't want to show that li tag. I want to change style of that tag.
<ul id="butons_right">
<li>
Top
</li>
<li>
<div id="close"></div>
</li>
</ul>
this is my that element which dont want to show it at start of page. I want to change its style to display:none.
Can anybody provide me any solution.
Thanks in advance.
In CSS:
#butons_right>li {
display: none;
}
However assign something to that tag so you can select that particular tag. I'm not sure which li tag you want to hide.
If it's the first li tag, use li:first-child. If not, assign a class to it, say, hidden, and then use .hidden (#butons_right>.hidden, or just .hidden).
Use the nth-child css selector to select a specific li though CSS:
Here is the example:
#butons_right > li:nth-child(1){
/*your css*/
}
And to hide the first li use the display:none property in css.
Your initial code should state
selector {
visibility:hidden;
}
Once the document is loaded or whatever event of your interest arise, you can modify the style with
selector {
visibility:visible;
}
The visibility property has the benefit of not re-arrange your lay out boxes.
The display property , gets out from the flow your element when is set to none. When you modify it again to return to visibility, the lay out will be affected
Which selector to use
It depends on your preferences/needs
You could apply an id or a class in your markup as "close" and the in your css use
#butons_right li.close {
visibility:hidden;
}
This selector is well implemented cross browser an will work fine with quite strong specificity.
If not you may use (if it is suitable) first-child, last-child or nth-child(n) to target your desired li element
Let's say we have:
<div id="view-item-hero-info">
<h2>{{name}}</h2>
<h4>{{location}}</h4>
<h3>
<span id="view-item-hero-header-score">
You scored {{userScore}}pts
</span>
</h3>
{{description}}
</div>
Is there a way I can hide the text directly inside #view-item-hero-info? I know I can use text-indent but is there another, nicer, way?
Note: I don't want to hide the element, just everything inside it.
Note 2: Hiding all the elements within #view-item-hero-info is fine, I can use #view-item-hero-info > * { display: none } but then the text directly within #view-item-hero-info is still visible. I need #view-item-hero-info to remain visible so that its background can be seen but the text inside it must be hidden.
You can try:
#view-item-hero-info {
color: transparent;
}
Using this CSS:
visibility: hidden;
hides your element, but preserves the space it would normally take. Whereas this CSS will hide an element as if it never existed:
display: none;
you can use this code if u need hide text
.text-hidden{
font-size: 0;
text-indent: -9999px;
}
to hide all direct child's
use
.hidden-nested > *{
visibility: hidden; /*or next line */
display:none ;
}
if you need all child's use last code but change class to
.hidden-nested *
Use css display property. In HTML this would look like <span style="display: none">
Using javascript: document.getElementById("view-item-hero-header-score").style.display="none"
in css:
#view-item-hero-header-score {
display: none;
}
Using CSS you can set a style:
visibility:hidden
So to hide all descendants (*) within your element:
#view-item-hero-info * { visibility: hidden }
If instead you only want to hide direct descendants ie children but not grandchildren then you use the direct child selector (>)
Rather than selecting all (*) you can select particular descendants eg divs:
#view-item-hero-info div { visibility: hidden }
Equally instead of the visibility you can use:
display:none
The display option doesn't take up space whereas if you want to reserve the space for when the element will be shown you use the visibility option
EDIT:
There isn't a selector just for a text node (ie the text without the element). See Is there a CSS selector for text nodes?. So all children of your span need to be in an element in order to have style applied.
As a hack you could just put another span directly in your main one and all content (including the standalone text) within that. Then the hiding will work.
Could you use JS to iterate though all child items in the elements DOM and then use JS to overwrite the CSS? Something like:
var items_i_want = document.getElementById("view-item-hero-header-score").elements
for(var i = 0; i < items_i_want .length; i++)
{
items_i_want [i].style.display="none"
}
I have a simple list I am using for a horizontal menu:
<ul>
<h1>Menu</h1>
<li>
Home
</li>
<li>
Forum
</li>
</ul>
When I add a background color to the selected class, only the text gets the color, I want it to stretch the entire distance of the section.
Hope this makes sense.
The a element is an inline element, meaning it only applies to the text it encloses. If you want the background color to stretch across horizontally, apply the selected class to a block level element. Applying the class to the li element should work fine.
Alternatively, you could add this to the selected class' CSS:
display: block;
Which will make the a element display like a block element.
Everyone is correct that your problem is that anchors are inline elements, but I thought it is also worth mentioning that you have an H1 inside of your list as well. The H1 isn't allowed there and should be pulled out of the UL or placed into an LI tag.
Would something like this work?
.selected {
display: block;
width: 100%;
background: #BEBEBE;
}
Put the selected class on the <li> and not the <a>
<a> elements are inline by default. This means that they don't establish their own block, they are just part of the text. You want them to establish their own block, so you should use a { display: block; } with an appropriate context. This also enables you to add padding to the <a> elements rather than the <li> elements, making their clickable area larger, and thus easier to use.