eg-146:lecture16
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
eg-146:lecture16 [2012/03/19 20:05] – [The Box Model] eechris | eg-146:lecture16 [2012/03/19 20:57] – [Changing the Cursor] 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: | ||
</ | </ | ||
+ | |||
+ | ===== 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 516: | Line 518: | ||
===== Case Study: Developing a Positioning Style Sheet ===== | ===== 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 | + | [http:// |
- | Document Structure | + | ===== Document Structure |
- | This is the logical structure | + | * Open the [[http:// |
+ | * Examine | ||
- | <div id=" | ||
- | <div id=" | ||
- | < | ||
- | < | ||
- | <p id=" | ||
- | <a class=" | ||
- | <p class=" | ||
- | < | ||
- | < | ||
- | < | ||
- | <p class=" | ||
- | < | ||
- | <p class=" | ||
- | < | ||
- | <p class=" | ||
- | [[more entries]] | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | <p class=" | ||
- | [[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:// | ||
+ | ---- | ||
- | 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 | + | |
- | To use a background image: | + | /* Style new "block-level-like" |
- | + | article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section { | |
- | #wrap { | + | display: block; |
- | background-image: url(bluebench.jpg); | + | |
- | | + | |
- | | + | |
} | } | ||
+ | </ | ||
+ | ===== The CSS Reset ===== | ||
+ | * Common technique, ensures that design starts from a blank slate on all browsers | ||
+ | * [[http:// | ||
- | Notes | + | ---- |
- | To change the background colour: | + | <code css> |
+ | /* CSS RESET | ||
+ | ------------------------------------------------ */ | ||
+ | /* http:// | ||
+ | v2.0 | 20110126 | ||
+ | | ||
+ | */ | ||
- | # 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, | ||
+ | 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; | ||
+ | } | ||
+ | </ | ||
+ | ===== Changing the Background ==== | ||
- | Notes | + | To use a background image: |
+ | <code css> | ||
+ | #container { | ||
+ | background: url(../ | ||
+ | } | ||
+ | </ | ||
- | Setting the Height or Width for the Element | + | [[http:// |
- | To set the height or width for an element: | ||
- | #wrap { width: 90%; max-width: 900px; min-width: 480px; } | + | ==== To change the background colour ==== |
- | #main {width: 75%; } | + | <code css> |
+ | #page { background: #fef6f8 } | ||
+ | a:focus | ||
+ | a:hover | ||
+ | a:active { background: #F3CFB6; } | ||
+ | .logo a:hover { background: transparent; | ||
+ | .sidebar { background: #f5f8fa; } | ||
+ | </ | ||
- | .photo { width: 100px; height: 75px; } | + | [[http:// |
+ | ===== Setting the Height or Width for the Element ===== | ||
+ | * [[http:// | ||
+ | * [[http:// | ||
- | [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: | ||
- | .photo_text { margin-left: | ||
- | |||
- | [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' | ||
- | 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] | + | ===== Setting |
- | Adding Padding around an Element | + | ===== Adding Padding around an Element |
- | Now we add padding to the contents of the screen div — to the top, left and bottom, | + | * Padding is extra space around |
- | 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] | + | ===== Making Elements Float ===== |
- | 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. | + | ===== Controlling Where Elements Float ===== |
- | [Making | + | ===== Setting |
- | Offsetting Elements | + | ===== Offsetting Elements |
- | Each element has a natural location in a page's flow. | + | ===== Positioning Elements Absolutely ===== |
- | 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; } | + | ===== Positioning Elements in 3d ===== |
- | .description { position: relative; left: 1em; margin bottom: 0.2 em; } | + | |
- | [Offsetting elements in the natural flow] | + | ===== Determining How to Treat Overflow ===== |
- | Positioning | + | ===== Aligning |
- | 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. | + | ===== Changing |
- | 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; } | + | ===== Displaying and Hiding Elements ===== |
- | [Positioning elements absolutely] | + | * [[http:// |
- | Notes. | + | * [[http:// |
+ | * [[http:// | ||
+ | ===== Positioning Elements Absolutely ===== | ||
Affixing an Element to the Browser Window | Affixing an Element to the Browser Window | ||
Line 740: | Line 723: | ||
More notes | 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 |
- | + | ||
- | [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' | + | |
- | + | ||
- | a: | + | |
- | + | ||
- | [Changing the link style and cursor] | + | |
- | + | ||
- | Notes | + | |
Determining Where Overflow Should Go | Determining Where Overflow Should Go |
eg-146/lecture16.txt · Last modified: 2012/03/19 21:30 by eechris