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.
Related
I do not have any example for this however it's really not needed for this question. Is it possible to make a div scrollable left and right but not up and down? I understand that a relative layout does both, and a fixed doesn't move at all.
Requirement must be done through HTML and CSS only.
Try using this, the only issue is that it doesn't work with all browsers:
div {
position: sticky;
}
Maybe this is a bit too short (but can't answer without more information or markup, or JSFIDDLE to apply)
CSS
div {
overflow-x: scroll;
overflow-y: hidden;
}
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.
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;
}
OK this is fairly complicated to explain so I've put it online here:
http://jsfiddle.net/zSgPr/10/
I need the yellow container to wrap around the lower brown div and red footer div in this set-up, leaving the footer at the bottom of the page, ideally where I can then adjust it by pixel margins. I have tried multiple ways of clearing it with some luck, however I can't figure out how to get the footer to behave or the content to encapsulate properly. Could somebody suggest a means of doing it? Thanks guys.
This is what I am trying to achieve
Answer:
Was overlooking the obvious that I needed another container div. If anyone wants to see it's on-line here: http://jsfiddle.net/zSgPr/21/
Add bottom:0 to .textbox
Plcace the .textbox div outside the container which means when you are giving position:absolute the parent div should have Position:relative so add relative to main div which is .page
LIVE DEMO
SOLUTION
Change .textbox style like this mayble helpful
.textbox{
margin:0px 10px;
background-color:#262626;
width:700px;
position:relative;
z-index:40;
border:2px dashed #381e01;
float:left;
}
DEMO
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;
}