Post on 06-Jul-2020
CSS – Box Modelby Susan L. Miertschin
Based on:
http://www.html.net/tutorials/css/http://www.html.net/tutorials/css/
Lessons 9 through 14
Positioning Elements ‐ LayoutPositioning Elements Layout
• Before CSS – tables were used to positionBefore CSS tables were used to position elements and lay out pages
• CSS introduced• CSS introduced– the position property
d b l i i i– and absolute positioning
Absolution PositioningAbsolution Positioning
• Normally content of elements flows onto pageNormally content of elements flows onto page sequentially
• Absolute positioning removes the element• Absolute positioning removes the element from the normal flow
I d i i i l i h l f• Instead positions it relative to the top, left, right, or bottom margins of its containing bl k l l l ( /block‐level element (e.g. <p></p> or <body></body>)
Absolute PositioningAbsolute Positioning ExampleThings to note:
This is an XHTML document
This is an example of an embedded style sheet
The style definition is in the <head></head> section
Z‐index property controls layering –when items overlap, which one do you want on top?
Absolute Positioning ExampleAbsolute Positioning Example
• Things to note:
Each <p></p> element is using its class attributep /p g
Change the z‐index element values in the style definition and observe the results
ResultResult
Relative PositionRelative Position
• Elements are positioned relative to otherElements are positioned relative to other elements in the flow of the page
• Keeps elements in the general flow of• Keeps elements in the general flow of elements on the page
Relative PositioningRelative Positioning ExampleThings to note:
Embedded style sheet (again)
ex refers to x‐height
X‐height is a relative‐length measurement equal to the height of a lowercase x in the applied font
Inline versus Block‐Level ElementsInline versus Block Level Elements
Inline‐Level Elements Block‐level ElementsInline‐Level Elements
Do not change the flow of elements within the
Block‐level Elements
• Displayed on its own line
• Has a virtual “box” around itdocument
span
Has a virtual box around it
• div
• pimg
a
em
• h1 through h6
em
strong
Relative PositioningRelative Positioning ExampleThings to note:
Embedded style sheet (again)
ex refers to x‐height
X‐height is a relative‐length measurement equal to the height of a lowercase x in the applied font
Relative PositioningRelative Positioning ExampleThings to note:
Span is a grouping element
It does not imply any structure to its contents
Its purpose is to apply CSS rules or id attributes to its contents
Span is an inline‐level element
ResultResult
The Box Model in CSSThe Box Model in CSS
Example MarkupExample Markup<h1>Article 1:</h1>
ll h b i<p>All human beings are born free and equal in dignity and rights. They are endowed with yreason and conscience and should act towardsand should act towards one another in a spirit of brotherhood</p>brotherhood</p>
What the Browser DoesWhat the Browser Does
• Each element is in its own box
• Each box has top, b d ddmargin, border, padding
properties ‐ and content• Each element has four• Each element has four sides – right, left, top, and bottom
• Property values are set with css
Example ‐ Set Margins of the b d /b d l h<body></body> Element With CSS
body{{ margin‐top: 100px;margin‐right: 40px;margin right: 40px;margin‐bottom: 10px;margin‐left: 70px; }margin left: 70px; }
body { margin: 100px 40px 10px 70px; }
Example – Set Margins of the <p></p> l hElement With CSS
body { margin: 100px 40px 10px 70px; } p { margin: 5px 50px 5px 50px; }p { g p p p p ; }
PaddingPadding
• Think of it as "filling“Think of it as filling
• Does not affect the distance of the element to other elementsother elements
• Defines the inner distance between the b d d h f h lborder and the content of the element
What Effect From Padding?What Effect From Padding?Heading Elements Without Padding Heading Elements With PaddingPadding Heading Elements With Padding
Example – Set Padding With CSSExample Set Padding With CSS
h1h1{b k d llbackground: yellow;padding: 20px 20px 20px 80px; }h2{background: orange;padding‐left:120px; }padding left:120px; }
BordersBorders
• decorative elementdecorative element
• to underline
i f hi• separation of two things
• many options– Width with border‐width
– Color with border‐color
– Style with border‐style
Example – Set Up Borders With CSSExample Set Up Borders With CSSh1{ border‐width: thick; border‐style: dotted; border‐{ border width: thick; border style: dotted; bordercolor: gold; }h2{ border‐width: 20px; border‐style: outset; border‐color: red; }p { border‐width: 1px; border‐style: dashed; border‐color: blue; }color: blue; }ul{ border‐width: thin; border‐style: solid; border‐{ ; y ;color: orange; }
What it Looks Like – <h1></h1> lelement
h1h1{border‐width: thick;b d t l d tt dborder‐style: dotted; border‐color: gold; }
What it Looks Like ‐ <h2></h2> lelement
h2h2{border‐width: 20px; b d t l t tborder‐style: outset; border‐color: red; }
What it Looks Like ‐ <p></p> elementWhat it Looks Like <p></p> element
pp {border‐width: 1px; b d t lborder‐style: dashed; border‐color: blue; }
What it Looks Like ‐ <ul></ul> elementWhat it Looks Like <ul></ul> element
ulul{border‐width: thin; b d t l lidborder‐style: solid; border‐color: orange; }
Get Complicated if You LikeGet Complicated if You Likeh1{ border top width: thick;{ border‐top‐width: thick; border‐top‐style: solid; border‐top‐color: red; border‐bottom‐width: thick; border‐bottom‐style: solid; border‐bottom‐color: ;blue; border‐right‐width: thick; border‐right‐style: solid; border right color:solid; border‐right‐color: green; border‐left‐width: thick; border‐left‐style: solid; border‐left‐color: orange; }
Element DimensionsElement Dimensions
• Width and HeightWidth and Height
Make a Box With a Div and CSSMake a Box With a Div and CSS
div.Box{ height: 500px; width: 200px;border: 1px solid black;border: 1px solid black; background: orange; }
<div class="box">volgus rectum videt<div class= box >volgus rectum videt, … plagosum mihi parvo Orbilium </div>
What the Browser DoesWhat the Browser Does
Floating ElementsFloating Elements
• Float to the rightFloat to the right
• Float to the left
fl• Property: float
• The element box with contents floats either right or left in the containing element’s box
Float a Box Within a Box With CSSFloat a Box Within a Box With CSS
#picturep{ float:left; width: 100px; }
<body><div id="picture"> <img src="bill.jpg" p g jpgalt="Bill Gates"> </div><p>causas naturales et antecedentes<p>causas naturales et antecedentes, idciro etiam nostraruml t t </ >voluntatum...</p>
</body>
What the Browser DoesWhat the Browser Does
Create Structure with XHTMLCreate Structure with XHTML
<div id="column1"> <p>Haec disserens<div id= column1 > <p>Haec disserensqua de re agatur et in quo causa consistatnon videt </p> </div>non videt...</p> </div><div id="column2"> <p>causas naturaleset antecedentes idciro etiam nostrarumet antecedentes, idciro etiam nostrarumvoluntatum...</p> </div><div id="column3"> <p>nam nihil esset in<div id column3 > <p>nam nihil esset in nostra potestate si res ita se haberet </p> </div>haberet...</p> </div>
Layout Columns with CSS FloatsLayout Columns with CSS Floats
#column1#column1{ float:left;width: 33%; }#column2#column2{ float:left;width: 33%; }#column3#column3{ float:left;width: 33%;}
Clear PropertyClear Property
• Used to control how the elements that followUsed to control how the elements that follow floated elements behave
• By default elements that follow are moved up toBy default, elements that follow are moved up to fill available space resulting from the float
• Clear values: left right both or none• Clear values: left, right, both or none
• The principle is, if clear, for example, is set to both for a box the top margin border of this boxboth for a box, the top margin border of this box will always be under the lower margin border for possible floating boxes coming from abovepossible floating boxes coming from above.
Example of ClearExample of Clear<div id="picture"> <img src="bill.jpg" alt "Bill Gates"> </div>alt="Bill Gates"> </div><h1>Bill Gates</h1><p class="floatstop">causas naturaleset …etiam nostrarum voluntatum...</p>
#picture{ float:left; width: 100px; }.floatstopp{ clear:both; }
What the Browser DoesWhat the Browser Does
Positioning Elements With CSSPositioning Elements With CSS
• Place an element exactly where you want it onPlace an element exactly where you want it on your page
• Positioning + Floats = many possibilities• Positioning + Floats = many possibilities
• Basic Principle: top‐left coordinates with (0,0) b i h l fbeing the upper left corner
Example – Position a Heading ElementExample Position a Heading Element
h1{ position:absolute; top: 100px;top: 100px;left: 200px; }
Absolute PositioningAbsolute Positioning
• An element which is positioned absolute doesAn element which is positioned absolute does not leave empty space after being positioned
Example – Absolute PositionExample Absolute Position#box1{position:absolute;top: 50px; left: 50px; }p p p }#box2 { position:absolute;top: 50px; right: 50px; }top: 50px; right: 50px; }#box3 { position:absolute;bottom: 50px; right: 50px; }bottom: 50px; right: 50px; }#box4 { position:absolute;B 50 l f 50 }Bottom:50px; left: 50px; }
What the Browser DoesWhat the Browser Does
What the Browser DoesWhat the Browser Does
Relative PositioningRelative Positioning
• The difference between absolute and relativeThe difference between absolute and relative positioning is how the position is calculated
• An element which is positioned relative has its• An element which is positioned relative has its position calculated from the original position in the document (think text document here)in the document (think text document here)
• The element obtains a space in the document f i i i i dafter it is positioned
Example – Relative Position With CSSExample Relative Position With CSS
#d 1 { i i l i l f 350#dog1 { position:relative; left: 350px; bottom: 150px; }#dog2 { position:relative; left: 150px; bottom: 500px; }p ; }#dog3 { position:relative; left: 50px; bottom: 700px; }bottom: 700px; }
<body><h1>The Tinder‐Box</h1><p><strong>By Hans Christian Andersen</strong></p><p><strong>By Hans Christian Andersen</strong></p><p>A soldier came … home. </p><p>As he walked … </p><p>"Thank you, old witch," said the soldier. </p><p>"Do you see that large tree, …</p><p>"But what am I to do, down there in the tree?" asked the soldier. </p><div id="dog1"><img src="dog1.gif"></div><p>"Get money," she replied;… </p><p>"Get money," she replied;… </p><p>"This is not a bad story," said the soldier; …</p><div id="dog2"><img src="dog2.gif"></div><p>"No," said the witch; … </p>
& V ll I i /<p>"Very well; I promise. …</p><p>"Here it is," replied the witch; …</p><p>As soon as the rope was tied, … </p><p>"You're a pretty fellow," said the soldier, … </p>p q ; p y , q ; , /p<p>"You had better not look at me in that way… </p><div id="dog3"><img src="dog3.gif"></div><p>Then he went into the third room, …</p></body></body>
What the Browser DoesWhat the Browser Does
For live use: http://www.html.net/tutorials/css/lesson14_ex2.asp
Complete the TutorialComplete the Tutorial
• Here is a link to a tutorial about how toHere is a link to a tutorial about how to validate CSS
• http://www html net/tutorials/css/lesson16 php• http://www.html.net/tutorials/css/lesson16.php
Hands‐OnHands On
• http://www.uh.edu/~smiertsc/2336itec/tinderbox.zipGet the content of the tinderbox page and find three dog images.http://www.uh.edu/ smiertsc/2336itec/tinderbox.zip
• The page will contain pointers to three dog images –find your owny
Add the CSS
• Add the CSS (either embedded or in an external style sheet)
• Add the dog divs
Copy the Page (and, possibly a style sheet) topossibly, a style sheet) to Your Web Folder
Compare and Be Amazed!Compare and Be Amazed!
• http://www.tech.uh.edu/faculty/miertschin/outtabox/index_wo_css.ht lhtml
• http://www.tech.uh.edu/faculty/miertschin/outtabox/index.html
• Validate your css at W3C!!!!