In order to translate an element completely out of view, I used transform: translate(0, -100%);. Its children however, if you resize the window compressing its height far enough, will gradually reappear. I have no clue why they do this, and I'd like someone to shed light on the reason why this happens. Here's the fiddle.
HTML
<body>
<div id="background">
<div id="circle1"></div>
<div id="circle2"></div>
</div>
</body>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#background {
background-color: red;
height: 100%;
width: 100%;
position: fixed;
transform: translate(0, -100%);
}
#circle1 {
background-color: yellow;
height: 500px;
width: 500px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
border-radius: 50%;
z-index: 0;
}
#circle2 {
background-color: aqua;
height: 400px;
width: 400px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
border-radius: 50%;
z-index: 1;
}
you have fixed heights for your cirecles (500px / 400px). When #background's height becomes less than that by resizing the window, the circles would overflow #background vertically.
The translatemovement by 100% refers to #background, so you still see the part of the circles that would overflow #background without the translate setting.
Related
i'm struggling with CSS trying to create special shape.
This is the shape i wanna create
enter image description here
Do you have any solution ?
Thank's
How about this:
div {
position: relative;
height: 300px;
overflow: hidden;
border-radius: 25px;
}
.bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-color: blue;
transform: skewY(-6deg);
transform-origin: top right;
border-radius: 25px;
<div>
<div class="bg"></div>
</div>
I want to center absolute position div that has max-width.
#confirmation-popup {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 500px;
height: 150px;
padding: 12px;
background-color: #4e4e4e;
}
This does not work in IE.
max-width doesn't work in IE. better use width or you can use translate technique.
here is the snippet:
#confirmation-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;
max-width: 500px;
height: 150px;
padding: 12px;
background-color: #4e4e4e;
}
<div id="confirmation-popup">this is demo</div>
If I have three divs, each with fixed position. How can I get .inner to appear above the .overlay?
HTML
<div class="container">
<div class="inner">The inner container</div>
</div>
<div class="overlay"></div>
CSS
.container {
position: fixed;
z-index: 1;
background: red;
height: 100px;
width: 100%;
}
.inner {
z-index: 3;
position: fixed;
margin-top: 10px;
width: 100%;
background: yellow;
height: 30px;
}
.overlay {
z-index: 2;
position: fixed;
background: blue;
opacity: 0.5;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
In this JS fiddle, you can see how the "yellow" element renders below the overlay. Is there any change possible while keeping the .container fixed?
http://jsfiddle.net/4ne83oa4/8/
Well, if you must keep the markup as is, you can just play around with some pseudo classes for the .container class.
Markup stays the same, the CSS chages a bit like this: check js fiddle
.container {
position: fixed;
background: red;
height: 100px;
width: 100%;
z-index: 1;
}
.container:after,
.container:before{
content: '';
position: fixed;
}
.container:after{
z-index: -1;
background: red;
height: 100px;
width: 100%;
}
.container:before{
z-index: 1;
background: blue;
opacity: 0.5;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.inner {
position: fixed;
margin-top: 10px;
width: 100%;
background: yellow;
height: 30px;
z-index: 1;
}
This is driving me nuts.
The situation is as follows.
I have 1 wrapper div that needs to span the entire width / height of the screen.
I need 1 div that is positioned on the right hand of the screen and has a fixed width (eg. 100px;).
Then the other div needs to span the remaining left half of the screen (no further !).
Note: I don't want to float the elements, I really need the divs to span the entire height of the screen, because a Google Map will be loaded into the div.
I am aware of the calc function in css, but I don't want to use it, because IE8 doesn't support it.
http://jsfiddle.net/gze4vcd2/
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
#wrapper{
position: relative;
width: 100%;
height: 100%;
background: greenyellow;
}
#left{
position: absolute;
left: 0;
width: auto;
background: blue;
}
#right{
position: absolute;
right: 0;
height: 100%;
width: 200px;
background: yellow;
}
This doesn't work at all.
I have tried all sorts of things, but I just can't get it to work.
Have you tried to use position: fixed for your #Wrapper
#wrapper{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: greenyellow;
}
#left{
background: red;
position: fixed;
left: 0;
top: 0;
height: 100%;
right: 100px;
}
#right{
background: blue;
position: fixed;
width: 100px;
top: 0;
height: 100%;
right: 0px;
bottom: 0px
}
Above is the updated code that works for me
I am creating a "light box" sort of effect. Without using JavaScript, how can I make the light box resize according to the viewport size so that it always stays in the center of the viewport and occupy 80% of the width and height?
<div class="fullscreen-dim">
<div class="dialog">
<img src="http://placehold.it/300x200">
<a class="close-button" href="#">CLOSE</a>
</div>
</div>
.fullscreen-dim {
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0; right: 0;
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%; // how to respect aspect ratio??
}
.dialog { // dialog should auto-size just big enough to wrap image
padding: 20px; // to create a "border" around the image;
position: fixed;
background-color: red;
left: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: 80%;
}
a {
position: absolute;
bottom: 5px; right: 5px;
}
In this method http://jsfiddle.net/3Lohtes9/ , the dialog resizes but the image does not respect aspect ratio.
This problem can also be interpreted as one of the "grandparent div" questions on SO. How can I set the image size with respect to full-screendim and let dialog to auto-size to fit?
EDIT: Instead of enclosing the img in the dialog div, I can achieve a similar visual effect of having the border around the image and still have the image resize accordingly when viewport size changes. However, I have no way to place the close button now. Any advice?
Change .dialog height from 80% to auto. See fiddle
.fullscreen-dim {
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
}
.dialog {
padding: 20px;
// to create a"border" around the image;
position: fixed;
background-color: red;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: auto;
}
a {
position: absolute;
bottom: 5px;
right: 5px;
}
edit:
try adding this if you want more control (like a min-height) or simply remove all height and width from .dialog:
width: auto;
max-width:80%;
height:auto;
max-height:80%;
min-height: 100px;
new fiddle
Using the information from this question, you can set the image to be aligned horizontally within the lightbox. Then by removing the height of the image, it will scale correctly with the aspect ratio.
The key CSS changes are here
img {
display: inline-block;
width: 100%;
vertical-align: middle;
}
/* This is a new element, see the question linked above. */
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.dialog {
padding: 20px; // to create a "border" around the image;
position: fixed;
background-color: red;
left: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: 80%;
white-space: nowrap;
text-align: center; margin: 1em 0;
}
And the HTML
<div class="fullscreen-dim">
<div class="dialog">
<span class="helper"></span>
<img src="http://placehold.it/300x200"/>
<a class="close-button" href="#">CLOSE</a>
</div>
</div>
See fiddle: http://jsfiddle.net/3Lohtes9/7/
Instead of all of this
.dialog { // dialog should auto-size just big enought to wrap image
padding: 20px; // to create a "border" around the image;
position: fixed;
background-color: red;
left: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: 80%;
}
try
.dialog { // dialog should auto-size just big enought to wrap image
padding: 20px; // to create a "border" around the image;
position: fixed;
background-color: red;
left: 10%; top: 10%;
right: 10%; bottom: 10%
}