I know that if any value is inherited it would show in the inspector.
<!DOCTYPE html>
<html>
<head>
<style>
div#outer {width: 500px;}
div#inner {text-indent: 10%; color: blue;}
/*p {width: 200px;}*/
</style>
</head>
<body>
<div id="outer">
<div id="inner">
This first line of the DIV is indented by 50 pixels.
<p>
This paragraph is 200px wide, and the first line of the paragraph
is indented 50px. This is because computed values for 'text-indent'
are inherited, instead of the declared values.
</p>
</div>
</div>
</body>
</html>
I think the width of div#inner is inherited from div#outer, but it shows up in computed column not in style as something inherited. Why? Do I misunderstand something?
Width isn't inherited. An in-flow block box with auto width expands to fit as much horizontal space as its containing block allows, but that's not the same thing as inheritance.
Inner html dom element will always cover it's parent's width , considering that no change is there in display properties of child.
Related
I am using core-animated-pages. Some of the the content on the pages will need to be scrolled. I want to set the background color for the pages and I want the background color to cover the scrolled area and not just the current viewport. How do I accomplish this?
More specifically I have:
<core-animated-pages flex transitions="cross-fade-all">
<div>Some small content</div>
<div>Some long text that will need to be scrolled</div>
<div>Another page</div>
</core-animated-pages>
So how do I style so that the background color will cover the scrolled text?
#jeff provides a large part of the answer in specifying relative on the div. Additionally I used the following CSS to position the element clear of title bar above and to ensure the background covers the reminder of the page.
#instructions {
background: #FFF59D;
min-height: calc(100vh - 200px);
top:+30px;
padding:10px;
width:calc(100% - 24px);
}
The pixels subtracted from the % values and the top:+ allow for a menu bar at the top and the padding on the body -- these will need to be adjust depending on the height of the menu bar and the padding.
Now I would like to wrap the divs in paper-shadow but I find when I do this I lose the background. How can I apply a paper-shadow effect to the divs?
The <content> within <core-animated-pages> is styled with position: absolute + top/right/bottom/left: 0. You're not providing the rest of your HTML structure and any other styles that you have defined, but I'm assuming that's what's causing what you're seeing.
Try styling the DOM element that represents the page to use position: relative (you can do this by assigning it the Polymer-shorthand relative attribute):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer core-animated-pages Demo</title>
<style>
core-animated-pages > div {
background-color: orange;
}
</style>
</head>
<body>
<script src="//www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="//www.polymer-project.org/components/core-animated-pages/core-animated-pages.html">
<core-animated-pages selected="1" transitions="cross-fade-all">
<div>Some small content</div>
<div relative>
<h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1>
</div>
<div>Another page</div>
</core-animated-pages>
</body>
</html>
Im a newbie to CSS and created this html file for my testing...but the results are not what I expected..
Here are my questions,
What would be the correct width of my IE window.
What would be the perfect height of my window..When I specify a value nothing changes.
I have created 3 divisions- Header, Footer and content..When I view it..there is a big space between each of these sections..Why do they occur?
Code follows:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
width:1400px;
height:1000px;
}
h1
{
color:orange;
text-align:center;
}
#div-1
{
background-color:red;
}
#div-2
{
background-color:Green;
}
#div-3
{
background-color:Blue;
}
</style>
</head>
<body>
<div id="div-1">
<h1>Header<h1>
</div>
<div id="div-2">
<h1>Content<h1>
</div>
<div id="div-3">
<h1>Footer<h1>
</div>
</body>
</html>
The width on your body tag should be set to "width: 100%;" This will cause the body tag to take up the entire width of the window, and your colored div sections will also stretch the full width.
You can set the height on the body tag to either "height: 100%;" or "height: auto;". Depends on what you are doing exactly.
The space is coming from your h1 tags you have inside each of those divs. They have a browser-defaulted margin set to them. If you set the css property to "margin: 0px" that should eliminate all that extra space.
First, you don't define the width or height of the window in CSS. It just doesn't happen. You may specify the width of particular elements on your page, but that is a slightly different matter. Remove your height and width properties.
Second, your divisions have spaces between them due to the default margins that are set on h1 tags. If you want to remove them, then set margin: 0 on your h1 in your CSS.
Third, you may want to check out this CSS tutorial at HTMLDog
I have this fiddle
http://jsfiddle.net/JsZ9q/5/
I am trying to get the div with the 'b' letters to have its left edge be up against the right edge of the div with the 'a' letters.
The trick is, in the actual application, the left property of the left div is not set (meaning its left position will change), and there is variable number of a characters (meaning its width will change).
Update -- i added some more divs to be more clear. In all cases, I want the 'right' div to have its left edge up against the right edge of the left div, which can vary in width due to its content. Also, not shown, is that the left property of the left div can vary across rows.
Try:
<html>
<head></head>
<body>
<div>
<div style="display:inline">b</div>
<div style="display:inline">a</div>
</div>
</body>
</html>
Note: Span are inherently inline:
The above should behave the same as this:
<html>
<head></head>
<body>
<div>
<span>b</span>
<span>a</span>
</div>
</body>
</html>
Edit: Based on fiddler
Remove the absolute position from div's in the style sheet.
Don't put white space between the div's this includes newline (as multiple white space will be replaced by a single space but this has size).
<div style="top:10px">
<!-- ^^^^^ No absolute here -->
<div style="display:inline">aaaa</div><div style="display:inline">bbbb</div>
<!-- ^^^^^^ No Space here -->
</div>
See here:
http://jsfiddle.net/sNqpP/ Where I have changed it for the first line aaaabbbb but not for the others.
Your solution:
http://jsfiddle.net/JsZ9q/9/
Add float: left;, replace position: absolute; with position: relative; to make this work, and set margin-left (or left) to 0. You can ignore the clear attributes - I only added that for readability.
Btw, this example screws with the basic reasons CSS was separated from HTML - HTML creates the structure; CSS provides the styling.
At no point should you EVER use the style attribute in your HTML, especially since the divs have a width that is only defined at runtime and you're only running this in CSS (no JS). And finally, avoid absolute positioning as much as possible.
Float does this:
.left {
float:left;
}
.right {
float:left;
}
http://www.w3schools.com/cssref/pr_class_float.asp
Or am I missing something in your question?
If you must use absolute positioning, you need to know the width of the leftmost div. That would involve some JS. Let me know if thats your problem.
use a wrapper for positioning: I Forked your Fiddle
You need to have a parent object with a width in order to float child objects right next to each other: http://jsfiddle.net/alanweibel/6aGbU/
<style type="text/css">
.wrap
{
width:100%;
}
.left
{
float:left;
}
</style>
<div class="wrap">
<div class="left">aaaa</div>
<div class="left">bbbb</div>
</div>
Here is my code:
i am assuming am doing something wrong, but am expecting the padding on the right to also be 2px?
<!DOCTYPE html>
<html>
<head>
<style>
div{border:solid 1px gray;}
#outer{width:200px; padding:2px;}
#inner{width:100%;}
</style>
</head>
<body>
<div id="outer">
<div id="inner"> </div>
</div>
</body>
</html>
Render:
Your problem is that you have specified the size of the inner box to be the same size as the outer box. Set the width to auto and your problem goes away.
The padding makes an extra invisible box around your object, so the actual size of the outer is more than 200. However, inside it is 200. Same with the border. On the inner box, when you then specify it to be 100% it will be 200px, but the border will take up 2px, making an offset that makes it look like the padding is not being applied.
div is a block level element, which by definition will expand to take up the full width of its parent container taking into account any margins, padding and borders. specifying the #inner width to 100% is effectively the same as setting it to 200px. Just remove the width declaration and you'll be all set.
We have a div with static positioning. Inside we have a paragraph with a margin.
The height of the div will be the paragraph without the margin
We have a div with float:left. Inside we have a paragraph with a margin. The height of the div will be the paragraph plus its margin.
What is the explanation of this?
Here is the html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nivel1">
<div id="nivel21">
<p>Este es el primer parrafo</p>
</div>
<div id="nivel22">
<p>Este es el primer parrafo</p>
</div>
</div>
</body>
</html>
And the CSS code:
body {
margin:0;
padding:0;
}
#nivel1 {
border:solid;
border-color:#333;
margin:0;
background-color:#0F3;
margin:2em;
}
#nivel21 {
margin:2em;
float:left;
background-color:#C00;
}
#nivel22 {
margin:2em;
background-color:#FC0;
}
And here is a link to the test site.
After several edits, I think I have got the answer now :)
I have also experienced this puzzling behaviour. I think part of the explanation is in section 10.6.7 of the CSS2.1 spec:
In certain cases (see, e.g., sections 10.6.4 and 10.6.6 above), the height of an element
that establishes a block formatting context is computed as follows:
If it only has inline-level children, the height is the distance between the top of the
topmost line box and the bottom of the bottommost line box.
If it has block-level children, the height is the distance between the top margin-edge of
the topmost block-level child box and the bottom margin-edge of the bottommost block-
level child box.
Those "certain cases" listed in section 10.6.6 include floating elements.
The #nivel21 element in the question is a floating element, and it contains block-level children (a <p>), therefore this special-case rule is applied and the height of the <div> is calculated using the top and bottom margin-edges of the <p> tag.
Secondly, this page about collapsing margins may give a clue as to why the height of #nivel22 does not include the margins of the <p> tag:
The [...] margin-top on the p element effectively becomes the top margin of the div element, and pushes the div down the page [...]
The <p> tag has an implicit margin (10px in my tests), which needs to collapse with the 2em margin of the outer #nivel1 element, so for this reason the browser pretends that the <p> tag has no margin at all (it puts it on #nivel22 instead), which means that the height of #nivel22 shrinks down to the line-height of the <p> tag.
I hope this answer makes sense to someone other than me!
I think When you use the float property the browser pads the element to show is floating.
Well, since there is no question and no clear naming of your elements i'll just assume you want to put 2 columns in a container.
Cleaned up code with some more clear naming and use of classes results in this:
(hope this is what you were looking for)
<html>
<head>
<title>divs</title>
<style>
.container{
float: left;
background-color: #0F3;
}
.column {
margin: 2em;
float: left;
padding: 5px;
}
#lefty{
background-color: #C00;
}
#righty{
background-color: #FC0;
}
</style>
</head>
<body>
<div class="container">
<div id="lefty" class="column">
<p>Column number 1</p>
</div>
<div id="righty" class="column">
<p>Column number 2</p>
</div>
</div>
</body>
</html>
This happens because of the interaction of the two divs. Remove the floating one, the static one will shrink. What happens is, the floating div pushes the text in the static div down, thus expanding it.
More comments: The paragraph tag is irrelevant here. You can achieve the same effect by removing the paragraph margin and increasing the margin for the elements themselves. Either way, the statically positioned element would grow while the floating one would not. Same thing with this CSS:
body {
margin:0;
padding:0;
}
p {
margin: 0;
}
#nivel1 {
border:solid;
border-color:#333;
margin:0;
background-color:#0F3;
margin:2em;
}
#nivel21 {
margin:5em;
float:left;
background-color:#C00;
}
#nivel22 {
margin:5em;
background-color:#FC0;
}