I'm really new to coding so please be gentle and keep your answers simple!
I'm trying to add a button that will scroll the page horizontally by the full-screen width, however, my code is scrolling about 20px short.
Does anyone know why? And the fix?
Many thanks - code below.
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 400%;
}
button {
position: fixed;
}
</style>
</head>
<body>
<button
class="btn2", onclick="scrollWin((window.outerWidth), 0)">ᐅ</button><br><br>
<script>
function scrollWin(x, y) {window.scrollBy(x, y);
}
</script>
</body>
</html>
This is caused by the default margin set to the body tag. To set this margin back to 0,
body {
margin: 0 !important;
}
As it states in W3 in schools, the default margin set to the tag is 9 pixels, making it 18 pixels both wider and longer than desired, and thus complying with your statement,
my code is scrolling about 20px short.
Also, to prevent the browser from occasionally ignoring your manual margin setup, an !important is required.
Results: Click Here
Related
I don't know why but I can't make body{cursor:*any cursor*}. Maybe JS Fiddle doesn't support that but it sure supports it to any element so I'm probably wrong.
https://jsfiddle.net/5unnxjLa/
I don't wanna have to use a <div> covering the background to change it, I simply want it so that I can stop the mouse changing to the grab/text cursor when I drag the mouse on the body.
Well, either use html instead:
html { cursor:wait }
on JSFiddle
or set height: 100% on both html and body:
html, body {
height: 100%;
}
body {
cursor:wait
}
on JSFiddle
The cursor property will work on the body as well, but by-default the body only wrap your elements, so it will show the cursor only within the body.
Since you have added one element in the body the defined cursor is showing at the first line.
I think the problem you are experiencing is mainly due to the fact that the body wraps to the size of the content in it
your CSS seems to be fine otherwise.
Try adding the following to your CSS
html,body{
width:100%;
height:100%;
padding:0 0 0 0;
margin: 0 0 0 0;
}
Complete Solution
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
html,body{
width:100%;
height:100%;
padding:0 0 0 0;
margin: 0 0 0 0;
}
body{
cursor:copy;
}
</style>
</head>
<body>
Some Content
</body>
</html>
Note that hyperlinks or any other block you hover over might overwrite this so if this is not the desired effect replace the relevant block with
body{
cursor:copy !important;
}
The cursor property isn't directly supported on the body element as it only wraps the content of your page. Instead select the html element and it should work as expected.
html{cursor:wait}
https://jsfiddle.net/5unnxjLa/1/
Edit: If you set the width of the body to 100% and all contents within to 50%, the cursor would switch to 'waiting' only on the visible parts of the body element itself.
I am simply adding a header navbar to an html page.But the problem is its not aligned exactly to the top.There is a small gap between the browser and the navbar.I found a solution as setting margin:0;,but the issue I have is it will only work if I code it as by selecting the whole div... like
*{ margin:0;}
why is that so ?
I found this solution in another stackoverflow question but I cant comment and ask because I have low repuation.He is stating its because of SASS.But how is my code becoming sass because I was using normal simple procedure for CSS coding.
Linked soultion question.(Please check the comments in correct selected question)
Header not touching top of screen
My code :
<html>
<head>
<style>
* {
margin:0;
}
.new {
width:100%;
background-color: blue;
}
</style>
</head>
<body>
<div class="new">New Website</div>
</body>
</html>
Some browser have set user agent stylesheet at "body" tag
For Chrome: body have margin: 8; on body tag, so you will get a small gap between navbar.
You can set
body{
margin: 0;
}
Will solve your problem.
http://jsbin.com/luqoruqewa/edit?html,output
Don't put the margin: 0; on the div. Put it on the body or html tag. Like so:
body{
margin: 0;
}
Don't forget that you can style the html and body tags too! Making them height: 100%; might be of use in the future.
* is the universal selector. It targets all elements. When you state:
* {margin: 0}
You're removing the margin from every element on the page. That works in this case, but it will have side effects that you probably won't want on a page with more content.
Your browser is adding some padding to the body element. As amoyer pointed out, set the body margin to zero and you should be fine.
I am using chrome version 18.0.1025.162 m
I have html file with iframe within it.
i cant change the containing page or its css (main.htm)
i can only change the iframe (show.htm) and its css.
The problem is that when i scroll down and then scroll back up then the adminbar div get replicated several time.
I am attaching 2 screenshots the first one is the screen before scrolling and i also add the code so that the bug can be reproduced.
I think it may be a bug in chrome, i am not sure.
I would like to know if it is a a bug and more importantly if there is a work around by only changing the iframe and that it does not include removing the background color from the iframe.
(removing the background color from the iframe solve the issue but i need the background color)
so this is how it looks:
before scrolling:
after scrolling (admin bar get replicated on screen)
now code to reproduce the bug in chrome
first file - main.htm (i cannot change this code)
<!-- main.htm -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#adminbar
{
background-color: #464646;
height: 28px;
position: fixed;
width: 100%;
top: 0;
}
#body-content
{
float: left;
width: 100%;
}
</style>
</head>
<body >
<div id="body-content">
<iframe src="show.htm" width="100%" height="943"></iframe>
<div id="adminbar" class="" role="navigation">
</div>
</div>
</body>
</html>
and the show.htm
<!-- show.htm -->
<!DOCTYPE html>
<head>
<style type="text/css">
body
{
background: #e0e0e0;
}
</style>
</head>
<body>
<br/>
<p style='margin-bottom:500px;'>bazinga</p>
<p style='margin-bottom:500px;'>bazinga</p>
<p style='margin-bottom:500px;'>bazinga</p>
</body>
</html>
i think i found a workaround.
i created a file background.png which has one pixel with the color i want (#e0e0e0).
i then replace this:
body
{
background: #e0e0e0;
}
with this:
body
{
background: #e0e0e0 url(background.png) repeat-x;
background-attachment: fixed;
}
Add -webkit-transform: translate3d(0,0,0); to your body-content CSS
CSS
#body-content {
float: left;
width: 100%;
-webkit-transform: translate3d(0,0,0);
}
This seems to force Chrome to use your GPU and smooth out the rendering issue.
UPDATE: Since you can't change main.htm, what about changing the background color of show.htm to a background image of the same color? I tested this and it worked. Is that a possibility?
I recreated your setup and then added a script to the body of show.htm. As a quick measure I added a name="if1" to the <iframe /> in main.htm, but you could always find a handle on the element without using an explicitly assigned name.
It seems to solve the issue for the dummy setup that you provided, if and only if main.htm is scrolled all the way to the top. Think it's weird, join the club! See if this works for the real thing... Either way, it may just be a nudge in the right direction! :)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background: #e0e0e0;
}
</style>
</head>
<body>
<br/>
<p style="margin-bottom:500px;">bazinga</p>
<p style="margin-bottom:500px;">bazinga</p>
<p style="margin-bottom:500px;">bazinga</p>
<script type="text/javascript">
window.onscroll = function(){
console.log("It's 'Doctor' Sheldon Cooper!");
//parent.document.if1.document.body.style.webkitTransform = 'scale(1)';
var _parentScale = parent.document.body.style.webkitTransform;
parent.document.body.style.webkitTransform = _parentScale;
}
</script>
</body>
</html>
I also tried to experiment with the following until it became bed-time!
<script type="text/javascript">
window.onscroll = function(){
console.log("It's 'Doctor' Sheldon Cooper!");
//parent.document.if1.document.body.style.webkitTransform = 'scale(1)';
var _me = document.body;
_me.style.webkitTransform = _me.style.webkitTransform;
//_me.style.display='none';
_me.offsetHeight
//_me.style.display='block';
var _parent = parent.document.body;
_parent.style.webkitTransform = _parent.style.webkitTransform;
_parent.style.display=_parent.style.display;
_parent.offsetHeight
//_parent.style.display='block';
}
parent.window.onscroll = function(){
console.log("But. You're in my spot!");
//parent.document.if1.document.body.style.webkitTransform = 'scale(1)';
var _me = document.body;
_me.style.webkitTransform = _me.style.webkitTransform;
//_me.style.display='none';
_me.offsetHeight
//_me.style.display='block';
var _child = parent.document.if1.document.body;
_child.style.webkitTransform = _child.style.webkitTransform;
_child.style.display=_child.style.display;
_child.offsetHeight
//_child.style.display='block';
}
</script>
I also attempted to apply j08691's answer, using the following script, but it gave slightly unexpected results. I caused the absolute positioned top bar, to not be fixed, among other things!
window.onload = function(){
console.log("It's 'Doctor' Sheldon Cooper!");
var test = parent.document.getElementById("body-content");
test.style.webkitTransform = "translate3d(0,0,0)";
}
One may already exist, but if not, could you file this as a bug report on the relevent projects?
Improving / simplifying yossi's answer:
body
{
background:url('bg.png');
}
no need to declare bg-color or repeat-x, just needs a background image.
Tested on Chrome 18.0.1025.168, Mac OS X 10.6.8.
Remove the float: left; from your #body-content css and it will work just fine.
This looks to be a rendering bug in chrome. If you scroll back up really slowly, you'll notice that you get a solid colour from your admin bar as the colour of your iframe.
Incidentally chrome on OSX renders exactly the same.
#adminbar {
background-color: #464646;
height: 28px;
position: fixed;
width: 100%;
top: 0;
right:0px
}
#body-content {
float: none;
width: 100%;
}
It would help to get a live-demo/version of your actual website to do more thorough testing and sort the bug out.
In any case, I was able to reproduce the bug and then fix it (kind of):
Here's the 'show' css:
body
{
background: #e0e0e0;
height:100%;
width:100%;
z-index:9999;
position:fixed;
}
and Here's the link to my test page:
sotkra.com/t_main.html
last but not least, yes it is a bug and it caused by the flickering of the scrolling of the iframe content against the actual 'base' document. I've seen similar issues before but there was equally no documentation about it. They're just rendering bugs, usually caused by less than specific css or very very odd cases where it's nobody's fault save the browser's.
Cheers
G
Using a gradient as your background image also works. This is preferable for me, because I don't have to create an image file and it doesn't generate an extra request on the client side.
body {
background: #FFF -webkit-linear-gradient(top, #FFF, #FFF) repeat-x;
background-attachment: fixed;
}
Why does this create a veritcal scrollbar in IE6, IE7 and IE8? How to avoid it?
(I had a real applet in there, but I discovered that this heavily mutilated one gave the same result and helps simplify the test case)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Why vertical scrollbar in IE?</title>
<style>
HTML, BODY {
height: 100%;
}
BODY {
padding:0;
margin:0;
}
/* And yes I can use this, but I'd rather not
BODY {
overflow-y: hidden;
}
*/
</style>
</head>
<body>
<APPLET WIDTH = "100%" HEIGHT = "100%"></APPLET>
</body>
</html>
Above also available as http://www.morch.com/download/ieVerticalScrollbars.html
applet {
display: block;
}
To prevent rendering the applet as an inline-element, which enforces line-height rendering.
Add position: absolute; to the applet's style.
Try bringing the height down to 99% or 98%. Or try throwing in some more thorough reset CSS. Don't ever use overflow-y on a body element. Terrible usability.
Thing 1 -- CSS/overflow
Here are the CSS settings you can work with (if they help): http://www.w3schools.com/Css/pr_pos_overflow.asp
Thing 2 -- CSS-erize the scrollbar itself (i.e., turn it completely white, or whatever works for your page.: http://www.draac.com/css/csstricks.html (scroll down a ways)
I am using CSS Sprite Generator to create sprites for a web page I am working on, but it doesn't seem to work, and I don't know why...I guess it's something obvious but..!
So, I picked up 3 images, zipped, generated the PNG file (I checked out the result it is seems fine) and I got the following css classes back:
.sprite-welcom1 { background-position: 0 -30px; }
.sprite-welcom3 { background-position: 0 -109px; }
.sprite-3 { background-position: 0 -188px; }
So here is the HTML I am testing on, and for some reason all I get is a nice blank page:
<html>
<head>
<style>
.sprite-welcom1 { background-position: 0 -30px; }
.sprite-welcom3 { background-position: 0 -109px; }
.sprite-3 { background-position: 0 -188px; }
.sprite-bg {
background: url(csg-495a902b04181.png) no-repeat top left;
}
</style>
</head>
<body>
<div class="sprite-bg sprite-3"></div>
</body>
</html>
Any tips?
Don't use a generator. Take the time to do it yourself from scratch. Then next time you use this method, you'll know what to look for when something has gone wrong and you'll answer your own question, and heck, maybe someone else's on Stack Overflow.
This generator isn't producing any meaningful class names for your styles, which means if you go to edit them later you're not going to know two classes from Tuesday what's going on unless you've memorized the numbers. Meaningful names will save you headaches when you return to your stylesheet later on.
Open up Photoshop, GIMP, or almost any modern image editing software. Make sure your program has the rulers option switched on, and measure your element's background image coordinates this way. In the absence of rulers - which is probably a rarity, you could always fudge around with the MeasureIt Firefox extension and the .png opened in a tab.
Define a width and height for <div class="sprite-bg sprite-3">.
Your .sprite-bg rule for background-position, set as part of the composite rule for background (the top left part), has higher precedence than the stand-alone background-position setting for .sprite-3 because it appears later in the stylesheet.
Place the rule for .sprite-bg first.
the div is empty. put something inside. like space ( ).
You have to declare a height and width for the div element. That's it.
Hrm, not quite sure what you're trying to achieve here. The multiclassing seems a bit messy. I've posted my method of spritemaps below, see if this does what you need. Usually this involves a combination of elements, the most common being an unordered list with links for navigation, but for this purpose it's just divs.
Also don't forget the order of background-position.
background-position: |top| |left|;
That's screwed me up a couple of times. Finally, A List Apart has a great article on Sprite Maps (http://www.alistapart.com/articles/sprites/)
<html>
<head>
<style>
.sprite-container div {
background: url(csg-495a902b04181.png) top left no-repeat;
width: 20px; //width is neccessary
height: 20px; //height is neccessary
}
.sprite-3 { background-position: 0 -188px; }
.sprite-4 { background-position: -20px -188px; }
</style>
</head>
<body>
<div class="sprite-container">
<div class="sprite-3"></div>
<div class="sprite-4"></div>
</div>
</body>
</html>
As others have mentioned, your sprite-bg element needs to have either some content to give it a height / width, or have those properties specified in the css, thusly:
.sprite-bg {
background: url(csg-495a902b04181.png) no-repeat top left;
width: 100px; /* (or whatever the width should be) */
height: 100px; /* (or whatever the height should be) */
}
As someone else mentioned, I'd move the rules for the .sprite-welcom1, .sprite-welcom3 and
.sprite-3 to beneath the main .sprite-bg in the stylesheet.
For some reason, Firefox 3 sometimes wants 2 classes in the CSS Selector to make the sprite map work. My hunch is that the rules of specificity are causing problems while the sprite map loads. By adding the additional class, it works correctly.
/* Bad */ .childClass2 { background-position: -10px -20px; }
/* Good */ .parentClass1 .childClass2 { background-position: -10px -20px; }
It's always good to “namespace” your CSS with a parentClass, to avoid unexpectedly styling a DOM tag someplace else. Here are some additional enhancements to everyones ideas from above.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.sprite-container div {
background: transparent url(//www.yourDomain.com/csg-495a902b04181.png) no-repeat scroll 0 0;
width: 200px; /* width is necessary */
height: 20px; /* height is necessary */
}
.sprite-container .sprite-3 { background-position: 0 -188px; }
.sprite-container .sprite-4 { background-position: -20px -188px; }
</style>
</head>
<body>
<div class="sprite-container">
<div class="sprite-3"></div>
<div class="sprite-4"></div>
<!-- Empty divs are fine! Unless you *really* want text on top of
your sprite map. :o) Btw: is invisible when a hyperlink
is wrapped around it.   is not... it creates an
underscored hyperlink. Use which is a soft-hyphen.
-->
</div>
</body>
</html>
This code works in: IE 7, Firefox 3, Google Chrome 1, Opera 9 & Safari 3.
Tip: Avoiding http:// in the URL will allow the sprite map to be served up from both http:// and https:// connections.
(Scroll to the right to see the “no-repeat scroll 0 0;” )