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>
Related
How can I change the color of a certain section in a web page ?
It is located above the footer. I want to make like 10px height and width that takes all the page. i will include social icons in that space.
How can I do that?
You can just add a class to the element you want to style. Let's say you want to change the background of a <section> element and the height and width you need, you can add a class="mysection"
Then you can add a CSS file or a style tag at the head of your HTML document with the following code:
.mysection {
background-color: red;
width: 100%;
height: 10px;
}
You can add a <div> tag or <section> tag. While applying styles in HTML, it should mention inside the <style> tag in the header section
Example
<html>
<head>
<style>
#test {
background-color: red;
}
</style>
</head>
<body>
<div id="test">
Test
</div>
</body>
</html>
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%;
}
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;
I suspect this has alerady been asked, but I could not find a way to solve my problem with previous answers, or I didn't have the ability to do it (I started to study CSS ten days ago).
So I want to emulate a paper page similar to the ones shown in Adobe Reader or MS Word: a white shadow rectangle against a gray background. My requirement, though, is that, since I'm going to display it in a browser, I want to fit the page vertically, leaving a fixed-pixel-sized small margin on top and bottom.
So far, I have got the code below, which do not expand vertically. I have already got the page to look ok with maximized window using height:99%, but then the bottom margin keeps changing size, and I didn't like the effect. I want the bottom margin with fixed-sized pixel dimensions.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- TODO: Expand page vertically but leave fixed top and bottom margins -->
<meta charset="UTF-8" />
<title>Relatório Html</title>
<style type="text/css">
html {height: 100%}
body {
height: 100%;
background-color: #ccc;
}
.paperpage {
position: relative;
width: 400px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:10px;
padding:30px;
background-color: white;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<div class="paperpage">
<p>Content</p>
</div>
</body>
</html>
Try position: absolute; and top: 10px; bottom: 10px;
Like in This Example
You also can do this dinamically:
<body>
<div class="paperpage" id="paperpage">Try this</div>
</body>
<script type="text/javascript">
altura = window.document.height;
document.getElementById('paperpage').style.height = (altura - 20) +"px";
</script>
I'm trying to create a border inside an image instead of outside of the image. I want to do this because I would like to put some alpha value on the border so that i can see the image through the border.
I tried placing a div a few pixels smaller than the image around the image and then setting "overflow:none". The border is now inside the image, but when i apply alpha to the border nothing can be seen through the border because overflow is set to none.
On the other hand. If i don't set "overflow", then the border won't show up.
I want something like this:
Tested in firefox and ie8 (no opacity yet in ie8, but you can use a filter for that):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
.imgcontainer{padding:0; position: relative;
display: inline-block; overflow: hidden;}
.imgcontainer img{display:block;}
.borders, .borders2{position: absolute; width:100%; height:100%;
border: 4px solid #000;}
.borders{opacity: .5;}
.borders2{bottom: 4px; right: 4px;}
</style>
</head>
<body>
<div class="imgcontainer">
<div class="borders"><div class="borders2"></div></div>
<img src="img" />
</div>
</body>
</html>
This creates a 4px transparent border, but that can easily be changed.
Because the opacity only affects the absolute positioned divs the image doesnot become transparent. Two border-divs are needed in this example because this way the image size is variable, if your images always have the same size you could do this with only one.
jsfiddle: http://jsfiddle.net/Xb37w/2/
You can use a wrapper with negative margins and rgba(255,255,255,.5) as border-color.