I have a container div. Inside that div are three graphs aligned at 700px intervals (the width of the container). The idea is that the other 2 graphs will be hidden off screen which I can then, with jQuery, slide across when a user interacts with various controls on the web page.
A simplified version of my code is like so:
Style
#graphcontainer {
height: 260px;
overflow: hidden;
width: 700px;
}
.graph {
position: absolute;
}
HTML
<div id="graphcontainer">
<div class="graph" style="left: 0px;"></div>
<div class="graph" style="left: 700px;"></div>
<div class="graph" style="left: 1400px;"></div>
</div>
For some reason the second and third graphs, which are positioned off to the right, are still visible! How do I ensure they are not visible?
First you have to set, position:relative for the parent. Then, you have to set the height of the parent.
Demo: http://jsfiddle.net/Scfdk/
You need to add position: relative; and set a height to the element you have overflow set to hidden on.
if you want to hide a div, have you considered "display: none"? For example,
<div class="graph" style="display: none"/>
Related
I have a fixed DIV that I have that sits at the top of a page and as the user scrolls down the page the fixed DIV moves down. When the user clicks on the fixed DIV it toggles and allows the user to upload an image.
The problem I have found is that if I have as an example a Google Map (DIV) underneath this shines through the Fixed DIV.
Example of DIV Fixed
<div id="flip" style="position: fixed; width: 98%;">CLICK TO ADD PHOTOS<br /><span style="font-size: 11px;">Expands to allow for uploading photo</span></div>
<div id="panel" style="position: fixed; margin-top: 35px;width: 98%; z-index: 100;"><iframe src="upload.aspx?id=<%Response.Write(Request.QueryString["id"]); %>&type=<%Response.Write (Request.QueryString["type"]); %>" style="overflow: scroll;height: 500px; border: 0px;" scrolling="no"></iframe></div>
How do I stop any DIV underneath this fixed DIV from displaying on the top of the fixed DIV?
Sounds like changing the CSS z-index property would fix your problem.
#flip { z-index: 100; }
#panel { z-index: 50; }
add z-index: 101; to your div with I'd flip to position it on top of the other div.
<div id="flip" style="position: fixed; width: 98%; z-index: 101;">CLICK TO ADD PHOTOS<br /><span style="font-size: 11px;">Expands to allow for uploading photo</span></div>
<div id="panel" style="position: fixed; margin-top: 35px;width: 98%; z-index: 100;"><iframe src="upload.aspx?id=<%Response.Write(Request.QueryString["id"]); %>&type=<%Response.Write (Request.QueryString["type"]); %>" style="overflow: scroll;height: 500px; border: 0px;" scrolling="no"></iframe></div>
set the z-index of your divs always higher for the ones you want underneath them. if the div you describe with the Google maps in it has a z-index of let's say 1000, set your other elements higher than 1000 in order to be on top of the ones set with a lower number.
A. z-index could get to a really high number in certain situations. Up to 2147483647 (90000 would be enough). Try changing the element you want above everything to a very high number to discard this is the issue.
B. Switch (Invert) the order between both divs.
As you didn't provided the rest of the HTML this are two easy to test solutions.
z-index CSS property would solve your problem, a div with the highest value for z-index property would always show in the top, so you need to add a z-index value for flip div higher than 100 (panel's z-index value)
<div id="flip" style="position: fixed; width: 98%; z-index: 101;">CLICK TO ADD PHOTOS<br /><span style="font-size: 11px;">Expands to allow for uploading photo</span></div>
<div id="panel" style="position: fixed; margin-top: 35px;width: 98%; z-index: 100;"><iframe src="upload.aspx?id=<%Response.Write(Request.QueryString["id"]); %>&type=<%Response.Write (Request.QueryString["type"]); %>" style="overflow: scroll;height: 500px; border: 0px;" scrolling="no"></iframe></div>
Refer to this for more information about z-index CSS property.
This works on firefox and chrome:
<div id="popup" style="display: block;">
<div id="contentWrapper">
<div id="popHeader">
<span id="popupQuestion">The nature.</span>
<a id="popupYes" href="#"> </a>
<a id="popupNo" href="/">Leave</a>
</div>
</div>
</div>
#contentWrapper {
background-image: url("http://bestcamctory.com/images/warning/warning_bg.png");
height: 100%;
position: relative;
width: 100%;
}
But on ie the background image isnt shown. Why is that?
If your child elements are positioned absolutely, then #contentWrapper has collapsed because there's no elements within the normal flow of the document to tell it how tall to be. A height: 100% is relative: the element will only be as tall as its parent, which will only be as tall as its child elements by default (which are currently 0).
There are a few things you can try to work around this.
Add a minimum height to #contentWrapper (try 1em to start with)
Remove the absolute positioning from one or all of the child
elements.
You could also try adding height: 100% to each of the ancestor elements.
IIRC, you might need to define a size for the contentWrapper or the popup divs.
Is there any way to clear absolutely positioned elements with CSS? I'm creating a page where I need each part of the site (section element) to be absolutely positioned, and I want to apply a footer with content below those elements.Tried to relatively position the header and footer to see if a total height would be taken into account but the footer still gets "trapped" underneath the section elements. Any ideas?
<header style="position: relative;"></header>
<div id="content" style="position: relative;">
<section id="a" style="position: absolute;"></section>
<section id="b" style="position: absolute;"></section>
<section id="c" style="position: absolute;"></section>
<section id="d" style="position: absolute;"></section>
<section id="e" style="position: absolute;"></section>
</div>
<footer style="position: relative;"></footer>
Absolutely-positioned elements are no longer part of the layout - parent items have no idea how big absolutely-positioned child elements are. You need to set the height of "content" yourself to ensure it does not overlap the footer.
Don't use absolutely-positioned elements for layouts since that elements are removed from normal flow and no longer affect elements around them. And they're not affected by other elements.
Use absolute-positioning to move elements within a container when conditions allow.
For floated elements I suggest you to use a specific clearing technique called clearfix. I use it religiously.
http://nicolasgallagher.com/micro-clearfix-hack/
http://jsfiddle.net/necolas/K538S/
Had same question, made all absolute positioned, but let the first one be relative, as for responsive layout where height does change, it did help to keep track of the elements height changes, notice in this case all elements have same height:
.gallery3D-item {
position: absolute;
top: 0;
left: 0;
}
.gallery3D-item:first-of-type {
position: relative;
display: inline-block;
}
I discovered a easy solution to this, it might not cover all possible problems but at least it solved my problem.
HTML:
<p>Content before</p>
<div class="offset-wrapper">
<div class="regular">
<img src="https://www.gravatar.com/avatar/bdf0bf75e96fa18e57769865ebeb9a6e?s=48&d=identicon&r=PG" />
</div>
<div class="special">
<img src="https://www.gravatar.com/avatar/bdf0bf75e96fa18e57769865ebeb9a6e?s=48&d=identicon&r=PG" />
</div>
</div>
<p>Content after</p>
CSS:
.offset-wrapper {
background: green;
position: relative;
width: 100px;
}
.offset-wrapper .regular {
visibility: hidden;
}
.offset-wrapper .special {
bottom: -15px;
left: -15px;
position: absolute;
}
I have some text in h3 tag, but the text is not visible, I have tried changing the height of the h3 tag as well of the div containing it.
The text I am talking about is visible in screenshot here - http://imagebin.org/226001
& the web page is here at - http://bit.ly/PLDSCJ
It's because the parent elements (.detail , .details and .details_wrapper) all have a fixed height. The H3 will be placed inside those elements, so when it's bigger you'll not see it.
Solution is to change the height of the parent elements.
try to increase the height of
<div class="details_wrapper">
something like this...
.details_wrapper{
height:400px;
}
I think one of the container divs on you page is clipping that part out.
It is most probably the div with .details_wrapper class that has just 200px as height.
Either align those hheights properly or set overflow to visible
Your wrapper is not high enough, specifically
<div class="wrapper clearfix">
<div class="carousel clearfix" style="position:absolute;">
<div class="panel">
<div class="details_wrapper">
This container cuts off your text. When you change to height to something more, say 400px; your text reappears! It is situated in this part of your CSS:
.carousel .panel .details_wrapper {
height: 400px; /* changed this height */
left: 25px;
overflow: hidden;
position: absolute;
top: 20px;
width: 175px;
}
Increase the height in your details_wrapper
Just add:
style="height: 400px"
And the problem is solved.
Use some color other than White.
<h3 class="Lexia-Bold" style="color:black; overflow: auto; width: 100px; height:500px;">
I'm using the equal heights CSS trick as outlined on this page.
It was all working fine until today when I need to add a dialogue box inside one of the columns, which is absolutely positioned to take it out of the flow. The problem is that since the container has "overflow: hidden" on it, the dialogue is being cut off when it overflows.
Aside from bringing the dialogue outside of the container element, is there any possible way to get it to show via CSS?
Here's a small example demonstrating what I've mentioned.
<style>
.container { overflow: hidden; margin-top: 30px }
.col {
float: left;
padding-bottom: 2000px;
margin-bottom: -2000px;
border-right: 1px solid black;
width: 100px;
background-color: grey;
}
.col.third { border-right: none }
#div-a { position: relative }
#div-b {
position: absolute;
background-color: red;
width: 35px;
height: 350px;
bottom: 0;
right: 0;
margin: 5px;
border: 2px solid black;
}
</style>
<div class="container">
<div class="col first">
<p style="height: 100px">One</p>
</div>
<div class="col second">
<p style="height: 300px">Two</p>
<div id="div-a">
<!-- this gets cut off by the "overflow: hidden" on div.container -->
<div id="div-b">
Foo
</div>
</div>
</div>
<div class="col third">
<p style="height: 200px">Three</p>
</div>
</div>
You see that div#div-b is cut off at the top when it overflows in the div.container element.
Unfortunately what you want to do is impossible without bringing the dialogue outside of the container element.
Your best bet is to make the dialog element a sibling of the container and position it that way.
Unfortunately no... I don't think there's a way to circumvent overflow: hidden with absolute position. You may experiment with position: fixed, but you won't be positioning under quite the same conditions if you use it.
One option would be to place the content of your overflow:hidden container into a sub-container (a child div perhaps). Then, make the sub-container match the dimensions of the container and move the overflow:hidden from the container to the sub-container.
Then, you can make the dialog a child of the container (a sibling of the sub-container), and it will now exist in an element that does NOT have overflow:hidden.
I haven't tested this, and removing the overflow:hidden from the container may break your design. If that is the case, I would suggest doing as others have and moving the dialog box outside of the container entirely. This could even be done via Javascript if you don't have the option of putting the dialog box's code anywhere else. (Javascript could make the dialog box a child of BODY, or some other tag, when you need it displayed)