I am creating snippets of HTML that later I convert to PNG (I am using IMGKit to do this).
My current HTML markup looks like this:
<html>
<head><title>Test</title></head>
<body>
<div class='snippet'>
...
</div>
</body>
</html>
Right now, even if I set the following CSS:
.snippet {
width:160px;
height:600px;
}
When inspecting the DOM, I noticed that the HTML element it is much wider than its contained DIV. I would like the HTML and Body tag to be exactly the size of that div, so that when I render to PNG the final width and height are 160x600.
What is the correct way of doing this in CSS? Do I need to add width and height attributes to both HTML and Body elements?
You can't change the size of the <html> tag. Its not possible. The html tag dimension is defined as the browser view-port. you can however change everything else by applying the css style: display: inline-block; like so:
body, div {
display: inline-block;
}
Related
body {
background-color: red;
}
<body>
<div>Hello World!</div>
</body>
So the background-color: red; applies to whole page height but when I inspect the page the height of the body is only up to the div containing Hello World!.
Someone please explain this why it is happening like this.
The main reason is because the HTML takes the background-color of BODY since:
The background of the root element becomes the background of the
canvas and covers the entire canvas [...]
So since the default background-color of HTML is transparent it will take the one from BODY. However applying a color to both the HTML and BODY elements you will see that the BODY background doesn't cover the whole page anymore.
html {
background-color: blue;
}
body {
background-color: red;
}
<html>
<body>
<div>Hello World!</div>
</body>
</html>
The background of the root element becomes the background of the
canvas and covers the entire canvas, anchored (for
background-position) at the same point as it would be if it was
painted only for the root element itself. The root element does not
paint this background again.
For HTML documents, however, we recommend that authors specify the
background for the BODY element rather than the HTML element. For
documents whose root element is an HTML "HTML" element or an XHTML
"html" element that has computed values of transparent for
background-color and none for background-image, user agents must
instead use the computed value of the background properties from that
element's first HTML "BODY" element or XHTML "body" element child when
painting backgrounds for the canvas, and must not paint a background
for that child element. Such backgrounds must also be anchored at the
same point as they would be if they were painted only for the root
element.
From W3 - 14 Colors and Backgrounds.
it's actually pretty logic. First of all <html> and <body> tags are required tags in a webpage. Where the <html> tag contains all of the <html> code the <body> tag holds all of the contents.
Consider this standard structure for a basic HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata and such -->
</head>
<body>
<!-- Where the content begins -->
<body>
</html>
The spec defines <html> as the root element of a document, and we can clearly see that in the above example: the element is the very top level of all other elements. The buck stops there because there are no more levels beyond that from which styles can be inherited.
From there, and make up the only two elements that fall directly inside . In fact, the spec defines directly in contrast to since those are the only two elements that need to be distinguished.
So, the bottom line here is that is the root element of a document where is a descendent contained within it. In fact, there is a :root selector in CSS. These target the exact same thing.
It's tempting to think that any styles we want to be inherited across the board should be applied directly to <html> because it is the root element of the document. <html> supersedes <body> in hierarchy, so it follows that it must contain all global styles.
But that's not exactly the case. In fact, inline attributes for the following were originally assigned to <body> in the spec:
background
bgcolor
marginbottom
marginleft
marginright
margintop
text
The background-color
There is a weird thing in CSS where the background-color on <body> floods the whole viewport even if the metrics of the element itself don't cover that whole area. Unless the background-color gets set on the html element, then it doesn't.
If flooding is the goal, it can be smart to just set it on the html element to begin with.
CSS tricks has a related post in merit link . It seems that body styles are expanded to html because:
html is the root element of a document where body is a descendent
contained within it. In fact, there is a :root selector in CSS. These
target the exact same thing
height you see in inspect is min-height That is equal height's element div, background-color change max-height That is equal 100% his parents(html).
For Example:
change min-height and run inspect and see result :
body {
background-color: red;
min-height: 200px;
}
<div>Hello World!</div>
So, You see height in inspect Change 200px; But color red cover whole page.
Body means all page that display in the browser. so you want give color only to div you can use either a id or a class to give a style to that dive. as in first answer.
<body>
<div class="some">Hello World!</div>
</body>
.some{
background-color: red;
}
or
<body>
<div id="some">Hello World!</div>
</body>
#some{
background-color: red;
}
.some{
background-color: red;
}
<div class="some">Hello World!</div>
try this, as if you give color to body the whole webpage will be colored
I noticed that the html tag won't change it's height or width. I was wondering if there was a way to do that or if the html tag will always fill the available space?
for example:
html{
width:300px;
height:300px;
background-color:blue;
}
You can set the dimensions of the html element in CSS just as you have done in your sample code. You can see that they are applied, e.g. by adding outline: solid red to rule.
Setting the dimensions does not have much effect, though. In particular, setting background color on html still affects the entire canvas. According to CSS 2.1 spec, section 14.2 The background, it is recommended to set background on body rather than html. If you set on html, it “becomes the background of the canvas and covers the entire canvas”.
And if you set background on body, a special rule applies, saying that the background will be used for the entire canvas (as if it had been set on html), if the html element has transparent background and no background image, which is the default. Thus, you can avoid the effect by also setting background on html. Example:
html {
background: white;
}
body {
width:300px;
height:300px;
background: blue;
}
I don’t see why you would do that, though. If you really want the page content appear in a 300 by 300 pixels box, the normal way is to wrap it in a div container and set dimensions and background on it:
<style>
.stuff {
width:300px;
height:300px;
background: blue;
}
</style>
<body><div class=stuff>Content goes here.</div></body>
I am studying on a tutorial how to create a tabless web template using HTML + CSS and I have a little doubt related to the following thing:
I have an header that contains a div having id=logo, something like this:
<div id="header"> <!-- HEADER -->
<div id="logo"> <!-- My Logo -->
<h1>My web site is cool</h1>
<p id="slogan">
My web site is finally online
</p>
</div>
......
OTHER HEADER STUFF
......
</div> <!-- Close header -->
And related to this #header div (and its content) I have the following CSS code:
/* For the image replacement of the logo */
h1 {
background: url(../images/logo.jpg) no-repeat;
text-indent: -9999px;
width: 224px;
height: 71px;
}
h1 a {
display: block;
width: 258px;
height: 64px;
text-decoration: none;
}
So this code put an image instead of the My web site is cool text that is in the tag.
I have some problem to understand the h1 a CSS settings, on the tutorial say that this CSS settings for h1 a:
Turns to block (from inline) the display mode of the link in the header, so I can set the width and height, and the image of the logo is now clickable
This thing is not very clear for me and I have the following doubts:
Have I to convert the a element (that is inline) into a block element to give it the same dimension of the underlying image (logo.jpg)?
Tnx
Andrea
Take this example,
an a element is inline by default, so if you were to do something like
CSS
a {background:red; height:210px; width:200px;}
HTML
test
You will notice that the width and height properties aren't working. Now for this element to be sized at that width, you need to set the element's display property to be either display:block or display:inline-block
JSFiddle Demo Example
HTML:
Without display:inline block, width and height set.
<br><br>
With display:inline block, width and height set.
<br><br>
With display:block, width and height set.
CSS:
a {background:#ccc; height:210px; width:200px;}
.inline-block { display:inline-block; }
.block { display:block; }
If you're linking an image, you don't need to give the a height/width or even a display:block. However, you really shouldn't be putting an image inside an h1 like that. You'd be better off making the a inside the h1 a block (using display:block) and setting the background to the image, then hiding the text. To the user of the site, there's not going to be much difference, but it removes images from your HTML code, makes it easier for screen readers, and is more semantically correct. So your code would be:
a { display: block; font-size:0; background-image:url("logo.png"); height:100; width:100 }
I know there's a lot of questions on this type of thing, but I haven't found one that answers my question. I have a "news feed" format site where you can filter the posts based on certain criteria. So, with some filters, you get content much taller than the browser window. With other filters, you can get no content.
When I use Webkit's Web Inspector, I see that an html {min-height:100%} does the trick for the <html> tag. I want the <body> to do exactly the same thing: be 100% when the content fits on the page, and expand otherwise.
However, I can't use a percentage height or min-height on the body when the height isn't set for <html>. It doesn't inherit a height to base its percentage off of. So what I end up with when the document has less than a full window of content is everything getting clipped off right and the foot of that content, which screws up my background and stuff.
Any ideas?
Maybe you can try something like this:
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#content {
min-height: 100%;
}
I hope this helps solve the issue
From the limited details it sounds like all you need is to add is:
html,body{ height: 100%; }
And I am guessing that your background is on the body tag.
My suggestion is to set the height of the body to 100%. 100% means, that it should take equally much space as its parent element. So, if your html tag does what it's supposed to, just let the body tag take the same size:
<html style="min-height: 100%">
<body style="height: 100%">
</body>
</html>
I feel like this is an easy question, but for whatever reason I can't figure it out today.
I need a div that always fills the entire page, no matter how large that page is. Then I need another div which I can re-size with javascript (mydiv.style.width = x; mydiv.style.height = y;).
If the second div is resized to be taller than the existing browser window height, the first div should resize to fit.
i.e. If the first div's background color is red, I should never see any white background color, because the first div always expands to the size of the entire page.
I tried this, it doesn't work because the red background doesn't expand to the size of the entire page:
example of the problem
I think Zack's alternate is the best answer: the body element IS a block-level element that always fills the entire 'page'. You can hook into it with JavaScript and CSS, just as you can with a div. Color your body element red and you'll never see white if your inner div is resized. If you don't want your CSS applied to every page in your site, add a class or ID to the body of the page you want to affect, and write your CSS to select only body elements with a specific class or ID.
Am I missing a requirement that's not addressed by using the body element?
I keep getting blasted by the CSS purists for this, but I recently solved this problem by using a table.
You need an outer div, set to "position:relative" and 100% height, and then you put a table inside, also 100% each way.
More explanation here: http://wondersofcomputing.blogspot.com/2009/07/table-height-browser-window-height.html
You're welcome to spurn the table solution. But then I can't help you.
how about something like this?
if (wholePageDiv.style.height < myDiv.style.height) {
wholePageDiv.style.height = myDiv.style.height + 10
}
An alternative -- if that background div only needs to be a color -- is to just set the body's background-color to whatever you need. Then you don't need to worry about any javascript resizing of the background.
Holy crap ive solved it, a FULLY CENTERED DIV, enjoy.
EDIT: minor cosmetic fix
Index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
body {text-align: center;}
p {width: 300px;}
.greenBorder {border: 1px solid green;}
.wrapperA { display: table; width: 1px; height: 1px; margin: 0 auto;}
.wrapperB { display: table-cell; #position: absolute; #top: 50%; vertical-align: middle;}
.wrapperC { #position: relative; #top: -50%;}
</style>
<script language="JavaScript" type="text/javascript">
function resize(id) {
var block = document.getElementById(id);
var htmlheight = document.body.parentNode.scrollHeight;
if (htmlheight > window.innerHeight) {htmlheight = window.innerHeight;}
block.style.height = htmlheight + "px";}
</script>
</head>
<body onload="resize('wrapper')" onresize="resize('wrapper')">
<div class="wrapperA greenBorder" id="wrapper">
<div class="wrapperB greenBorder">
<div class="wrapperC greenBorder">
<p>CENTERED CONTENT</p>
</div>
</div>
</div>
</body>
</html>