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.
Related
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
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 have a quick question, I'm making a simple html document, with an image that I want to fill the entire page.
For some reason, it wants to create a border around the image. I've tried border="0"; and padding 0px 0px 0px 0px;
Here is the code in which I have: (You can also check it out live if you prefer www.kidbomb.com/chefwannabe)
<!DOCTYPE html>
<html>
<head>
<title>Pre-Order Now!</title>
</head>
<body>
<img style="width: 100%; overflow:hidden;" src="http://www.kidbomb.com/chefwannabe/chefwannabepreview.png" />
</body>
</html>
Add the following CSS in your code. Default body will give some margin and padding. So better whenever you start new work, add this style in your css for getting the proper result.
body
{
padding:0;
margin:0;
}
Instead of using the img tag, set the background-image property of the body tag so it encompasses the entirety of the page.
body {
background-image: url("path/to/image.jpg");
height: 100%;
width: 100%;
}
MyPage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Color Flash Cards</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div id="header">
<div id="title">
<h1>Color Flash Cards</h1>
</div>
</div>
</body>
</html>
index.css
body{
background-color: #31859C;
margin-left: 0px;
margin-top: 0px;
overflow-x: hidden;
}
#header{
margin-top: 0px;
height: 120px;
background: #9838CE;
}
#title{
margin-top: 0px;
}
result:
Where is the margin that is at the top (above the purple) coming from? And what do I need to do to get rid of it? I could use negative values for margin-top to do it but is that the "real" solution here?
All headings have a default margin that can be canceled out with:
h1 {
margin: 0;
}
Demo:
I would recommend using a css reset code like this one if you want to avoid these quirks and style them yourself.
One of two things might be causing this:
Padding in the body? Add padding: 0; to body.
The top margin on the H1. To combat this add overflow-hidden; to #header
Adding overflow: hidden to the #header will cause the header DIV to contain it's contents (including the margin on the H1).
Set the margin of h1 tag to 0:
h1 { margin: 0; }
See jsFiddle demo.
Try setting the margins of html to 0 as well.
html {
margin:0;
padding:0;
}
Two things:
You might want to add
body{
padding:0;
}
but that's not the real issue, its the H1 tag that is spoiling the layout
add this to your css
h1{
margin-top:0;
}
here is a little fiddle
use reset css for default browser setting will be reset.
http://meyerweb.com/eric/tools/css/reset/
enter code here
Something weird is happening.
I've a basic html code. html, head, body.
(As I've received some negative votes, here's the full code)
<html>
<head>
</head>
<body>
</body>
</html>
This is my css:
html {
background-image: url(background.png);
background-repeat: repeat;
margin-top:-8px;
}
body {
background-image: url(telefonillo.png);
background-repeat:no-repeat;
}
This is what chrome and firefox shows:
How can I fix this?
I tried to "Inspect" with firefox, and tried to remove the "background.png" from HTML, then the "telefonillo.png" shows up.
Tried "z-index:1" on body, but isn't working, as it isn't content at all.
Edit: I also tried removing all the divs, and other css, incase there was some kind of problems between any rules, but it's still happening.
Why don't you use before like this
body:before {
content:"";
background:url(background.png) no-repeat top left;
width:100%;
height:100%;
}
body {
background:url(telefonillo.png) no-repeat top left;
width:100%;
height:100%;
}
Perhaps you need to add the following tags inside the head of the html document:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Anyway, this has helped me with weird issues like this in the past. I hope it helps someone out there!