z-index is not working
i tried:
Z-Index not working?
Z-index not working
Z-Indexing Not working
#customers-list {
width: 450px;
margin-left: -160px;
padding: 10px;
background-color: #e2e2e2;
overflow: hidden;
position: absolute;
z-index: 999;
}
The Popover still overlaps the most, but not all elements
Try
#customers-list {
width: 450px;
margin-left: -160px;
padding: 10px;
background-color: #e2e2e2;
overflow: hidden;
position: absolute;
z-index: 2000!important;
}
Found the soulution:
z-index has to be applied to the positioned elements, in my case: to that elements that having position: absolute;
see mozilla z-index and stacking-context
Related
We want to apply a curved shadow line on our menu, at the bottom (see Image).
This shadow/curve must be in-front of the sub menu. So the shadow overlaps the sub menu. This is the problem, because when we hover to the sub menu the sub menu will disappear.
This is because the wrapper got a higher Z-Index then the sub menu.
#header {
width: 100%;
height: 153px;
background: url("/public/images/headerBackground.png") no-repeat center center;
}
#header .wrapper {
position: relative;
left: 50%;
margin-left: -470px;
z-index: inherit;
pointer-events: all;
}
#navigation li ul {
display: none;
position: absolute;
z-index: -1;
background-color: #c40b29;
-webkit-box-shadow: 0px 1px 30px 18px rgba(46, 50, 50, 0.3);
-moz-box-shadow: 0px 1px 30px 18px rgba(46, 50, 50, 0.3);
box-shadow: 0px 1px 30px 18px rgba(46, 50, 50, 0.3);
float: left;
width: 152px;
height: 166px;
margin-left: 0px;
margin-top: -2px;
}
For an image of the design we got:
http://s18.postimg.org/uiaf1waxl/Schermafbeelding_2014_03_17_om_16_10_26.png
I have a div with text inside, with a line-height that is more than the height of the text. This means there is space on top and below each line of text.
There is a vertical border along the right hand side, the top of which I want to be aligned with the top of the text. I need to somehow align the text to the top of it's line.
Is this possible or can someone help me out here?
div{
border-left: 1px solid black;
line-height: 30px;
}
<div>Hello</div>
Without messing with the line-height:
div{
position: relative;
font-size: 16px;
line-height: 24px;
width: 25px;
padding: 0px 0px 0px 10px;
}
div:before {
position: absolute;
content: '';
top: 6px;
left: 0px;
bottom: 6px;
width: 0px;
border-left: 1px solid black;
}
The values top and bottom should equal (line-height - font-size) / 2 but due to different character height will need some manual nudging.
Demo: http://jsfiddle.net/NcbB7/
I have an OUTER div with two inner divs:
one of them is VERTICAL SIDEBAR whose content is fairly short
second one is div with MAIN PAGE whose content varies
They are both set to float: left, so they are next to each other.
I already learned that when setting height or min-height in percentage, all the parents need to have their height specified also.
I would like them both to be stretched to the end of the page. Havent managed to do that, problems begin when MAIN PAGE div is longer than monitor height( so there needs to be scrollbar), then I usually end with that nasty scrollbar inside MAIN PAGE div or I end with the SIDEBAR div being too short.
ok you should set the Outer divs css like so
.outer{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:auto;
}
This will set the outer div to completely fill the window, with a side bar to scroll the length of the rest of the page. You would only have one main side scrollbar.
Now if you want the sidebar to just fill the page. set its css like so:
.sideBar{
position:absolute //can be relative if necesary.
top:0;
bottom:0;
overflow:none;
}
Now this sets the sidebar to the exact height of the outer div. so it will span the entire page and the overflow is set to none to ensure no scrollbar.
Now the outer div's and sidebar div's height should be dictated by the main div, and you should only have one clean scroll bar.
You could do something like this:
jsFiddle
Setting display: table-cell on both div's inside the outer div with display: table-row will ensure they are always the same height, you'll have to set display: table on body for this to work, or you could just set it directly on the outer div instead of table-row. That will work just fine. This approach should work on anything better than IE7.
CSS:
html {
position: absolute;
bottom: 0px;
top:0px;
left: 0px;
right: 0px;
overflow: scroll-x;
}
body {
height: 100%;
padding: 0px;
margin: 0px;
display: table;
}
.outer {
display: table-row;
height: 100%;
width: 100%;
}
.sidebar, .mainpage {
display: table-cell;
height: 100%;
}
.sidebar {
width: 200px;
background-color: #EFEFEF;
}
HTML
<div class="outer">
<div class="sidebar">sidebar</div>
<div class="mainpage">mainpage</div>
</div>
After seeing your site, this is the fix:
.Page {
width: 970px;
min-height: 100%;
width: 100%;
display: table;
}
.Sidebar {
width: 257px;
background: url(img/sidebar-bg.png) repeat-y;
margin-left: 23px;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}
EDIT: I forgot the .Page styles, I added it.
EDIT: Also, if you want to center it, then use this:
html, body {
height: 100%;
min-height: 100%;
padding: 0px;
margin: 0px;
}
body {
padding: 0px;
margin: 0px;
line-height: 21px;
background: url(img/bg-page-01.jpg) no-repeat;
background-position: 50% 0%;
}
.Page {
height: 100%;
display: table;
margin: 0 auto;
}
.Sidebar {
width: 257px;
height: 100%;
background: url(img/sidebar-bg.png) repeat-y;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
height: 100%;
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}
If your talking about height issues here, then use this:
html, body {
height: 100%;
min-height: 100% /* for firefox */
}
#main, #sidebar {
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-khtml-box-sizing: border-box;
box-sizing: border-box; /* eliminates increased height due to padding & child margins */
}
#sidebar { background: blue; width: 200px; float:left; margin: 0; }
#main { background: green; width: 960px; margin: 0 0 0 200px; }
edit: fiddle: http://jsfiddle.net/jTwqe/
I'm not really sure what your issue is, but is an alternate solution.
.outer { display: table; }
.sidebar, .main { display: table-cell; padding: 10px; }
.sidebar { background: green; }
.main { background: blue; }
Fiddle: http://jsfiddle.net/Q5CmR/
I am having a problem with my css accordion menu...
I have creater a nice slider as shown here:
http://jsfiddle.net/LedZep257/hDzyH/1/
but the lis aren't spaced nicely meaning that some items are not appearing fully.
When I use inline-block, the spacing is right but it mucks up the entire slider:
http://jsfiddle.net/LedZep257/hDzyH/
Can anyone help/does anyone have any ideas how to fix this?
I think that you can not set a transition in diferent measures, and I think that "auto" an "%" are diferent measure, you can use only one measure to set the transition, if you are having too much troubles and you really need to get that done why dont you use another measure like "em" meaby that would fix it.
e.g.
.horizontalaccordion>ul>li
{
display: inline-block;
overflow: hidden;
float: left;
margin: 0;
padding: 0;
list-style: none;
width: 8em; /*I was here*/
height: 40px;
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000));
transition: width 0.6s ease-in-out;
-moz-transition: width 0.6s ease-in-out;
-webkit-transition: width 0.6s ease-in-out;
-o-transition: width 0.6s ease-in-out;
}
.horizontalaccordion>ul>li>h3
{
display: inline-block;
float: left;
margin: 0;
padding: 10px;
padding-left:19px;
padding-right:18px;
height: 19px;
width: 8em; /*I was here*/
border-left: none;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
white-space: nowrap;
filter: progid;
-ms-filter: progid;
}
.horizontalaccordion>ul>li:hover
{
overflow: hidden;
width: 60em; /*I was here, I just set 60em for example*/
}
.horizontalaccordion:hover li
{
width: 0em; /*I was here*/
}
I seem to have this problem a lot when i'm writing. I have two elements on the same line. I need them both to have margins and thus cannot set their positions to absolute. if i don't set the position of the first element, it appears fine. However, the second element will appear below the first element. This is bad; I would like them to appear on the same line. In other words I would like to set both of the elements to position: absolute; top: 0; but then i can't use margin, which i need.
HTML:
#userQuestion{
//border: 1px solid yellow;
width: 400px;
position: relative;
top: 0px;
left: 40px;
line-height: 1.28;
display: inline-block;
}
.container{
padding: 0;
margin 0;
border-top: 1px solid #ccc;
//border: 1px solid blue;
margin-top: 30px;
width: 480px;
}
HTML:
<div id='userQuestion'></div> //this is fine
<div class='container'></div> //this appears underneath userQuestion. I would like them to be on the same line.
Try the following :
.container {
border-top: 1px solid #CCCCCC;
display: inline-block;
margin-top: 30px;
padding: 0;
width: 480px;
}