So I am currently creating a video game using HTML, CSS, and JavaScript. I am working on the design of the page, and I am having a problem. My page has a lot of empty space under it, and creates a huge unused portion of the page that you scroll down to. Is there anyway to stop it from scrolling down?
Here is my code:
* {
overflow: hidden;
}
body {
background-color: antiquewhite;
}
#fullcanvas {
border: 6px double black;
}
#title {
position: relative;
color: darkgreen;
font-family: sans-serif;
font-size: 30px;
border: 0px solid black;
border-width: 0px;
bottom: 667px;
left: 20px;
}
#game_rules_canvas {
position: relative;
border: 10px solid black;
border-width: 8px;
bottom: 678px;
left: 20px;
border-right-style: dashed;
border-left-style: dashed;
height: 400px;
width: 300px;
}
Using your css and recreating the elements referenced as div's doesn't seem to replicate your issue. See here: jsfiddle
The following rule should be stopping all scrolling:
* {
overflow: hidden;
}
Sounds like you've either got other code being used or javascript causing an issue. Things I would do to try and diagnose:
Add overflow: hidden!important; to see if that overrides the problem
Right click and inspect the empty space to see it's styles and what element it's referencing. (<html>, <body>, <other>, etc).
Remove the javascript to see how the page renders.
If you can provide more of your code, or even screenshots, it would help.
Related
.leftside {
padding: 16px;
background-color: #0E1E2B;
border-bottom-left-radius: 50%;
}`
I made a design for a website page and I want to add the background above in the header using HTML and CSS. in this same background I also added it right-side, here I'm adding the CSS code that I tried. I can not understand how to create a background like this!
Use clip-path. This site generate some figures. Site link: https://bennettfeely.com/clippy/
You can also do this by using pseudo elements and the border CSS property.
Example of the theory behind how this works here: How CSS triangles work
Codepen link: https://codepen.io/thechewy/pen/eYVMLGM
.leftside {
width: 18rem;
height: 10rem;
background: red;
position: relative;
}
/** triangle **/
.leftside:after {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 0;
border-bottom: 10rem solid white;
border-right: 100px solid transparent;
}
<div class="leftside"></div>
Here's what you may try or start with:
#shape {
width: 200px;
border-top: 120px solid #ec3504;
border-left: 60px solid transparent;
}
<div id="shape"></div>
Alternative options would be to use javascript library or even do in Html 5 canvas.
I have a number of buttons in a div that refused to stay in a fixed position when the div scrolls, and I cannot see why. I have done this elsewhere so I should be able to do it, but I'm going around in circles today.
I have isolated enough of the application to reproduce it easily. It places a div in the centre of the screen and puts a small quit button in the top-right. I want the button (and all my others) to remain fixed relative to the div. What am I missing?
<!DOCTYPE html>
<html>
<head>
<title>Scroll</title>
<meta charset='utf-8'/>
<style>
div.dt-baseContainer {
width: 50vw;
height: 50vh;
min-width: 400px;
min-height: 300px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
position: absolute;
border-radius: 20px;
overflow: auto;
}
div.dt-container {
background-color: lightblue;
border: 3px solid royalblue;
text-align: center;
}
button.dt-quit {
border-style: solid;
border-radius: 4px;
border-color: inherit;
width: 20px;
height: 20px;
background-color: white;
color: red;
font-weight: bold;
font-size: 12px;
text-align: center;
margin: 0;
padding: 0;
z-index: 20;
top: 5px;
right: 5px;
position: absolute;
cursor: pointer;
}
</style>
</head>
<div class='dt-baseContainer dt-container' id='dt_container'>
sdfsdf1<br>sdfsdf2<br>sdfsdf3<br>sdfsdf4<br>sdfsdf5<br>sdfsdf6<br>sdfsdf7<br>sdfsdf8<br>sdfsdf9<br>sdfsdf10<br>
sdfsdf11<br>sdfsdf12<br>sdfsdf13<br>sdfsdf14<br>sdfsdf15<br>sdfsdf16<br>sdfsdf17<br>sdfsdf18<br>sdfsdf19<br>sdfsdf20<br>
sdfsdf20<br>sdfsdf21<br>sdfsdf22<br>sdfsdf23<br>sdfsdf24<br>sdfsdf25<br>sdfsdf26<br>sdfsdf27<br>sdfsdf28<br>sdfsdf30<br>
<button id='dt_quit' class='dt-quit' title='Stop'>X</button>
</div>
</html>
[Edited] Of course, position:fixed; is not relevant unless it's fixed relative to the screen so I removed the mention. But I c=still cannot get this simple thing to work.
I hate having to answer my own question, but this was me being silly ... of course.
The suggestion above that my transform was the problem is a red herring. It is basically not possible to fix an element relative to its container in a scrolling flow.
The solution was to put both my scrolling div and my buttons inside an extra containing non-scrolling div. Not only does this make sense -- the container encapsulates both scrolling and non-scrolling content without having to put the latter inside the former -- but my initial code was very nearly there.
Taking my existing dt-baseContainer class and putting it on an outer div fixes the problem.
I'm attempting to build a progress bar, fairly simple. I have a bar nested inside a tray. The tray has overflow: hidden and border-radius set on it.
Here's the jsFiddle demonstrating the problem.
As you can see in the image, there is a jagged artifact on the left side of the progress bar. It appears the anti-aliased edge of the parent progress bar (dark background) is bleeding out. The desired behavior is that the bar/fill element is used for anti-aliasing the progress bar.
A brief solution I tried was absolutely positioning the inner div, but the progress bar needs to be able to animate from 0 to 1%, and that looks off without the overflow: hidden clipping.
I see this artifact both Chrome and Firefox so I don't immediately suspect it's a bug in Webkit.
I would also note this bug also affects Bootstrap's progress bars, but when the tray is a light color and the background is a light color, the artifact is much harder to spot.
Adding an extra wrapper helps mitigate your issues with 0 & 1%:
http://jsfiddle.net/p197qfcj/11/
HTML
<div class="outer-tray">
<div class="tray">
<div class="fill"></div>
</div>
</div>
CSS
body {
background: #ccc;
}
.tray {
/* overflow: hidden; */
height: 20px;
background: #000;
border-radius: 50px;
height: 30px;
width: 100%;
border: none solid transparent;
background-color: black;
}
.fill {
background: #fff;
width: 10%;
border-radius: 100px;
left: -1px;
position: relative;
float: left;
box-sizing: border-box;
border: 1px solid white;
top: -1px;
height: 32px;
}
.outer-tray {
overflow: hidden;
border-radius: 100px;
overflow: hidden;
display: block;
}
EDIT:
The only way I can think of is if you removed the overflow and applied a lower border-radius around the gray-progress which will slightly overlap the black.
http://jsfiddle.net/p197qfcj/7/
.tray {
height: 20px;
background: #000;
border-radius: 100px;
height:30px;
width:90%;
}
.fill {
background:#eee;
width:10%;
height:100%;
border-radius: 12px; /* still occurs without this! */
}
I am implementing SVG-edit into my website. It is designed to be full screen, but I have shrunk it to fit on my page, and changed some CSS to make this work, most importantly, putting it inside of this div.
#master_editor_container {
position: relative;
height: 600px;
border: 1px solid #ccc;
background: #ABCDEF;
}
I have a button, that when clicked, should cause flyout buttons to have it's display: none removed and appear on the screen next to the button that was clicked to activate them. The elements are on the HTML document. I have used inspect element after activating them to be sure there is no display: none applied. I have applied the highest z-element to the flyout buttons and their container. I have applied all the position relative, absolute, and fixed in several combinations to the button and it's containers. I have even used opacity: 0.9 to try to push the flyout buttons up.When I remove "position: relative", the flyout buttons are visible, but of course, svg-edit overflows the box I'm trying to contain it in.
Here is all the directly relevant CSS, however there are several moving parts. For the full HTML, see this pastebin. For the full CSS, see this pastebin. To see an example of what it should look like, see the original at the latest stable version
This is the div containing the button to activate the flyout
#tools_left {
position: absolute;
border-right: none;
width: 32px;
top: 40px;
left: 1px;
margin-top: -2px;
padding-left: 2px;
background: #D0D0D0; /* Needed so flyout icons don't appear on the left */
z-index: 4;
}
This is CSS applied directly to the flyout button container
.tools_flyout {
position: absolute;
display: none;
cursor: pointer;
width: 400px;
z-index: 1;
}
This is CSS applied directly to the flyout buttons themselves
.tools_flyout .tool_button {
float: left;
background-color: #E8E8E8;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
height: 28px;
width: 28px;
}
According to comments, this is necessary to keep the flyouts sized properly
.tools_flyout .tool_button,
.tools_flyout .tool_flyout {
padding: 2px;
width: 24px;
height: 24px;
margin: 0;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
z-index: 9999;
}
Given what I'm trying to achieve and what I've tried, what might be causing these buttons not to display?
Another acceptable answer would be to suggest a way to keep svg-edit project inside of a div without using a container with "position:relative".
I want to make the download button (#bluebutton) go down about 35 px into the following div to give the effect of overlapping the two divs (clickable) being in the middle(closer to the social buttons).. How can I accomplish this? I want a cleanest way possible. Thank you so much for your help. I can supply more pics if needed. a fiddle is very very appreciated =)
just put this css to your blue button div
#bluebutton {
width: 60%;
color: white;
text-align: center;
background-color: #05afcd;
border: 1.5px solid #505050;
margin: auto;
height: 70px;
font-size: 36px;
margin-bottom: -35px;
z-index: 9999;
position: relative; /*** add position relative *******/
zoom: 1; /*** add zoom:1 for ie old browsers *******/
}
here is demo fiddle of your code:
http://jsfiddle.net/jkkheni/FM99D/
Just add this
#bluebutton {
margin-bottom: -35px;
}
If you have any issues with being able to click it in the gray background area..
just add
#bluebutton {
z-index: 9999;
}
I have created a CodePen with the relevant parts from your code.
On it I have done the following modification on the styles (marked with comments):
#bluebutton
{
width: 60%;
color: white;
text-align: center;
background-color: #05afcd;
border: 1.5px solid #505050;
margin: auto;
height: 70px;
font-size: 36px;
position: relative; /*<---*/
top: 35px; /*<---*/
}
You can see it after the modification at this new CodePen.
Here's a fiddle I made for you.
http://jsfiddle.net/B9UvD/1/
Basicly, what you need to is to take the box from its natural flow. You do this by applying this to your #bluebutton:
position: relative;
top: 20px;
(btw, try to name the button to something more universal and descriptable. You don't know if you want the blue button to be red or something in the future. #download-button could be a better name)