I've read all the suggestions about how to fix this, but my site is still allowing users to scroll horizontally no matter what I do. I've gotten the horizontal scrollbar to be hidden, but using arrow keys or the mouse wheel still lets users scroll. I've tried to assign overflow:hidden on individual elements and on html. Nothing seems to work.
HTML:
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<div id="shapes">
<div id="design-shape"></div>
<div id="contact-shape"></div>
</div>
</body>
CSS:
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
position: relative;
vertical-align: baseline;
overflow-x: hidden;
}
#design-shape {
background: none repeat scroll 0 0 #e98e82;
position: absolute;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
height: 1040px;
top: 1200px;
left:50%;
width: 5000px;
margin-left: -2500px;
z-index: 6;
}
#contact-shape {
background: none repeat scroll 0 0 #333333;
position: absolute;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
height: 800px;
top: 1960px;
left:50%;
width: 5000px;
margin-left: -2500px;
z-index: 17;
}
What's Going On
In Chrome, you can scroll sideways, which shows things that you don't want shown. This is despite not having a horizontal scrollbar.
The reason is that the shapes that extend over to the side are absolutely positioned, and their parent #shapes is not positioned relatively or absolutely, so it can't catch them. To fix this, we need to absolutely position #shapes, and set position:relative to #shapes's parent, #page Add a few fiddly bits to ensure that everything is positioned correctly and we are good to go.
Code
CSS:
#page {
position:relative;
}
#shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
There is two classes (shown below) that have a width: 5000px; and a margin-left: -2500px. Removing/changing that should fix the problem for you.
#design-shape {
background: none repeat scroll 0 0 #e98e82;
position: absolute;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
height: 1040px;
top: 1200px;
left:50%;
width: 5000px;
margin-left: -2500px;
z-index: 6;
}
#contact-shape {
background: none repeat scroll 0 0 #333333;
position: absolute;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
height: 800px;
top: 1960px;
left:50%;
width: 5000px;
margin-left: -2500px;
z-index: 17;
}
EDIT:
Adding position: relative; to the shapes style should work.
#shapes {
overflow-x: hidden;
position: relative;
}
Related
I am using a preloader before the website loads. also, I want to make sure that there is no scrolling happening or any scrollbar present while the contents are loaded. I'm using the below code.
<div id="preloader"></div>
#preloader
{
position: fixed;
overflow-y: hidden !important;
-webkit-scrollbar: none;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../images/preloader.gif) center no-repeat #fff;
}
But still there is scrollbar visible and the page is scrollable.
I would add a class to the <body> during loading and remove once completed.
body.loading {
overflow: hidden;
}
enter code he
body.loading{overflow:hidden}
#preloader
{
position: fixed;
overflow-y: hidden !important;
-webkit-scrollbar: none;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../images/preloader.gif) center no-repeat #fff;
}
<div id="preloader"></div>
re
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 am trying to achieve two fixed banners on either side of my sites wrapper. I have used absolute positioning to attach the banner divs to each side of the wrapper and have set a fixed background within each so the banner follows the users down the page.
I seem to be having issues setting the background position of the banners, the background position does not seem to be relative to the parent div. I would like the banner backgrounds to be centered within the divs.
Code and example site
<style>
.page-container {
position: relative;
background: #FFF;
width: 970px;
margin-left:auto;
margin-right: auto;
background-color:#F00;
}
#left-bg {
width: 306px;
height: 100%;
position:absolute;
top: 0px;
left: -306px;
background:url(http://www.superfreeslotgames.com/basecamp/L-Leovegas-banner.gif);
background-position: center center;
background-attachment: fixed;
}
#right-bg {
width: 306px;
height: 100%;
position:absolute;
top: 0px;
right: -306px;
background:url(http://www.superfreeslotgames.com/basecamp/R-Leovegas-banner.gif);
background-position: top center;
background-attachment: fixed;
background-position: center right;
}
</style>
<div class="page-container">
<div id="left-bg"></div>
<div id="right-bg"></div>
</div>
change your CSS like this:
.page-container {
position: relative;
background: #FFF;
width: 970px;
margin-left:auto;
margin-right: auto;
background-color:#F00;
}
#left-bg {
width: 306px;
height: 100%;
position:absolute;
top: 0px;
left: -306px;
background:url(http://www.superfreeslotgames.com/basecamp/L-Leovegas-banner.gif) no-repeat 100% 0;
}
#right-bg {
width: 306px;
height: 100%;
position:absolute;
top: 0px;
right: -305px;
background:url(http://www.superfreeslotgames.com/basecamp/R-Leovegas-banner.gif) no-repeat 100% 0;
}
Also, unless you're doing it by design, you should consider changing right: -305px; (which I also changed from your column because it adds a 1px blank space to the left of the column) to right:0
i created a maze and i want to center an inside div
although i center it with margin: 0 auto; it won't work
(this div shows sad smily face when user enter the wall and lose)
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
display: none;
margin: 0 auto;
}
here is the fiddle link:
http://jsfiddle.net/uqcLn/28/
If you're going to use absolute positioning you need to do it like this:
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -225px 0 0 -225px;
display: none;
}
Edit: you also need to add position:relative; to the main div. Here is an updated fiddle.
http://jsfiddle.net/FragJ/2/
It looks off because you have other elements that aren't exactly centered.
EDIT: As I stated earlier, the smiley didn't look centered because your code is off. The maze really should be inside a div itself. However I was able to eyeball center it simply by playing with the margins.
http://jsfiddle.net/FragJ/4/
To achieve this you'll need to set your css like this:
#main {
position: relative;
width: 550px;
height: 550px;
float: left;
margin-left: 220px;
margin-top: 100px;
background: grey;
overflow: hidden;
}
#highlight_win {
width: 550px;
height: 550px;
position: absolute;
top: 50%;
left: 50%;
display: none;
margin: -180px 0 0 -180px;
}
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -180px;
display: none;
}
.outer {
height: 600px;
width: 500px;
background-color: black;
}
.inner {
height: 200px;
width: 200px;
margin: auto;
position: relative;
top: 200px;
background-color: red;
}
markup
<div class="outer">
<div class="inner">
</div>
</div>
The idea is for fixed sized block elements, setting
margin:auto;
fixes horizontal centering
for vertical central alignment the child's top = half the height of the parent - half the height of the child