class four: the box model and positioning

is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it: Sam & Sally's Cafe

Let’s use to format the copyright in the footer. html: © css: footer span { font-family: KameronRegular, ''Times New Roman'', serif; }

, like, doesn’t mean anything. It’s meant to divide up the page into parts. Try it: …

the webpage height content width border padding margin

header body navigation footer the webpage right column left column right column content

#hours { background-color: #66839E; padding:1em; color:#fff; width:12em; }

#hours { background-color: #66839E; padding:1em; color:#fff; width:12em; position:relative; }

#hours { background-color: #66839E; padding:1em; color:#fff; width:12em; position:relative; top:1em; right:-2.5em; }

#hours { background-color: #66839E; padding:1em; color:#fff; width:12em; position:absolute; top:1em; right:-2.5em; }

#reservations { background-color: #66839E; padding:1em; color:#fff; width:12em; position:absolute; top:20em; right:-2.5em; }

…unless you set position:inherit.

footer { font-family: OstrichSansBold, Verdana, Geneva, sans-serif; font-size: 2em; text-align: center; position:fixed; bottom:0; left:0; right:0; }

footer { font-family:OstrichSansBold,Arial,Helvetica,sans-serif; font-size:1em; line-height:1.5em; text-align:center; background-color: #66839E; color: #fff; min-width:600px; position:fixed; bottom:0; left:0; right:0; }

a relatively positioned element inside a static element uses the window to position itself. a relatively or absolutely positioned element inside a relatively positioned element uses that parent element to position itself.

#content { position:relative; background: orange; }

#content { position:relative; background: orange; padding:1em 12.5em 1em 1em; clear:both; }

body { background-color:#F1F2E4; font-family:KameronRegular, "Times New Roman", serif; width:80%; margin:0 auto; min-width:600px; }

lets you wrap text around an element. img { float:left; margin:.5em; width:12em; }

let’s practice floating to the right: #img3 { float:right; margin:.5em; width:12em; }

nav ul { font-family: OstrichSansBold, Arial, Helvetica, sans-serif; font-size:2em; padding: 0; margin: 0; width: 100%; list-style-type: none; }

nav ul li{ line-height: 1.5em; padding-bottom: 1%; float: left; width: 24.95%; text-align: center; }

nav ul li a { text-decoration:none; display: block; color: #66839E; }

nav ul li a:hover { color: #FFF; background-color: #66839E; }

a keyword added to a selector to indicate a specific state. here’s some link-related selectors: :hover :visited :active

HTML5shiv ( CSS3 PIE ( Just download scripts and include on site – will have to reference scripts in HTML or CSS

In :

 Mozilla Developer Network  Codecademy  HTMLdog  W3schools  LearnStreet