I am using v2 of the api, and on rollover of the top navigation, the drop downs are under the map.
I tried giving the map div container position relative with a lower z-index. and raising the nav z-index and can't get it to work
Any ideas?
Please select NY for the most results.
demo link
UPDATE
by traveling up the hierarchy I was able to z-index properly.
#main-content {
background: url(../img/bg/bg-main-cont.png) no-repeat top left;
width: 920px;
margin: -4px auto 0 auto;
padding: 28px 0 32px;
overflow: hidden;
position:relative;
z-index: -1;
}
Note last two lines.
Traveling up the dom, I was able to find the container that needed the proper z-index. It was the grandparents of the drop down. Even though all of the parents and children had a higher z-index.
Related
I have a pop up window that is supposed to be position:fixed and draggable. The issue is that whenever the window pops up it uses a css transition so all of its properties are animated. I have tried to use left:50% transformX:(-50%) to horizontally center it but the pop up window jumps horizontally when it appears (as it animates the transform). I have also tried centering it with left:0 right:0 margin:0 auto; but the window also jumps out of position when you begin to drag. These issues are only present when the window first appears or it is dragged for the first time, after the first drag everything works as expected.
I pass in the following options to the draggable setter.
elem.draggable({ start: function() {
$(this).css({transform: "none", top: $(this).offset().top+"px", left:$(this).offset().left+"px"});
} });
This fiddle centers with margin:0 auto
here is a fiddle demonstrating my problem
this fiddle centers with left:50% transform:translateX(-50%);
second fiddle
Have you tried giving the modal a width then using margin:0 auto; Typical in order to centre an element you need to give the element a width.
.centeredElement {
margin: 0 auto;
width: 960px;
}
The problem is that margin: 0 auto relies on the fact that the element's left and right properties are set to 0. You are seeing the jump because jQuery UI manipulates the left positioning, and it is no longer 0 after dragging the element. The same applies to the transformX:(-50%) method. This will only center the element horizontally if left is set to 50%.
The workaround is to set left: 50%, and then add margin-left: -40px to displace the element's width (i.e., a negative left margin based on half of the width of the element; in this case -40px since the element has a fixed width of 80px).
Updated Example
.box {
border-radius: 5px;
padding: 10px 15px 10px 15px;
min-width: 30px;
width: 80px;
height: 80px;
left: 50%;
margin-left: -40px;
position: fixed;
/* ... */
}
http://www.milknhny.co.uk/SofiaWork/home/
Hi
The following has a banner, which has a box shadow, and i want it to sit over the top of the image.
Ive tried putting a z-index and position of absolute on the div class .maincontentinner
however the background seems to mess up (with it being a gradient) when i do this.
Any ideas how i can achieve this? I have a clearfix in there also
thanks
style.css line 431
.headerwrap {
width: 100%;
height: 218px;
background-color: #ffffff;
box-shadow: 3px 3px 8px #41434b;
posistion: fixed;
z-index: 99999;
}
Change posistion to position.
First off, I'd use relative rather than absolute positioning, since I don't think you want to disrupt page flow.
I applied:
position: relative;
z-index: -1;
to .maincontentinner and it seems to work just fine. What do you mean by "the background seems to mess up"? What browser are you testing in?
I have a div (#socmed) with an ul containing li's which i have positioned at the top right of my page. You can find the div inside the header tag. These are social media buttons by the way.
http://digilabs.be/tutu/collection.php
As you can see, it only shows up in chrome and safari (haven't tested in IE yet).
I have tried changing the z-index, because I felt like it got overlapped by the parent div, which is colored pink. But that didn't seem to work. I have no idea what to do.
Thanks in advance for all help.
In your main.css:Line 73
Add a width to the <li> item.
#socmed li {
list-style: none outside none;
margin-top: 5px;
width: 25px; /* Add this width..! */
}
This seems to fix your problem.
Your outer #socmed div has width: 25px, but your <li> within it does not, and by default it is larger then the 25px as specified on #socmed, so would not display.
2 CSS adjustments you can make. First make a relative container (not fully tested on your page, but usually a good practice...
header {
position:relative;
}
Second, define a width for your ul list items in your header...
#socmed ul {
width:30px;
}
Hopefully this helps
This issue is related to the width of div#socmed:
#socmed{
width: auto;
height: 125px;
position: absolute;
top:8px;
right: 40px;
}
Originally, you set width to 25px, and this was not wide enough to show your icons.
This question from:
ul, ol {
margin: 0 0 10px 25px; // to margin:0
padding: 0;
}
please don't in the ul,ol such values margin: 0 0 10px 25px; It is a gobal.
I have put relative div in relative container. It worked.
I have problem with z-index again.
Please check page
http://webakery.asia/projects/valentine/
On the right side I have absolutely positioned picture with flowers, but they are overlaping navigation and eventually affect functionality of links in navigation. I want to hide those flowers behind navigation.
I have been playing around with z-indexes, but still cannot figure out the way. Can anyone help please?
Thanks
You have to change your z-index: 100 to z-index less than 50 (your navigation z-index) for section, e.g.
section {
margin: 0 auto;
position: relative;
text-align: left;
width: 960px;
z-index: 20;
}
and add position: relative to your nav
nav {
background: url("../images/bg-menu.png") repeat-x scroll 0 0 transparent;
min-height: 66px;
position: relative;
z-index: 50;
}
i think div.flowers should be outside of your tag
try this.. make the z-index on section -1 and look how everything goes behind your nav.
i think you should move div.flowers outside of your block and then assign its z-index independently. As is, you can change it all day, but the z-index that matters belongs to
I currently have a footer that uses a 3 column layout with a fixed center and fluid sides in order to get a nice box shadow effect. When the window is too small however, it pushes the footer to the left, and messes everything up.
I can't seem to figure out how to make sure the footer divs do not get pushed around. I keep running into this problem with my layouts.
The layout I am working on is here, and a screencast showing the problem is here.
The easiest solution is simply to add min-width:980px to #container.
#container {
background: none repeat scroll 0 0 #A8D9A7;
height: 100%;
min-height: 100%;
position: relative;
z-index: 5;
min-width: 980px; /* add this */
}
The 980px figure comes from the width:960px + padding-left:10px + padding-right:10px of the #content-container.
The container element for your main page body (<div id="body">) has computed padding-left of 10px, and the second container element, (<div id="content-container">) adds another padding-left of 10px, meaning your main body is padded from the left by 20px.
Whereas the container for your footer (<div id="footer-container">) has computed padding-left of 0.
If you add this, it will fix your problem. #footer-container {padding: 0 20px;}
Revised as the above solution messed up bottom box-shadow.
In the #footer-left-outer { rule change:
margin-right:470px;
to:
margin-right:-490px;
In the #footer-right-outer { rule change:
margin-left:-470px;
to:
margin-left:-490px;
In the #footer { rule change:
padding: 10px 10px 10px 10px;
width: 940px;
to:
padding: 10px 30px;
width: 980px;
I now understand why you were using the outer-right and outer-left.
I found a different solution that includes the partial box-shadow effect:
http://jsfiddle.net/nottrobin/Cr4NF/10/
It avoids the need for footer-left-outer and footer-right-outer but I'll leave it up to you to decide if it's neater.
It makes use of :before which only works in IE8 onwards:
http://caniuse.com/#search=:before
But then box-shadow doesn't work in IEs < 9 anyway:
http://caniuse.com/#search=box-shadow