Differences

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

--- eg-146:lecture16 [2012/03/19 21:08] – [Case Study: Developing a Positioning Style Sheet] eechris
+++ eg-146:lecture16 [2012/03/19 21:30] (current) – [Positioning Elements Absolutely] eechris
@@ Line 646: / Line 646: @@
   * [[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]]
-===== Positioning Elements Absolutely =====
-Affixing an Element to the Browser Window
-    When a visitor scrolls in the browser window, the contents of the window usually move up or down while the Back and Forward buttons, for example, stay stationary or fixed.
-    CSS allows you to affix elements to the browser window so that they don't move when the visitor scrolls up and down.
-#sidebar { position: fixed; width: 26%; }
-#main { padding: 4px; }
-[Affixing an element to the browser window]
-    This example can only really be appreciated by seeing it in action.
-Notes
-Making Elements Float
-    You can make elements float in a sea of text (or other elements).
-    You can use this technique to crete multi-column layouts, to create callout quotes, and more.
-    We already pushed the sidebar off to the right, now we'll float the main content to its left.
-    The navbuttons div will float next to the description rather than just under it.
-#main { width: 75%; float: left; }
-#navbuttons { width: 22em; float: right; }
-[Floating elements]
-Notes
-Controlling Where Elements Float (1)
-    You can control which elements an element can float next to an which cannot.
-    Since it is the main div that is floating, all of the other elements, including the footer, flow around it unless we say otherwise.
-[The footer shouldn't float!]
-Controlling Where Elements Float (2)
-    Here we clear the float so that the footer div no longer floats next to the main div
-#footer { clear: both; }
-[The footer doesn't float if it the float is cleared]
-Notes
-Positioning Elements in 3D
-    When we floated the navbuttons they slid under the description. This means that you can't click the links (try it!).
-    We set the z-index level to 1 which pulls the navbuttons div above the description.
-    We also have to position the navbuttons div relatively so that the z-index property can work.
-#navbuttons { position: relative; z-index: 1; }
-[After z-index has been added, links will work]
-    Once the navbuttons div is on top, the links work as expected.
-Setting the Border
-    You can create a border around an element and then set this for thickness, style and colour.
-    If you've specified any padding, the border encloses both the padding and the contents of the element.
-.entry { border-right: 2px dashed #B74E07; }
-.photo img { border: none; }
-#footer { border-top: 2px dotted #B74E07; }
-[Setting the border]
-Notes
-[Setting the border]
-More notes