Differences

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

--- eg-146:lecture16 [2012/03/19 20:07] – eechris
+++ eg-146:lecture16 [2012/03/19 20:30] – eechris
@@ Line 518: / 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">
-  <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.
+===== 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
+<code css>
-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.
+charset "utf-8";
-[Box-model layout of the document]
-Changing the Background
+/* 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>
+===== The CSS Reset =====
+  * Common technique, ensures that design starts from a blank slate on all browsers
+  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/reset.html|See result]]
+----
+<code css>
+/* CSS RESET
+------------------------------------------------ */
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+</code>
+===== Changing the Background ====
     To use a background image:
-#wrap {
+#background-image {
   background-image: url(bluebench.jpg);
   background-position: left top;