Differences

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

--- eg-146:lecture16 [2012/03/19 20:27] – [The HTML5 display-role reset] eechris
+++ eg-146:lecture16 [2012/03/19 20:57] – [Changing the Cursor] eechris
@@ Line 525: / Line 525: @@
  * Examine the structure.
-===== The CSS Reset =====
-  * Common technique, ensures that design starts from a blank slate on all browsers
 ===== The HTML5 display-role reset =====
@@ Line 546: / Line 543: @@
 </code>
-===== Changing the Background ====
+===== The CSS Reset =====
-    To use a background image:
+  * 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]]
-#background-image {
+----
-  background-image: url(bluebench.jpg);
-  background-position: left top;
-  background-repeat: repeat;
-}
+<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>
-Notes
+===== Changing the Background ====
-    To change the background colour:
+    To use a background image:
+<code css>
+#container {
+  background: url(../img/bg-bluebench.jpg) repeat-y;
+}
+</code>
-# wrap { background: url(bench.jpg) left top repeat; }
+[[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/assets/css/background-image.css|See result]]
-#screen { background: #FEF6F8; }
-a:focus a:hover a:active { background: #F3CFB6; }
-#sidebar { background: #F5F8FA; }
-Notes
+==== To change the background colour ====
-Setting the Height or Width for the Element
+<code css>
+#page { background: #fef6f8 }
+a:focus
+a:hover
+a:active { background: #F3CFB6; }
+.logo a:hover { background: transparent; }
+.sidebar { background: #f5f8fa; }
+</code>
-    To set the height or width for an element:
+[[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/background-shorthand.html|See result]]
-#wrap { width: 90%; max-width: 900px; min-width: 480px; }
+===== Setting the Height or Width for the Element =====
-#main {width: 75%; }
+  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/width-height.html|Width and Height]]
+  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/max-width.html|Maximum Width]]
-.photo { width: 100px; height: 75px; }
+===== Setting the Margins around an Element =====
-[Setting the width and height of an element]
+===== Adding Padding around an Element =====
-Notes
+  * Padding is extra space around the contents of an element but within the border. You can change the padding's thickness but not its background.
+  * When you set four values for padding they are assigned to the top, right, bottom, and left, in that order. Here there will only be padding on the top and right:
-Setting the Margins around an Element (1)
-    The margin is the amount of transparent space between one element and the next, in addition to and outside any padding or border around an element. It is used to increase (or decrease) the white space around an element.
+===== Making Elements Float =====
-    When you set two values, the first is applied to the top and bottom margins, the second is applied to the left and right margins. Here we give the design a little extra space at the top and bottom.
-    The auto margin setting centres the layout in the window by dividing the leftover 10% of the browser window width that is not used by the wrap div between the right and left margins.
-#wrap { margin: 20px auto }
-[Setting the wrap margin to 20 pixels]
+===== Controlling Where Elements Float =====
+===== Setting the Border =====
-Setting the Margins around an Element (2)
+===== Offsetting Elements in the Natural Flow =====
-    The sidebar div will have a left margin of 74% which will overlap the space for the main content just enough to allow for some padding around the sidebar text.
+===== Positioning Elements Absolutely =====
-    The 110 pixel margin to the left of the main content will give us room for the photo later.
-#sidebar { margin-left: 74%; }
+===== Positioning Elements in 3d =====
-.photo_text { margin-left: 110px; }
-[Setting the margins for sidebar and photo text]
+===== Determining How to Treat Overflow =====
-Adding Padding around an Element (1)
+===== Aligning Elements Vertically =====
-    Padding is extra space around the contents of an element but within the border. You can change the padding's thickness but not its background.
+===== Changing the Cursor =====
-    When you set four values for padding they are assigned to the top, right, bottom, and left, in that order. Here there will only be padding on the top and right:
-#wrap { padding: 30px 20px 0 0 }
-[Adding padding to the wrap]
-Adding Padding around an Element (2)
+===== Displaying and Hiding Elements =====
-    Now we add padding to the contents of the screen div — to the top, left and bottom, but not the right:
+  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/display-img-default.html|Display Image Default]]
-    When you set four values for padding they are assigned to the top, right, bottom, and left, in that order. Here there will only be padding on the top and right:
+  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/display-block.html|Display Image Block]]
+  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/display-none.html|Display Image Node]]
-#wrap { padding: 10px 10px 10px 0; }
+===== Positioning Elements Absolutely =====
-[Adding padding to the screen]
-Adding Padding around an Element (3)
-    When the screen background is set to white, we can see why no padding was needed on the left.
-[Making the screen background white]
-Offsetting Elements In the Natural Flow
-    Each element has a natural location in a page's flow.
-    Moving the element with respect to this original location is called relative positioning.
-    The surrounding elements are not affected — at all.
-.date { position: relative; top -1.1em; }
-.description { position: relative; left: 1em; margin bottom: 0.2 em; }
-[Offsetting elements in the natural flow]
-Positioning Elements Absolutely
-    You can take elements out of the natural flow — and position the absolutely — by specifying their precise position with respect to the nearest positioned ancestor or to the body.
-    First we set the position for the photo_text class so that photos will be positioned with respect to it (and not the body).
-.photo_text { position: relative; }
-    The negative left offset will pull the photo left and out of the photo_text box.
-.photo { position: absolute; left: -112px; top: 3px; }
-[Positioning elements absolutely]
-Notes.
 Affixing an Element to the Browser Window
@@ Line 731: / Line 723: @@
 More notes
-Changing the Cursor
+===== Changing the Cursor ======
-    When you point to a link, the cursor changes to a pointing hand and the link is highlighted
+  * When you point to a link, the cursor changes to a pointing hand and the link is highlighted
-[Normal link behaviour]
-    Because we are on the home page, the home link will be part of the current class.
-    We can then change the cursor and the background of the home link so that it doesn't act like a link.
-a:hover,current { cursor: default; background: white; }
-[Changing the link style and cursor]
-Notes
 Determining Where Overflow Should Go