css –box model by susan l. miertschinsmiertsc/2336itec/cssboxmodel.pdfpositioning elements with...

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


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


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>

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>

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; }

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; }

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>


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!!!!

css –box model by susan l. miertschinsmiertsc/2336itec/cssboxmodel.pdfpositioning elements with...

Documents