eg-146:lecture16
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
eg-146:lecture16 [2012/03/19 20:07] – eechris | eg-146:lecture16 [2012/03/19 20:27] – [The HTML5 display-role reset] eechris | ||
---|---|---|---|
Line 518: | Line 518: | ||
===== Case Study: Developing a Positioning Style Sheet ===== | ===== Case Study: Developing a Positioning Style Sheet ===== | ||
This is the document as we want it to appear when it is finished | This is the document as we want it to appear when it is finished | ||
- | [Finshed | + | [http:// |
- | Document Structure | + | ===== Document Structure |
- | This is the logical structure | + | * Open the [[http:// |
+ | * Examine | ||
- | <div id=" | + | ===== The CSS Reset ===== |
- | <div id=" | + | |
- | < | + | |
- | < | + | |
- | <p id=" | + | |
- | <a class=" | + | |
- | <p class=" | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | <p class=" | + | |
- | < | + | |
- | <p class=" | + | |
- | < | + | |
- | <p class=" | + | |
- | [[more entries]] | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | <p class=" | + | |
- | [[lots of thumbnail images]] | + | |
- | You should note that most document sections are marked up as div elements and the order is such that the XHTML will be usable | + | * Common technique, ensures |
+ | ===== The HTML5 display-role reset ===== | ||
+ | * For older browsers, ensures that new elements are set as blocks | ||
+ | * For IE browsers, we also need a JavaScript HTML5 fix (see the HTML5) | ||
+ | * [[http:// | ||
- | Visual design elements | + | ---- |
- | This picture shows how the various div elements are to be layed out on the screen. Note that the order of display can be (and in this case is) different from the order in the XHTML file. | + | |
- | [Box-model layout of the document] | + | |
- | Changing the Background | + | <code css> |
+ | charset " | ||
+ | |||
+ | /* Style new " | ||
+ | article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section { | ||
+ | display: block; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== Changing the Background | ||
To use a background image: | To use a background image: | ||
- | #wrap { | + | #background-image |
background-image: | background-image: | ||
background-position: | background-position: |
eg-146/lecture16.txt · Last modified: 2012/03/19 21:30 by eechris