I am doing a very simple landing page using Bootstrap. The idea is to have a hero unit text element covering the entire page regardless of the window size. The width: 100%; CSS instruction works great, but height: 100%; has no effect – the hero unit element is still about 200px high and is attached to the top of the window. How do I set hero unit's height to 100%? Thanks in advance.
You have to set the height:100% on html and body tags, and if the hero div has a parent, it'll need that as well.
Example http://jsfiddle.net/xExSE/
This seems to work ok:
<html>
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- css -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css" />
<style>
.hero-unit {
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div class="hero-unit">
<h1>Full Page Hero!</h1>
</div>
</body>
</html>
Related
I have a problem with my website, I want to have a picture named banner.png in the header, I am supposed to use header and not div, since this is html5.
this is the index.html file
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
This is the stylesheet
header {
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
I do find the picture when inspect element but it looks like the height is not working.
header {
/*DEMO*/background-color: red;
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
Question to yourself: 15% of what?
If you use the developer tools of your browser and select the html or body tag from the opened window, you will see that the html and body do not have any height. 15% of 0 = 0, so the header must have a fixed height, for example: 230px, or you can add this style in your CSS file:
Html,body {position:relative;height:100%;}
For the above percentage height to work with your header add
html, body {
height: 100%;
}
Or change the height on the header to padding bottom.
header {
padding-bottom: 30%;
}
The above answer will solve the issue, but if you for any reason want to set the height as % in your header, you need to set the size of the html to 100% so that the header gets 15% of it.
html{
height:100%;
float:left;
}
When you say height: 15%;, You mean the header should take 15% of it's parent. This will have no effect since you haven't set the height of the parent which is the body. You either have to give the body height or else use pixels instead of percentage
header {
height:100px; /*You can specify your size*/
}
You can make use of view units, vh for view height and vw for view width JS Fiddle
header {
height: 15vh; /* represents 15% of the view height, 100vh is 100% of the height*/
I finally found a solution: note that also width was not working
header {
background-color: red; /* red for DEMO */
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
html, body {
height: 100%; /* fix height*/
width: 100%; /* fix width */
margin: 0; /* fix width, or margin: 0 -5px; in header {} */
}
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
Another Post about this: Percentage Height HTML 5/CSS, it also mentions the use of height: 15vh;
<header> element position in html
It is invalid html to have a <header> element as a child of the <html> element. Your html is not valid accord to HTML5 specs.
You must move the <header> element to be inside the <body> element.
Part of what is happening here is that because the <header> element comes before the <body> element, the document model is forced to create a <body> element to contain <header> so your <body> element is being ignored.
Move your <header> tag to be within <body> and go from there.
Once that is fixed, then you can work on the sizing issue. Because the <body> element has nothing in it, the width will be 0. You can force it to fill the frame by giving body a width of 100% and your header image will work.
body {
width: 100%;
}
If you want the header to be 15% of the height of the visible window then change height to use the vh (viewport height) unit which is a percentage of the height of the visible window.
header {
[...]
height: 15vh;
}
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 thought I had CSS floats figured out but apparently I don't because I can't figure out why this page is behaving the way it is. I'd like for the photo and status divs to each take up 50% of the screen such that both of them appear on the same line and that line takes up 100% of the screen. But what is happening is that the "Stats" div renders below the "Photos" div. The only way I can get them to render on the same line is to reduce their respective widths to 49% (or lower) but then there's a slight gap between the right edge of "Stats" and the edge of the screen. There's something that's taking up additional room but I don't know what it is and I don't see anything in Chrome's Dev Tools. By the way, reset.css is just Meyer's reset.
Thanks.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../../reset.css" />
<link rel="stylesheet" href="base.css" />
</head>
<body>
<div class="content-main">
<div class="photos">Photos</div>
<div class="stats">Stats</div>
</div>
</body>
</html>
base.css
.content-main {
width: 100%;
}
.photos {
float: left;
width: 50%;
background: #cf6;
}
.stats {
float: left;
width: 50%;
background: #bbb;
}
I found my error. If add additional padding to each of the elements, that creates the problem. I left that out of my question so that code shown above will work. My bad.
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 have this simple code in css:
#main {
height: 100%;
min-height: 500px;
background-color:black;
overflow: auto;
}
and this simple html code:
<html>
<head>
<title>Benvenuti in Egnomia</title>
<link rel="stylesheet" type="text/css" href="./prova.css">
<body>
<div id="main">
</div>
</body>
</html>
If i resize the window ie 9 scroll bar doesn't work, the min-height (also for width ) are not matched.
Why? On chrome, firefox and all others work fine!!
If you add the HTML5 Doctype this problem is fixed.
<!DOCTYPE html>
<html>
<head>
<title>Benvenuti in Egnomia</title>
<link rel="stylesheet" type="text/css" href="./prova.css">
<body>
<div id="main">
</div>
</body>
</html>
IE9 renders websites using a compatibility mode unless a doctype is detected.
Actually if you add the html5 doctype the behaviour is just consistent across the browsers, it doesn't do what you originally set out to do.
To fix entirely add this to the CSS file
html, body
{
width: 100%;
height: 100%;
margin: 0;
}