ICCT Wiki

User Tools

Site Tools

Trace:
eg-146:lecture16

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
eg-146:lecture16 [2012/03/19 20:00] – [Structuring your Page] eechriseg-146:lecture16 [2012/03/19 21:30] (current) – [Positioning Elements Absolutely] eechris
Line 263: Line 263:
   * Only the style sheet changes   * Only the style sheet changes
   * Different effects are achieved with style sheets alone.   * 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> </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 ===== ===== The Box Model =====
Line 464: Line 466:
   * CSS treats your web page as if every element is enclosed in an invisible [[#Consequences of the Box Model|box]].    * CSS treats your web page as if every element is enclosed in an invisible [[#Consequences of the Box Model|box]]. 
   * Box //height//, //width//, //padding//, //border// and //margin// can all be set by the style sheet.   * Box //height//, //width//, //padding//, //border// and //margin// can all be set by the style sheet.
-''Table heading links to w3schools references on this subject.'' + 
-^The CSS Box^[[Border|http://www.w3schools.com/css/css_border.asp]] ^[[Margin|http://www.w3schools.com/css/css_margin.asp]] ^[[Padding|http://www.w3schools.com/css/css_padding.asp]]^+**Table heading links to w3schools references on this subject.** 
 +^The CSS Box^[[http://www.w3schools.com/css/css_border.asp|Border]] ^[[http://www.w3schools.com/css/css_margin.asp|Margin]] ^[[http://www.w3schools.com/css/css_padding.asp|Padding]]^ 
 <html> <html>
 <div style="color:black;background-color:#FFFFCC;padding:1em;border:thin solid black;text-align:center;width=30%">margin <div style="color:black;background-color:#FFFFCC;padding:1em;border:thin solid black;text-align:center;width=30%">margin
Line 478: Line 482:
 </html> </html>
  
-Table heading links to w3schools references on this subject. 
-The CSS Box Border Margin Padding 
-margin 
-border 
-padding 
-content 
-<- 
--> 
-CSS 'width' 
  
 +===== Consequences of the Box Model =====
  
-Consequences of the Box Model+  * CSS can be used to determine the appearance and position of each element's box. 
 +    * Gives considerable control over layout. 
 +    * Element's box may be block-level or in-line. 
 +    * Default representation can be changed by a style declaration. 
 +  * Elements are displayed in the order that the HTML flows from top to bottom 
 +  * Line breaks at the beginning and end of every block-level box.
  
-    CSS can be used to determine the appearance and position of each element's box. 
-        Gives considerable control over layout. 
-        Element's box may be block-level or in-line. 
-        Default representation can be changed by a style declaration. 
-    Elements are displayed in the order that the XHTML flows from top to bottom 
-    Line breaks at the beginning and end of every block-level box. 
  
  
 +===== Types of Positioning =====
  
-Types of Positioning+  * Leave the box in the flow -- the default (called //static//) 
 +  * Remove the box from the flow and specify its exact coordinates with respect either to: 
 +    * Its parent element (absolute) 
 +    * The browser window (fixed) 
 +    * Its default position in the flow (relative) 
 +  * If boxes overlap, their relative position (stacking order) can be specified using the so-called ''z-index''.
  
-    Leave the box in the flow. 
-        The default (called static) 
-    Remove the box from the flow and specify its exact coordinates with respect either to: 
-        Its parent element (absolute) 
-        Browser window (fixed) 
-        Its default position in the flow (relative) 
-    If boxes overlap, their relative position (stacking order) can be specified using the so-called z-index. 
  
  
 +===== Box Formatting =====
  
-Box Formatting+  * Once its position is decided the following properties can be set: 
 +    * Size (height and width) 
 +    * Padding 
 +    * Border 
 +    * Margins 
 +    * Alignment 
 +    * Colour 
 +  * Some properties, particularly ''em'' and percentage values, are relative to the element's parent.
  
-    Once its position is decided the following properties can be set: +===== Case Study: Developing a Positioning Style Sheet =====
-        Size (height and width) +
-        Padding +
-        Border +
-        Margins +
-        Alignment +
-        Colour +
-    Some properties, particularly em and percentage values, depend on an element's parent. +
- +
- +
- +
-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 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 { 
-    To use a background image: + display: block;
- +
-#wrap {  +
-  background-image: url(bluebench.jpg); +
-  background-position: left top; +
-  background-repeat: repeat;+
 } }
 +</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]]
  
-Notes+----
  
-    To change the background colour:+<code css> 
 +/* CSS RESET 
 +------------------------------------------------ */ 
 +/* http://meyerweb.com/eric/tools/css/reset/  
 +   v2.0 | 20110126 
 +   License: none (public domain) 
 +*/
  
-# wrap { background: url(bench.jpg) left top repeat; } +html, body, div, span, applet, object, iframe, 
-#screen { background: #FEF6F8; } +h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
-a:focus a:hover a:active { background: #F3CFB6; } +a, abbr, acronym, address, big, cite, code, 
-#sidebar { background: #F5F8FA; } +del, dfn, em, img, ins, kbd, q, s, samp, 
- +small, strike, strong, sub, sup, tt, var, 
- +b, u, i, center, 
-Notes +dl, dt, dd, ol, ul, li, 
- +fieldset, form, label, legend, 
-Setting the Height or Width for the Element +table, caption, tbody, tfoot, thead, tr, th, td, 
- +article, aside, canvas, details, embed,  
-    To set the height or width for an element: +figure, figcaption, footer, header, hgroup,  
- +menu, nav, output, ruby, section, summary, 
-#wrap { width: 90%; max-width: 900px; min-width: 480px; } +time, mark, audio, video { 
- + margin: 0; 
-#main {width: 75%; } + padding: 0; 
- + border: 0; 
-.photo { width: 100px; height: 75px; } + font-size: 100%; 
- + font: inherit; 
- + vertical-align: baseline; 
- +} 
-[Setting the width and height of an element] +</code>
- +
-Notes +
- +
-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. +
-    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] +
- +
- +
-Setting the Margins around an Element (2) +
- +
-    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. +
-    The 110 pixel margin to the left of the main content will give us room for the photo later. +
- +
-#sidebar { margin-left: 74%; } +
-.photo_text { margin-left: 110px; } +
- +
-[Setting the margins for sidebar and photo text] +
- +
-Adding Padding around an Element (1) +
- +
-    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: +
- +
-#wrap { padding: 30px 20px 0 0 } +
- +
-[Adding padding to the wrap] +
- +
-Adding Padding around an Element (2) +
- +
-    Now we add padding to the contents of the screen div — to the top, left and bottom, but not the right: +
-    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: 10px 10px 10px 0; } +
- +
-[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 +
- +
-    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 +
- +
-Changing the Cursor +
- +
-    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 +
- +
-    Elements are not always contained in their boxes. You can control the area outside an elements' box with the overflow property. +
-    Here we use overflow to restrict the collection of mini photos at the bottom of this blog page to a single line. +
-    When the page is resized, images are removed from the display rather than scrolling or re-flowing to a second line. +
- +
-p.miniphotos { height: 33px; overflow: hidden; } +
- +
-[Controlling the overflow] +
-Notes +
- +
-Aligning Elements Vertically +
- +
-    You can align elements in many different ways to make them look neater on the page. +
-    here we align the img elements in the miniphotos class to align on the centre line. +
- +
-.miniphotos img { vertical-align: middle; } +
- +
-[Aligning images vertically] +
- +
-Introduction +
-    Another Example Document +
-    The Box Model +
-    Types of Positioning +
-    Box Formatting +
-    Case Study: Developing a Positioning Style Sheet +
- +
- +
- +
- +
-slide show +
- +
-Introducing Layout with Styles +
- +
-    Layout with CSS has advantages over other methods (such as tables and frames) +
-    Good for liquid layouts (which resize with browser) +
-        Can apply layout to all documents and change with one style sheet +
-        Smaller files: XHTML+CSS usually less than HTML with lots of font tags, tables, etc. Plus CSS file can be cached so loaded only once for a whole site. +
-        XHTML code is cleaner and easier to edit. +
-        Standard so supported in future. +
-    Disadvantage +
-        Current browsers are buggy, old browsers provide no support for layout. +
- +
- +
- +
-Another Example Document +
-Note: the same XHTML copy is used in all the slides that follow. +
- +
-    Only the style sheet changes +
-    Different effects are achieved with style sheets alone. +
-    Structuring your Page +
-        Have a plan +
-        Use id/class to classify parts of your content. +
-        Arrange the order of content so that it will reproduce in old browsers +
- +
- +
-View (edited) source +
- +
-The Box Model +
- +
-    CSS treats your web page as if every element is enclosed in an invisible box. +
-    Box height, width, padding, border and margin can all be set by the style sheet. +
- +
-Table heading links to w3schools references on this subject. +
-The CSS Box Border Margin Padding +
-margin +
-border +
-padding +
-content +
-<- +
--> +
-CSS 'width' +
- +
- +
-Consequences of the Box Model +
- +
-    CSS can be used to determine the appearance and position of each element's box. +
-        Gives considerable control over layout. +
-        Element's box may be block-level or in-line. +
-        Default representation can be changed by a style declaration. +
-    Elements are displayed in the order that the XHTML flows from top to bottom +
-    Line breaks at the beginning and end of every block-level box. +
- +
- +
- +
-Types of Positioning +
- +
-    Leave the box in the flow. +
-        The default (called static) +
-    Remove the box from the flow and specify its exact coordinates with respect either to: +
-        Its parent element (absolute) +
-        Browser window (fixed) +
-        Its default position in the flow (relative) +
-    If boxes overlap, their relative position (stacking order) can be specified using the so-called z-index. +
- +
- +
- +
-Box Formatting +
- +
-    Once its position is decided the following properties can be set: +
-        Size (height and width) +
-        Padding +
-        Border +
-        Margins +
-        Alignment +
-        Colour +
-    Some properties, particularly em and percentage values, depend on an element's parent. +
- +
- +
- +
-Case Study: Developing a Positioning Style Sheet +
-This is the document as we want it to appear when it is finished +
-[Finshed result.] +
- +
-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.  +
- +
-<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. +
- +
- +
- +
-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+===== Changing the Background ====
  
     To use a background image:     To use a background image:
- +<code css> 
-#wrap {  +#container { 
-  background-image: url(bluebench.jpg); +  background: url(../img/bg-bluebench.jpg) repeat-y;
-  background-position: left top; +
-  background-repeat: repeat;+
 } }
 +</code>
  
 +[[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/assets/css/background-image.css|See result]]
  
  
-Notes+===== To change the background colour =====
  
-    To change the background colour: +<code css> 
- +#page { background: #fef6f8 } 
-# wrap { background: url(bench.jpg) left top repeat; } +a:focus  
-#screen { background: #FEF6F8; } +a:hover  
-a:focus a:hover a:active { background: #F3CFB6; } +a:active { background: #F3CFB6; } 
-#sidebar { background: #F5F8FA; } +.logo a:hover { background: transparent; } 
- +.sidebar { background: #f5f8fa; } 
- +</code>
-Notes +
- +
-Setting the Height or Width for the Element +
- +
-    To set the height or width for an element: +
- +
-#wrap { width: 90%; max-width: 900px; min-width: 480px; } +
- +
-#main {width: 75%; } +
- +
-.photo { width: 100px; height: 75px; } +
- +
- +
- +
-[Setting the width and height of an element] +
- +
-Notes +
- +
-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. +
-    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] +
- +
- +
-Setting the Margins around an Element (2) +
- +
-    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. +
-    The 110 pixel margin to the left of the main content will give us room for the photo later. +
- +
-#sidebar { margin-left: 74%; } +
-.photo_text { margin-left: 110px; } +
- +
-[Setting the margins for sidebar and photo text] +
- +
-Adding Padding around an Element (1) +
- +
-    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: +
- +
-#wrap { padding: 30px 20px 0 0 } +
- +
-[Adding padding to the wrap] +
- +
-Adding Padding around an Element (2) +
- +
-    Now we add padding to the contents of the screen div — to the top, left and bottom, but not the right: +
-    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: 10px 10px 10px 0; } +
- +
-[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 +
- +
-    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.+[[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/background-shorthand.html|See result]]
  
 +===== Setting the Height or Width for the Element =====
  
 +  * [[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]]
  
-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; }+===== Setting the Margins around an Element =====
  
-.photo img { border: none; }+===== Adding Padding around an Element =====
  
-#footer { border-top: 2px dotted #B74E07; }+  * 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 border] 
-Notes 
-[Setting the border] 
-More notes 
  
-Changing the Cursor+===== Making Elements Float =====
  
-    When you point to a link, the cursor changes to a pointing hand and the link is highlighted 
  
-[Normal link behaviour]+===== Controlling Where Elements Float =====
  
-    Because we are on the home page, the home link will be part of the current class. +===== Setting the Border =====
-    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; }+===== Offsetting Elements in the Natural Flow =====
  
-[Changing the link style and cursor]+===== Positioning Elements Absolutely =====
  
-Notes+===== Positioning Elements in 3d =====
  
-Determining Where Overflow Should Go+===== Determining How to Treat Overflow =====
  
-    Elements are not always contained in their boxes. You can control the area outside an elements' box with the overflow property. +===== Aligning Elements Vertically =====
-    Here we use overflow to restrict the collection of mini photos at the bottom of this blog page to a single line. +
-    When the page is resized, images are removed from the display rather than scrolling or re-flowing to a second line.+
  
-p.miniphotos { height: 33px; overflow: hidden; }+===== Changing the Cursor =====
  
-[Controlling the overflow] 
-Notes 
  
-Aligning Elements Vertically 
  
-    You can align elements in many different ways to make them look neater on the page. +===== Displaying and Hiding Elements =====
-    here we align the img elements in the miniphotos class to align on the centre line.+
  
-.miniphotos img { vertical-align: middle; }+  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/display-img-default.html|Display Image Default]] 
 +  * [[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]]
  
-[Aligning images vertically] 
  
  
eg-146/lecture16.1332187203.txt.gz · Last modified: 2012/03/19 20:00 by eechris