So I've built my own custom modal box in backbone.marionette, but I'm running into the issue that every time I show() the modal, my page shifts down about half an inch. Very annoying. Anyone have ideas how to account for this or to fix it?
Here's my #modal and .overlay css:
#modal {
position: fixed;
top: 0;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
z-index: 1002;
width: 70%;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.85);
z-index: 1001;
}
Found a solution - If I set the modal's top property to 0 and give it a margin-top of whatever, then there's no annoying offset. Here's the final css I landed on:
#modal {
position: fixed;
top: 0;
left:0;
right:0;
margin-top: 2em;
margin-left:auto;
margin-right:auto;
z-index: 1002;
width: 70%;
}
Related
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 trying to make my loading screen cover the entire page even when the scroll bar is on!
.loading
{
position:absolute;
background: #CFECF9;
filter:alpha(opacity=50);
opacity:0.75;
z-index:20;
left:0;
top:0;
height:100%;
width:100%;
vertical-align:middle;
text-align:center;
}
To make an element cover the whole screen make it fixed:
.loading {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* Apply other styles */
}
Absolute positioned elements will only cover their parent container.
.loading {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
background: #CFECF9;
filter:alpha(opacity=50);
opacity:0.75;
z-index:20;
vertical-align:middle;
text-align:center;
}
I was able to make one div go to the stretch of the window size AKA fill the screen. Now I'm wondering how the rest don't overlap each other so I can scroll through each of them in order, retaining the centered text in each div as well? Right now, it's only displaying thing 3.
http://jsfiddle.net/592NY/1/
What I am trying to achieve:
Here is the annotated CSS:
/* Each of the divs and their independent backgrounds */
#thing1 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background: blue;
}
#thing2 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background: red;
}
#thing3 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background: green;
}
/* Centering the text */
#text {
width: 100px;
height: 100px;
margin: auto;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
}
You either have some logic I don't understand or you wish to go full 3D :D
The three divs have same z-index, none of them has it's opacity modified soo they'll simply appear in the order they appear in the HTML (if you move thing 3 before thing 2, thing 2 will be visible). Thing 2 is currently "on top" of thing 1 and thing 3 is on top of thing 2.
As I said 3D , you can use firefox's 3D view to see what's happening.
Update: you can use top: 100% for the second div and top: 200% for the third, which surprisingly seems to work even on IE.
http://jsfiddle.net/592NY/4/
http://jsfiddle.net/derekstory/592NY/2/
Remove the absolute and z index since overlapping is not desired.
html, body {
height: 100%;
}
#thing1 {
top:0;
left:0;
width:100%;
height:100%;
background: blue;
}
#thing2 {
top:0;
left:0;
width:100%;
height:100%;
background: red;
}
#thing3 {
top:0;
left:0;
width:100%;
height:100%;
background: green;
}
#text {
width: 100px;
height: 100px;
margin: auto;
top:0;
bottom: 0;
left: 0;
right: 0;
}
You are using absolute positioning and all three have the same z-index, so the last one will appear on top of the other two. If you reduce the z-index of the third item, then the second div will now be on top.
Ids must be unique on the page, so "text" should be a class.
http://jsfiddle.net/andrewgsw/592NY/5/
body, html {
height: 100%;
}
#thing1 {
position: relative;
height: 100%;
background: blue;
}
#thing2 {
position: relative;
height: 100%;
background: red;
}
#thing3 {
position: relative;
height: 100%;
background: green;
}
.text {
width: 100px;
height: 100px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
It is not necessary to specify width: 100% for DIVs, this is their default behaviour.
It is much neater to give these similar boxes a class, then colour them using their ids:
http://jsfiddle.net/andrewgsw/sMSPa/2/
body, html {
height: 100%;
margin: 0; padding: 0;
}
.things {
position: relative;
height: 100%;
}
#thing1 {
background: blue;
}
#thing2 {
background: red;
}
#thing3 {
background: green;
}
.text {
width: 100px;
height: 100px;
margin: auto;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
I try to add a box shadow and a gradient border using images and css pseudo-elements.
I tried that code:
.box:before {
content: url('box-shadow.png');
position: absolute;
width: auto;
height: auto;
max-width: 100%;
z-index: -1;
bottom: -9px;
line-height: 0;
}
.box:after {
content: url('box-border.png');
position: absolute;
width: auto;
height: auto;
max-width: 100%;
bottom: -5px;
right: 0px;
}
But the added images don't resize when the parent div resizes, whereas it works by adding the image manually.
See that fiddle http://jsfiddle.net/5TG3E/2/
I try from my side may be that's help you. Write like this:
.box:after {
content:'';
position: absolute;
z-index: -1;
bottom: -9px;
margin: 0 auto;
top:0;
left:0;
right:0;
background:url('http://dl.dropbox.com/u/4812171/box-shadow.png') no-repeat bottom center;
-moz-background-size:100% 9px;
background-size:100% 9px;
}
.box:before {
content:'';
position: absolute;
bottom: 0px;
right: 0px;
left:0;
top:0;
background:url('http://dl.dropbox.com/u/4812171/box-border.png') no-repeat bottom right;
}
Check this http://jsfiddle.net/5TG3E/6/
I'm trying to create a layout with a header and footer (both of which have a fixed heights) and a content-div between them that is fills the remaining space. Within the content-div I want to have divs with heights that are based on percent values (with the content-div's heihgt as parent). I can't figure out how to do this?
Here is an illustration of what I'm trying to accomplish.
[See it in action]
#header {
position:absolute;
height: 50px;
left:0;
top:0;
width:100%;
background:green;
}
#footer {
position:absolute;
height: 50px;
left:0;
bottom:0;
width:100%;
background:green;
}
#content {
position: absolute;
top:50px;
bottom:50px;
left:0;
width:100%;
background:#eee;
}
#box1 {
height:50%;
width:30%;
float:left;
background:red;
}
.header {
position: absolute;
height: 50px;
left: 0;
top: 0;
right: 0;
}
.footer {
position: absolute;
height: 50px;
left: 0;
bottom: 0;
right: 0;
}
.content {
position: absolute
top: 50px;
left: 0px;
right: 0px;
bottom: 50px;
}
.box1 {
width: 30%;
height: 50%;
}
For a solution where the footer sticks to the bottom of the screen or the bottom of the content (whichever is further from the top), check out Ryan Fait's "sticky footer". It's a lightweight and robust handful of CSS, and it's usually what you want for your layout.
http://ryanfait.com/sticky-footer/