the box model putting layouts together with css. the box model how would you describe a box? ...
TRANSCRIPT
THE BOX MODEL
Putting layouts together with CSS
The Box Model
How would you describe a box? Container? Tags or elements are “containers”
<p> </p> puts the text it contains into paragraph form.
Box Model
content edge or inner edge
The content edge surrounds the element's rendered content.
padding edge
The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The padding edge of a box defines the edges of the containing block established by the box.
border edge
The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge.
margin edge or outer edge
The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge.
The perimeter of each of the four areas (content, padding, border, and margin) is called an "edge", so each box has 4 edges:
Box Model diagram
Example in Class
Applying the Box model Adding an image Floating Note some differences between Firefox
and IE Useful for seeing the immediate results
http://www.w3schools.com/css/tryit.asp?filename=trycss_text-indent
Box Model properties
Padding Negative values CSS shorthand: top right bottom left
Margin Border
dimension
Width Height
Positioning
The Positioning properties allow you to specify the left, right, top, and bottom position of an element.
It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area.
Normal Flow
Default behavior of a web browser Rendered according to what order the
elements (like <div> and <p> are listed in the html.doc)
Example with float
Positioning: Four Ways of Placing
Static Absolute Relative Fixed
position: static;
Static positioning is simply placing a box in the normal flow.
Default behavior of an unpositioned box Rarely used except to override anotehr rule
position: absolute
NOT in the normal flow Positioned relative to the element that
contains it. (if there is no element, it will be
positioned relative to the <body> tag)
position: relative;
Positioned to the normal flow Relative to original position
position: fixed;
Relative to browser, not containing block. Pulls out of the normal flow. “carved into rock” Wont resize
Positioning properties
Floating
In the normal flow Allows text to flow around the box. Can’t be manipulated like other
positioned boxes with left: 20; etc.
Floating boxes
Determines where object is relative to the parent flow.
selector {float: right ;}
Possible values: left | right | top | bottom | inside | outside | start | end | none
Floating<style type="text/css"> p { width: 24em } #l1 { float: left;
width: 8em; height: 3em }
#l2 { float: left; width: 4em; height: 6em }
#r1 { float: right; width: 6em; height: 9em }
#l3 { float: left; width: 7em; height: 9em }
#r2 { float: right; width: 3em; height: 5em }
</style>
Length Units
{margin-right: 24px } The number can be an integer or a
decimal fraction, and can be preceded by + or -.
Units can be absolute or relative: Absolute: mm, cm, in, pt, pc (millimeters,
centimeters, inches, points, picas) Relative: em, ex, px (the element's font
height, the element's x-height, pixels)
Z-index
Z-index is used to specify the stacking order of the positionable elements.
The number value may be positive or negative, but MUST be an integer.
Default z-ordering of elements in a document is back-to-front in the order of their appearance in the HTML.
An element with property z-index: 3 is going to overlap a z-index:1
Overflow
Scroll Auto Hidden Visible
p{ overflow: auto;width: 200px;height: 300px;}
IE, i.e. “headache”
Box model discrepancies. CSS Standards determine that
“width” = width of content IE versions before 6 see it differently
“width” = padding+border+width of content
Box Model Hack: IE hack
The name says it all. Just remove the padding/borders from the problem box, nest a second box inside the first, and put the padding/borders and the content within that nested box. End of problem.
It looks like this if you are using two divs: div { width: 100px; } div .i { padding: 1em; } <div>
<div class="i"> Text </div> </div> If used while you have two nestled elements anyway,
then the only negative effect of this solution (a single extra div in the HTML) is a non-issue. The major benefit of this method is that it works just about everywhere.
Validating your CSS
http://jigsaw.w3.org/css-validator/validator-uri.html