Presentation is loading. Please wait.

Presentation is loading. Please wait.

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:

Similar presentations


Presentation on theme: "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:"— Presentation transcript:

1 class four: the box model and positioning

2 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

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

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

5 the webpage height content width border padding margin

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

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

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

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

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

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

12 …unless you set position:inherit.

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

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

15 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.

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

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

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

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

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

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

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

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

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

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

26 HTML5shiv (http://code.google.com/p/html5shiv/)http://code.google.com/p/html5shiv/ CSS3 PIE (http://css3pie.com/)http://css3pie.com/ Just download scripts and include on site – will have to reference scripts in HTML or CSS

27 In :

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


Download ppt "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:"

Similar presentations


Ads by Google