I have the following HTML
<div class="first-use-overlay overlay-bg hide">
<div class="first-user-overlay-shell">
.....
</div>
</div>
and the following css
.first-user-overlay-shell {
width: 90%;
min-width: 1200px;
max-width: 1380px;
z-index: 1000;
overflow: scroll;
position: absolute;
top: 0;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.overlay-bg {
z-index: 105;
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: rgba(0,0,0, 0.8);
}
Basically, when I click a button it opens up an overlay with a div (first-user-overlay-shell) that is another page of the side.
I added a no scroll to the body of the page.
I'm trying to make it so that content inside first-user-overlay-shell scrolls though the body has a no-scoll css. How can I do that?
Just try this one, add 1 div after first-user-overlay-shell then add height or just check this fiddle.
Related
I have an iFrame, which I wish to align to the bottom right of the browser window. The following CSS actually achieves this in the first instance.
However, if the page the iFrame is initiated from has a horizontal scroll bar, the iFrame remains at the same vertical position.
.iframe {
position: absolute;
top: 100%;
right: 0%;
width: 535px;
height: 380px;
margin-top: -400px;
margin-right: 20px;
z-index: 999;
}
Is it possible to position is so its always aligned to the bottom of the browser window?
try with fixed position
.iframe {
position: fixed;
bottom: 10px;
right: 20px;
width: 535px;
height: 380px;
z-index: 999;
}
Remove margin and top, change right: 0 and add bottom: 0. Try this I hope it'll help you out. Thanks
.iframe {
position: absolute;
bottom: 0;
right: 0;
width: 535px;
height: 380px;
z-index: 999;
}
<iframe class="iframe"></iframe>
http://lucasdebelder.be/googledoodle/
I want to have the planet (bottom image) on top of the top image (the blue background/space). I have a main div class:"center" set on 'position: absolute' and around both of those images is separately a div wrapped with position: relative; but somehow they don't want to go and sit on top of each other, I've also tried it with z-index but that doesn't work either.
Thanks in advance.
Use these properties the planeet_achtergrond class:
.planeet_achtergrond{
position: absolute;
bottom: 150px;
}
I would recommend nesting the two images in a div then adding a class to each image. Then use margin: 0 auto to center the div to the page. This is my solution:
#googledoodle {
position: relative;
top: 0;
left: 0;
height:512px;
width:900px;
margin: 0 auto;
overflow: hidden;
}
.galaxy {
position: relative;
top: 0;
left: 0;
}
.planet {
position: absolute;
top: 380px;
left: 0px;
}
<div id="googledoodle">
<img src="http://lucasdebelder.be/googledoodle/images/galaxy.png" width="900" class="galaxy">
<img src="http://lucasdebelder.be/googledoodle/images/planeet.png" width="950" class="planet">
</div>
i changed all css. Here sample:
.center {
position: relative;
text-align: center;
width: 900px;
margin: auto;
overflow: hidden;
height: 500px;
}
.space_achtergrond {
width: 100%;
z-index: 0;
position: absolute;
height: auto;
bottom: 0;
}
.planeet_achtergrond {
width: 100%;
height: auto;
z-index: 100;
position: absolute;
bottom: -15px;
}
form {
position: absolute;
bottom: 15px;
z-index: 999;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
use overflow:hidden outer div.
if you want place divs inside a div with position:absolute, use position:relative for parent div.
if you want to stick a div bottom, use only bottom:0
I was wondering if there's a way to block the scroll bar until a div and its loader gets to the point of display none. I don't know if this can be done just with html or css. Any advice?
#loader {
background: #eeeeee;
bottom: 0;
height: 100%;
left: 0;
right: 0;
top: 0;
width: 100%;
display:block;
margin: 0 auto;
position: relative;
overflow: hidden;
z-index: 9999;
}
#loaderInner {
background:#eeeeee url(https://dl.dropboxusercontent.com/s/asdfghfdsas/loader.gif) center center no-repeat;
background-size: 250px 250px;
position: absolute;
height: 250px;
width: 250px;
display:block;
margin: 0 auto;
top: 50%;
left: 50%;
margin: -125px 0px 0px -125px;
}
body#layout #loader {
display:none;
overflow: scroll;
}
You can use some simple CSS to prevent scrolling on the page. But you would need to use JS to handle when to apply this class.
CSS
body.loading {
overflow: hidden;
}
Another solution is to put loader div with fixed position, so there's no need to hide the scrollbar (which can cause a strange user experience):
#loader {
position: fixed;
top: 0;
left: 0;
...
}
The div will show while scrolling
In this case you wouldn't need the "body.loading" rule.
The loader scrolling due to the positioning, so we can easily remove the scroll by changing the position css to position:fixed;
it will 100% work.......
#loader {
position: fixed;
background: #eeeeee;
bottom: 0;
height: 100%;
left: 0;
right: 0;
top: 0;
width: 100%;
display:block;
margin: 0 auto;
overflow: hidden;
z-index: 9999;
}
To me this is the best solution to delete the scroll bar while de Loader is display
html, body.loader {
overflow: hidden !important;
}
I need to create a div-element, which has 100% width and height for the visible part of the screen. Below this there should be another div-element with variable height, which can only be seen, if the user scrolls down. It is like a one-page website...
JSFiddle: http://jsfiddle.net/sopk6vx3/
#main {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#overlay {
display: none;
opacity: 0.8;
width: 100%;
height: 100%;
background-color: #000;
position: fixed;
top: 0;
left: 0;
}
#overlay section {
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
background-color: #FFF;
width: 94%;
height: 90%;
border-radius: 5px;
margin: 2% 3%;
}
<div id="main">
<header>Navigation</header>
<footer>Footer of main-element</footer>
</div>
<div id="tour">
Here is some tour-information about the product
</div>
<div id="overlay">
<section>Main Content</section>
</div>
Via click on a navigation element the #overlay will be fade in to show the content.
So how do I do the correct CSS for the #main and #tour element? As in the fiddle it doesn't work.
And could the overlay-css been optimized?
i would like to use a website with fixed header/footer and a scrollable div in between.
Only the div in the middle should scroll, no scrollbar for the whole site (that's why body overflow is hidden).
My attempt so far:
#container1 {display:block;padding-top:60px;overflow-y:scroll}
#container2 {display:none;padding-top:60px;overflow-y:scroll}
body{overflow:hidden}
The scrollbars are shown but too much on the right, also they are not scrollable?
PS: Unfortunately the switching between the DIVs don't work at JSFiddle, don't know why...
If the header and footer have explicit heights, it could be achieved simply by positioning the middle DIV absolutely and using top/bottom offsets with the respect to the height of the header/footer.
Then we can add overflow-y: auto to the middle DIV — Example:
#divLinks {
overflow-y: auto;
position: fixed;
top: 25px;
bottom: 40px;
width: 460px;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
}
#divLinks {
overflow-y: auto;
position: absolute;
top: 25px;
bottom: 40px;
left: 0; right: 0;
}
#page{height: 100%;width:480px;margin: 0 auto; position: relative;}
#header{position:absolute;top:0;left: 0;right: 0;z-index:998;height:25px;background:#5f5f5f}
#bottom{position:absolute;bottom:0;left: 0;right: 0;z-index:999;height:40px;background:#5f5f5f}
<div id="page">
<div id="header">Header</div>
<div id="divLinks">
<div id="container1">First<br><br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br></div>
<div id="container2"> second<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1</div>
</div>
<div id="bottom">First Page - Second Page</div>
</div>
The easiest way, in my opinion, is to use fixed elements, like this:
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
and
body {
margin: 0;
overflow: hidden;
}
header {
position: fixed;
top: 0;
left: 0;
background-color: red;
width: 100vw;
height: 2em;
}
main {
position: fixed;
top: 2em;
left: 0;
width: 100vw;
height: calc(100vh - 4em);
background-color: green;
y-overflow: auto;
}
footer {
position: fixed;
bottom: 0;
left: 0;
background-color: blue;
width: 100vw;
height: 2em;
}