Basically I am using the "Tryit Editor" from the W3 website and
this is the code I started out with
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url("img_tree.gif"),url("img_flwr.gif");
background-color:#cccccc;
}
</style>
</head>
<body>
</body>
</html>
I wanted to change the background color and background images so that they were only found on a div, not on the whole page. I also wanted to move the div around the page. I was able to make the div with the background elements, but I wasn't able to move it around the page. I used the following code, thinking that
top:150px;
left: 150px;
would have caused the div to change position
<!DOCTYPE html>
<html>
<head>
<style>
div
{
position=fixed;
top:150px;
left: 150px;
background-image:url("img_tree.gif"),url("img_flwr.gif");
background-color:#00dccc;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Alas, the div did not change position. What gives?
Thanks! :]
You have an equals sign rather than a colon in your position declaration which is causing the page to ignore it. Change that and it'll work!
EDIT: Thanks for fixing my awful terminology Pavlo, can't believe I did that :P
Your code is wrong. It should be
position: fixed;
Related
I am trying to design a web form in ASP.NET. In that I am trying to set a background color to different empty divs. Normally a simple html code like below works:
<html>
<head>
<style>
#header{
width:100%;
height:20%;
background-color:lightblue
}
#nav-bar{
width:100%;
height:5%;
background-color:lightgreen;
}
body,html{
margin:0;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="nav-bar">
</div>
</body>
</html>
But if I use this same snippet in ASP.NET, I fail to achieve the desired result. The browser displays nothing. My aspx code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server"><title></title>
<style type="text/css">
#header {
background-color: lightblue;
height: 20%;
width: 100%;
}
#nav-bar {
background-color: lightgreen;
height: 5%;
width: 100%;
}
body, html { margin: 0; }
</style>
</head>
<body runat="server">
<div id="header">
</div>
<div id="nav-bar">
</div>
</body>
</html>
So how can I set a background color to an empty div in ASP.NET? Any help would be much appreciated. Thanks!
The problem is that your #headerand #nav-barhave percentage heights. You'll see if you change them to pxdimensions, they empty div's still show up. So your problem doesn't have anything with ASP.NET it's just a CSS issue.
If you want the heights to be responsive to the user's screen, you should try the vhtag. This stands for viewport height. So if you have 20vhfor example, it will take up 20% of the users screen height.
See my updated JSfiddle:
http://jsfiddle.net/0mr9z6hy/2/
percentage heights may work differently across browsers
but one problem is you have no height specified on the body so the height is only really the height of the actual content of your page which is not much.
html, body{
height: 100%;
}
I'm developing chrome extension, I want to make border radius and use radius border propery in css, but it boder in child elemement.
My code html here :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="border-radius:10px">
<head>
</head>
<body>
content here
</body>
</html>
I want border as picture below :
http://postimg.org/image/8ct4dcq93/
Unfortunately, I don't think you can do it.
The frame around the popup page (highlighted in red in a graphics editor) is fully controlled by Chrome:
You can't change its shape / color, just like you can't change normal Chrome chrome (pun intended).
There is one to make the popup.html border-radius that to add another Div container to popup HTML, set the body background to none and give the background color to the div container. After that, you can give the radius to the container.
e.g
body {
background: none
}
.container {
background: green;
border-radius: 10px;
width: 50%;
height: 100px;
text-align: center;
}
<body>
<div class="container">
The content is here....
</div>
</body>
Your supposed to style the html tag, not the body tag.
html {
border: 5px solid rgb(200, 200, 200);
}
<!DOCTYPE html>
<html>
<header>
<link rel="stylesheet" href="popup.css">
</header>
<body>
<h1>Hello World!</h1>
<script src="popup.js"></script>
</body>
</html>
I just started learning HTML in order to get a summer internship. I'm writing a HTML note page as I go through the tutorials from HTML.net and I have a question about putting a white box around the body of my text. I'm currently working on learning CSS, just finished the basics of HTML5, and I made my page have a blue background, but I would like the body of my text to be white so it's easily read. I have the text body centered at 800px
You can do this in numerous ways. I'll give you one answer, even though I have not seen your code. Hopefully, you can relate this to your own code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
background-color: blue;
}
.mainContent {
background-color: white;
width: 800px;
text-align: center;
}
</style>
</head>
<body>
<div class="mainContent">Show your text here.</div>
</body>
</html>
I'm using CSS to change the background color for different sections of the page. Good luck! I hope this helps!
If you meant the text-color by "body of my text", then it can simply be done as following:
body{
background-color: blue;
color: white;
}
For learning CSS, this sheet should be very helpful: http://overapi.com/css/
I would do it like this:
CSS:
body{
background-color:#your blue here;
}
.bodyText{
background-color:#fff;
width:1000px;
margin:0 auto;
padding:20px;
}
HTML:
<div class="bodyText">
Your text goes in here.
</div>
Obviously, adjust the width, padding, colors, etc. to suit your needs, but this should get you started.
I cannot seem to remove the spacing between the top of the page and the <div> in this example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<style type="text/css">
html, body{
padding: 0;
margin: 0;
}
#container{
background-color: #808080;
}
</style>
</head>
<body>
<div id="container">
<div id="inner-container">
<h3>Index</h3>
</div>
</div>
</body>
</html>
I have narrowed it down to this line:
<!DOCTYPE html>
It seems removing this aligns the <div> to the top of the page. I can't see a way in CSS to achieve the same thing.
remove the margin from your <h3> as well
h3 { margin-top: 0 }
DEMO
Margins collapse into each other.
The top margin of html (0), body (0), #container (0), and h3 (not 0) merge into a combined non-zero top margin between the first content and the edge of the window.
Set h3 { margin-top: 0 } to remove it.
(Although you should start your document with a heading (h1) not a sub-sub-heading (h3).)
Actually Default Margin Of H1 to H6 is the problem you are facing so overriding this value will solve your problem.
h3 { margin-top: 0;margin-bottom: 0; }
Extra Info:
You also might want to look into using a CSS reset script before starting a project so you don't have to worry about little things like this.
I have a div that is absolutely positioned so I can place it overlapping an image. the problem is that the empty part of the div is making the image beneath it unclickable. in IE the image is still clickable but in FF or chrome its not/
Add position: relative; to the image. Here's an SSCCE, copy'n'paste'n'run it.
<!doctype html>
<html lang="en">
<head>
<title>SO question 2750416</title>
<style>
#overlap {
position: absolute;
width: 100%;
height: 61px;
background: pink;
}
img {
position: relative; /* Without it, the image disappears "behind" div */
float: right;
}
</style>
</head>
<body>
<div id="overlap">Overlap</div>
<img src="http://sstatic.net/so/img/logo.png" onclick="alert('Clickable!')">
</body>
</html>
You can't fix this through CSS alone. The easiest way is to set the div onclick event to the same function as your image onclick.
You can use the CSS4 experimental feature pointer-events:none on your absolute element. Problem with this feature is that it doesn't work in all browsers, only firefox and chrome as far as i know.
Just sharing a bit of information :)