z-index refuses to work - html

I am trying to make these black arrows overlap the white div, but they will not budge. I applied position: relative and different sizes of z-index to the div but they just will not work for any reason.
The closest luck I had was adding position: absolute to the <div class="col-8"> element, which caused the arrows to overlap but broke the positioning of that div.
I have already looked at the many, many SO questions and responses about z-index not positioning above the respective, but no other solutions have worked. I have tried:
using position: relative on parent elements
changing the opacity to opacity: .99
None of those have worked.
How can I make these arrows work?
Here is my jsFiddle.
The CSS for the arrows starts at Line 141 and 146.

I went to see your code, and the problem you have is the use of overflow: auto in col-12 class.
.col-12 {
float: left;
overflow: auto;}
If you remove that, you can see the arrows over the div, as you wanted.

The problem you're having is due to the fact that the container you're using has an overflow set. To come over this issue what you can do is to either change it, or give to the #nav li:after a position:fixed and then change the top and left values accordingly.
A second approach would be to do not use the overflow: auto on the #header-content.

Related

Position bootstrap popover

I'm trying to implement a popover for language selection, but encounter two problems:
1) The popover is hidden above the footer when I apply position: absolute; to the footer.
2) The popover sticks to the right side of my page. I would like a margin there, but margin-right doesn't seem to have effect.
Here's a jsfiddle.
Note: this might not be the case with newer versions of bootstrap, but I'm using this one in the rest of my site and migration to a newer version is out of scope for now...
EDIT: I fixed the first problem by adding {container: 'body'} to the tooltip. Second one still open...
EDIT 2: I managed to add a margin on the right by using:
.popover
{
right: 10px !important;
left: auto !important;
}
The only problem now is that the arrow isn't centered with the text beneath the arrow anymore... any tips?
One way to accomplish this is by adding a fixed position position:fixed; right:40px; to your #wrapper. This will allow you to adjust your position to the left and or right. However, if you attempt to adjust top or bottom it will break out of its parent container and be relative to the document. Therefore, if you need to make adjustments to top or bottom use margins.
#wrapper{
min-height: 50px;
max-height: 100px;
display: flex;
align-items: center;
position:fixed;
right:40px;
}

Margin not working only in Safari (element is at the bottom of the page)

Please check the following link in the latest safari:
http://www.grupoguion.com/
The footer is fixed at the bottom and supossed to revealed with the scrolling, so the previous section has a margin-bottom but it doesn't work, only in Safari.
Everywhere else is ok, even in I.E.
I tried to add overflow: auto in the page-wrapper, but everything gets weird in all browsers with elements dissapear and appear.
I also have read that removing height: 100% in the body and html may fix that, but that is not an option for me, because i need the images to fix the browser height.
Does anybody have another possible solution please?
Thank in advance.
You can add a div with the size of your bottom and make it transparent.
html:
<div id='tr-footer'>
</div>
css :
#tr-footer{
height: ?px;
width:100%;
background:transparent;
}
Try making the element
display:inline-block
and Safari should respect its dimensions and margin.
The accepted answer is way too complicated. Consider this approach (taken from another thread):
It's a normal weird behaviour calling margin collapse.
To simply avoid it add overflow: auto; on the [footer] container.
Your footer container could look something like this:
.footer-container {
overflow: auto;
}

Unordered list menu unable to position it correctly + unable to center the list items within the unordered list

Take a look at the fiddle below:
Fiddle: http://jsfiddle.net/TE8hD/
In it you can see my problems:
The list items within the <ul> are not centered as there is a big margin to the left while there is no gap at all to the right.
Also the <ul> itself cannot be properly positioned the way I want it to. I want it to be 200px from the right and 0px from the bottom. However when I try this I can only get the right property to work.
I've been trying to fix this for the past 2 hours, changing everything from position, float, display, margin, padding etc. Nothing seems to do the trick, if I could get some help solving this it would make my day.
Add:
padding: 0;
margin: 0;
To your .dropdown class.
And look into implementing a reset.css file, which typically resets margin, padding, and other properties on a lot of elements so that you have a blank slate when creating your CSS.
Also, you seem to lack an understanding of what position: relative and position: absolute do. Do some research on that. But if you want your UL to be positioned absolutely at the bottom of its containing element (.header), then .header needs to have position: relative and .dropdown needs position: absolute;
Fiddle: http://jsfiddle.net/TE8hD/2/

Strange div margin issue

I'm trying to add a content rotator to a site I'm building. The rotator works fine. In fact, it works out better than I had hoped. I need to tweak some styling things, but that's besides the point.
For some reason, the rotator (which is relatively positioned and inside my container/wrapper div) pulls my wrapper and menu down with it when I add a margin to the top of it (margin:65px auto 0; or something like that). Any words of advice?
Page here:
http://technoheads.org/test/ice/index.htm
This sounds like a classic case of collapsing margins.
You can fix this by giving the container a border-top, margin-top, padding-top, or an overflow other than visible. (jsFiddle)
you can probably accomplish what you want by giving #wrapper top padding instead giving #slideshow top margin.
I run into this problem a lot when I put elements inside of inline elements. You should be able to fix it by doing one of the following:
Set the element you're having trouble with to display: block; (Usually a good enough fix)
Use top-padding like already suggested (nothing wrong with using band-aids if it works...)
Set the element to float: left; (Not really recommended, can cause some problems down the line, but will definitely allow you to add top and bottom margins)
How about this?
#menu {
position: relative;
width: auto;
height: 100px;
left: 383px;
top: 0px;
}

drop down sliding underneath content.. i have tried EVERYTHing.. :(

Hey guys, ive been working on this drop down for wayyy to long now. I just cant get the drop down to fall on top of the main content on the page. I have tried adding position: relative and z-index on all relevant areas.
I think what may be causing the problem is "overflow: hidden" in some places.. but that is by far my favorite way to contain floats..
http://dev.redstoneinvestments.com/index.php?s=&p=redstone&v=home
Any suggestions?
Remove position: relative and overflow: hidden from both header and maincontent. If you need to clear the floats, use the clearfix method: http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/ (this article specifically explains why clearfix is a better solution than overflow: hidden when you have absolutely positioned elements that need to extend outside the container).
change #header css to
#header {
background-color:#FFFFFF;
height:140px;
width:900px;
}
that enough, it fixed the problem on my firefox.