I have a div element nested buttons
<div class="nav">
<button>Home
<button>Market
<button>Profile
</div>
Ignoring the fact that I haven't closed the button tags in the source code is there any way to detect using CSS only whether all of the buttons are not visible so that I can restyle the div to fit the scenario (hide the div as it is useless in this case)
Edit
By not visible I mean made invisible using styles like display:none; or visibility: hidden;
Related
I'm working on a Bootstrap project, the first task is to use Bootstrap navbar to build a navigation in the header. I want to use collapse functionality of Bootstrap to create a dropdown-menu div, when users hover or active a nav item, it will be visible. I want to make this dropdown-menu div 100% width of the screen.
Here's the sample code:
<ul class="nav navbar-nav">
<li class="dropdown">
<a ...>ABOUT</a>
<div class="dropdown-menu">
</li>
</ul>
The question is: the position property of dropdown-menu is absolute, which makes this div positioned based on the closest positioned ancestor. In the sample code is "li" tag, because in Bootstrap there's a rule:
.nav>li{
position: relative;
}
When I add a rule, which could make this "li" tag position static:
.navbar-nav>li {
position: inherit;
}
This rule is ignored by browser, I found this from Chrome inspect. When I uncheck the nav>li rule, my rule works. I want to know how does browser choose which of the css property value to render when it gets two rules on the same element and same property?
Thanks.
In short, specificity. The more specific the selector is, the higher priority it will be given.
For more details, look here... https://developer.mozilla.org/en/docs/Web/CSS/Specificity
Having said that, your rule appears to be wrong, as you need a dot to indicate a class...
.navbar-nav>li {
position: inherit;
}
In my AngualrJS application we use angular-ui-bootstrap tooltips.
I have one tooltip that needs to accommodate long text.
The answer to SO question Displaying long text in Bootstrap tooltip shows me how to make tooltips go wider...
... but what if I don't want to make all tooltips wider, just one specific tooltip?
(Notes: AngularJS 1.2.24, jQuery available... but I'd rather just be able to apply a style to that single tooltip than get more complicated)
If on the other hand you have tooltip-append-to-body="true", you can use the following modified version of #Daryn's code
CSS
.tooltip-400max .tooltip-inner {
max-width: 400px;
}
HTML
<div id="element1"
tooltip-append-to-body="true"
tooltip-class="tooltip-400max"
tooltip="{{ model.longTooltip }}">Text</div>
<div>More page content</div>
As long as you don't have tooltip-append-to-body="true", you can use the following CSS (in this example, making the tooltip max width 400px):
CSS
.tooltip-400max + .tooltip .tooltip-inner {
max-width: 400px;
}
HTML
<div id="element1"
class="tooltip-400max"
tooltip="{{ model.longTooltip }}">Text</div>
<div>More page content</div>
The key in the CSS above is the adjacent sibling selector, +.
That's because, as you probably know, when you hover over element1, the tooltip is inserted as a div after element1, approximately like this:
<div id="element1"
class="tooltip-400max"
tooltip="{{ model.longTooltip }}">Text</div>
<div class="tooltip fade in" and other stuff>...</div>
<div>More page content</div>
Thus the CSS selector .tooltip-400max + .tooltip will select only this inserted tooltip, which is an adjacent sibiling. The descendant .tooltip-inner max-width styling will not affect all tooltips, only tooltips for elements with tooltip-400max class.
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 2 years ago.
<div class="content-wrapper">
<div class="popup">
<div class="close">
</div>
</div>
</div>
.content-wrapper is relatively positioned and contains all the page content (not just the popup).
.popup is absolutely positioned.
.close is also absolutely positioned.
I have some javascript to move close when the cursor enters popup (so I have a nice close bar appear out the side). The best way I have found to do this is just to move using jQuery animate. Hiding/showing creates a stuttering affect even .stop() wasn't able to solve. My problem is in trying to hide .close behind .popup. No matter what z-index I set for the two divs .close will not sit behind .popup.
Is it possible to have an absolutely positioned div inside another absolutely positioned div sit behind its parent, and if so how?
Yep, use z-index: http://jsfiddle.net/tGd4Q/
HTML:
<div class="content-wrapper">
<div class="popup">
<div class="close">
</div>
</div>
</div>
CSS:
.popup, .close { position: absolute; height: 200px; width: 200px; }
.popup { background: #f00; }
.close { background: #ff0; top: 25px; left: 25px; z-index: -1; }
This won't work with IE7 standards though. I suggest using jQuery(or other framework of your choosing) to hide the div:
$('.popup .close').hide();
Stacking indices are most of the time relative to siblings, so you cannot put a child behind it's parent using z-index.
Here is some more information about that.
This is the stacking order:
The borders and background of the current stacking context
Positioned descendants with negative z-index
Nonpositioned block-level descendants with no z-index property defined -- paragraphs, tables, lists, and so on
Floating descendants and their contents
Nonpositioned inline content
Positioned descendants with no z-index, z-index: auto, or z-index: 0
Positioned descendants with z-index greater than 0
Nick McCormack uses z-index: -1 in his answer. This is indeed one exception to what your feelings give in. Beware that z-index: -1 moves an element behind many of your elements to the background.
Browser differences
Beside that, Internet Explorer does not support negative stacking indices and is very strict with element (child/parent) positions. Every element level has it's own stacking context, so have to 'communicate' via the parent element. See this explanation.
According to Smashing Magazine, the select element, which is a windowed control, has naturally a higher stacking index.
According to the Shadowbox troubleElement option, I presume that object, embed and canvas have the same issues.
If you want to hide .close, why don't you really hide it instead of moving it behind .popup?
$('.close').hide();
No, you will not be able to put it behind its parent. However you could change its display mode to none, so it isn't seen at all. Then when you need to see the div, change it to show.
Simple jQuery:
$('.close').hide();
$('.close').show();
There are other ways as well, such as adding an attribute of style with display:none or display: inline-block as a setting.
Update: According to comments in other answers, there IS a way to do it with z-index. Still thinking the hide/show is the way to go though. Very clear what you are doing on your UI.
I want to have a inside of another that will serve as a background to the container and sit behind all of the other elements inside of the container. The HTML would be something like so:
<div id='container'>
<div>Blah</div>
<input type='text'/>
<input type='submit'/>
<div id='background'>
<img.../>
Some Text Maybe?
</div>
</div>
My failed CSS:
#background{
float:left;
z-index:-999;
background-color:black;
height:'+o.height+'px;
width:'+o.width+'px;
}
The 0.variables are from a jQuery plugin I'm making this for - basically the div should be the same height and width that the parent is.
Where I currently stand: My background sits below the sibling elements (along the y-axis not the z). When I play around with the position property, it either places the element behind the parent or it has no effect.
What I ultimately am trying to do is create a jQuery plugin that adds an animated background to a specified element. I'm not even sure if what I'm trying to do with the CSS is possible.
Try putting the background as the container's first child, then using position: absolute;. Mess around with the z-index until it works.
Also, you may need to specify a "more negative" z-index on the <body>, otherwise your background element will end up behind the body (and thus invisible).
I have to create an html page for use on a CD. The navigation is an HTML map with co-ordinates set. When the user rolls over a co-ordinate, I want an image popup to appear beside it. There's 8 map links, and 8 corresponding image popups.
I could do this easily through jQuery, but the CD will be used on IE mainly. IE doesn't allow javascript to be run locally (without user interaction, which isn't acceptable).
Through jQuery I absolutely positioned the rollover images, but I can't set them visible through CSS with a hover. What's the best method to approach this?
You could always try some serious styling effects based on the Pseudo-class of :hover.
Without knowing your markup I would tackle along these lines...
HTML Markup
<div id="mapWrapper">
<ul id="map">
<li id="location-01"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
<li id="location-02"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
<li id="location-03"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
....
</ul>
</div>
CSS Code
#mapWrapper {position:relative;} /* include width, height and any bg imagery */
ul#map, #map li {margin:0;padding:0;list-style-type:none} /* just to reset the list to be standard in different browsers */
#location-01 {position:absolute;} /* include with, height and position top-left items as required */
#location-02 {position:absolute;} /* include with, height and position top-left items as required */
etc...
#map li .item {display:none; } /* hide the pop up text, include defaults for position based on the location of the li */
#map li:hover .item {display:block;} /* show the pop up text on hover of the LI*/
/* Note: If you need to position each pop item uniquely you could use something like... If you do, remember to move the :hover effect to be the last item in your style sheet */
#map li#location-01 .item {display:none; }
Hope that helps you out, I have had to a similar map online (not with a CD) but wanted to do it without JS and that was the easiest way to do so.
Note: If you need to offer IE6 support, you would probably be best changing the hover to be based on an ahref instead.
eg: Map Text Additional Pop Up Text