Differences

This shows you the differences between two versions of the page.

--- eg-146:lecture16 [2012/03/19 20:05] – [The Box Model] eechris
+++ eg-146:lecture16 [2012/03/19 20:27] – [The HTML5 display-role reset] eechris
@@ Line 263: / Line 263: @@
   * Only the style sheet changes
   * Different effects are achieved with style sheets alone.
-===== Structuring your Page =====
-  * Have a plan
-  * Use semantic elements, id and class to classify parts of your content.
-  * Arrange the order of content so that it will reproduce in old browsers and satisfy requirements for Search Engines((Known as Search Engine Optimization or SEO))
 ----
@@ Line 459: / Line 453: @@
 </code>
+===== Structuring your Page =====
+  * Have a plan
+  * Use semantic elements, id and class to classify parts of your content.
+  * Arrange the order of content so that it will reproduce in old browsers and satisfy requirements for Search Engines((Known as Search Engine Optimization or SEO))
 ===== The Box Model =====
@@ Line 516: / Line 518: @@
 ===== Case Study: Developing a Positioning Style Sheet =====
 This is the document as we want it to appear when it is finished
-[Finshed result.]
+[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/finished-page.html|Finished result.]
-Document Structure
+===== Document Structure =====
-    This is the logical structure of the document: indentation is used to show structure and for clarity, the closing tags are not shown.
+ * Open the [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/no-styles.html|no-style version of the document]] and view source, preferably in a web development tool that has code folding.
+ * Examine the structure.
-<div id="wrap">
+===== The CSS Reset =====
-  <div id="screen">
-     <div id="header">
-       <h1>photobarcelona . . .</h1>
-         <p id="navbuttons">
-            <a class="current">home</a> • <a>faq</a> • <a >resources</a> • <a>previous</a> • <a>archives</a>
-         <p class="description">capturing ....
-     <div id="main">
-       <div class="entry">
-         <h2>Hospital Sant Pau</h2>
-         <p class="date">June 23, 2006</p>
-         <div class="photo_text">
-           <p class="photo">[thumbnail image link to larger image]
-           <p>The Saint Paul Hospital..
-           <p class="continued">[link to more text]
-          [[more entries]]
-     <div id="sidebar">
-        <h3>from my window</h3>
-        <p>Around ..
-     <div id="footer">
-        <h2>about this photoblog</h2>
-        <p>This photoblog is ...
-        <p class="miniphotos">
-            [[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 on older browsers and mobile devices.
+  * Common technique, ensures that design starts from a blank slate on all browsers
+===== 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://www.bruceontheloose.com/htmlcss/examples/chapter-11/html5-elements-styling.html|See page]]
-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]
+<code css>
+charset "utf-8";
+/* Style new "block-level-like" HTML5 elements so they occupy their own line in older browsers. */
+article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+</code>
-Changing the Background
+===== Changing the Background ====
     To use a background image:
-#wrap {
+#background-image {
   background-image: url(bluebench.jpg);
   background-position: left top;