eg-146:lecture16
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| eg-146:lecture16 [2012/03/19 19:49] – [Layout with Styles] eechris | eg-146:lecture16 [2012/03/19 21:30] (current) – [Positioning Elements Absolutely] eechris | ||
|---|---|---|---|
| Line 245: | Line 245: | ||
| * Some older browsers are buggy((Notably IE 6 and IE 7)) | * Some older browsers are buggy((Notably IE 6 and IE 7)) | ||
| * Really old browsers provide no support for layout. | * Really old browsers provide no support for layout. | ||
| + | |||
| ---- | ---- | ||
| Line 263: | Line 264: | ||
| * 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 | + | |
| View (edited) source | View (edited) source | ||
| + | <code html> | ||
| + | < | ||
| + | <!--[if lt IE 7 ]> <html lang=" | ||
| + | <!--[if IE 7 ]> <html lang=" | ||
| + | <!--[if IE 8 ]> <html lang=" | ||
| + | <!--[if gt IE 8]>< | ||
| + | < | ||
| + | <meta charset=" | ||
| + | < | ||
| + | <link rel=" | ||
| + | <!--[if lt IE 9]> | ||
| + | <script src=" | ||
| + | < | ||
| - | The Box Model | + | <!-- |
| + | NOTE: The conditional comments near the top of this page apply a class to | ||
| + | the < | ||
| + | if a visitor views the page with Internet Explorer, class=" | ||
| + | in the < | ||
| + | when that browser needs a different style rule to display the page nicely. | ||
| + | See base.css for a few instances in which a selector begins with | ||
| + | .ie6 or .ie7 to target IE6 or IE7, respectively. There are no IE8-specific | ||
| + | styles required, but if there were, they would begin with .ie8. | ||
| + | |||
| + | All other browsers ignore these rules. | ||
| + | --> | ||
| + | </ | ||
| + | < | ||
| + | <div id=" | ||
| + | <div id=" | ||
| + | <!-- ==== START MASTHEAD ==== --> | ||
| + | <header id=" | ||
| + | <p class=" | ||
| + | |||
| + | < | ||
| + | <nav role=" | ||
| + | <ul class=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | <form method=" | ||
| + | <label for=" | ||
| + | <input type=" | ||
| + | <input type=" | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | <!-- end #masthead --> | ||
| + | |||
| + | <!-- ==== START MAIN CONTENT ==== --> | ||
| + | <div id=" | ||
| + | < | ||
| + | |||
| + | <!-- Start Entry #1 --> | ||
| + | <section class=" | ||
| + | < | ||
| + | <h2 lang=" | ||
| + | <p class=" | ||
| + | </ | ||
| + | |||
| + | <p class=" | ||
| - | CSS treats your web page as if every element is enclosed | + | <div class=" |
| - | Box height, width, padding, border and margin can all be set by the style sheet. | + | < |
| + | |||
| + | <p class=" | ||
| + | </ | ||
| + | </ | ||
| + | <!-- end .entry #1 --> | ||
| + | |||
| + | <!-- Start Entry #2 --> | ||
| + | <section class=" | ||
| + | < | ||
| + | < | ||
| + | <p class=" | ||
| + | </ | ||
| + | |||
| + | <p class=" | ||
| - | Table heading links to w3schools references on this subject. | + | |
| - | The CSS Box Border Margin Padding | + | < |
| - | margin | + | </ |
| - | border | + | |
| - | padding | + | |
| - | content | + | |
| - | <- | + | |
| - | -> | + | |
| - | CSS 'width' | + | |
| + | <p class=" | ||
| + | </ | ||
| + | <!-- end .entry #2 --> | ||
| + | | ||
| + | <!-- Start Entry #3 --> | ||
| + | <section class=" | ||
| + | < | ||
| + | < | ||
| + | <p class=" | ||
| + | </ | ||
| - | Consequences of the Box Model | + | <p class=" |
| - | CSS can be used to determine | + | <div class=" |
| - | Gives considerable control over layout. | + | < |
| - | | + | |
| - | | + | < |
| - | Elements | + | |
| - | Line breaks at the beginning | + | |
| + | <p class=" | ||
| + | </ | ||
| + | </ | ||
| + | <!-- end .entry #3 --> | ||
| + | </ | ||
| + | <!-- end #main content --> | ||
| + | | ||
| + | <!-- ==== START SIDEBAR ==== --> | ||
| + | <div id=" | ||
| + | <aside class=" | ||
| + | < | ||
| + | | ||
| + | < | ||
| + | | ||
| + | < | ||
| + | |||
| + | < | ||
| + | | ||
| + | <p class=" | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <ol reversed=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ol> | ||
| + | | ||
| + | <p class=" | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | | ||
| + | <!-- ==== START FOOTER ==== --> | ||
| + | <footer id=" | ||
| + | < | ||
| + | < | ||
| + | | ||
| + | <ul class=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ul> | ||
| + | </ | ||
| + | <!-- end #footer --> | ||
| + | </ | ||
| + | <!-- #page --> | ||
| + | </ | ||
| + | <!-- #container --> | ||
| + | </ | ||
| + | </ | ||
| - | Types of Positioning | + | </ |
| - | Leave the box in the flow. | + | ===== Structuring your Page ===== |
| - | 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. | + | |
| + | * 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)) | ||
| - | Box Formatting | ||
| - | Once its position is decided the following properties can be set: | + | ===== The Box Model ===== |
| - | Size (height and width) | + | |
| - | Padding | + | |
| - | Border | + | |
| - | Margins | + | |
| - | Alignment | + | |
| - | Colour | + | |
| - | Some properties, particularly em and percentage values, depend on an element' | + | |
| + | * CSS treats your web page as if every element is enclosed in an invisible [[# | ||
| + | * Box //height//, //width//, // | ||
| + | **Table heading links to w3schools references on this subject.** | ||
| + | ^The CSS Box^[[http:// | ||
| - | Case Study: Developing a Positioning Style Sheet | + | < |
| - | This is the document as we want it to appear when it is finished | + | <div style=" |
| - | [Finshed result.] | + | <div style=" |
| + | <div style=" | ||
| + | <div style=" | ||
| + | <div style=" | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| - | Document Structure | ||
| - | This is the logical structure | + | ===== Consequences |
| - | <div id=" | + | * CSS can be used to determine the appearance and position of each element' |
| - | < | + | * Gives considerable control over layout. |
| - | < | + | * Element' |
| - | < | + | * Default representation can be changed by a style declaration. |
| - | <p id=" | + | * Elements are displayed in the order that the HTML flows from top to bottom |
| - | <a class=" | + | * Line breaks at the beginning and end of every block-level box. |
| - | <p class=" | + | |
| - | <div id=" | + | |
| - | < | + | |
| - | < | + | |
| - | <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. | ||
| + | ===== Types of Positioning ===== | ||
| - | Visual design elements | + | * Leave the box in the flow -- the default |
| - | 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 | + | * Remove the box from the flow and specify its exact coordinates with respect either to: |
| - | [Box-model layout of the document] | + | * Its parent element (absolute) |
| + | * The browser window (fixed) | ||
| + | * Its default position | ||
| + | * If boxes overlap, their relative position (stacking order) can be specified using the so-called '' | ||
| - | Changing the Background | ||
| - | To use a background image: | ||
| - | #wrap { | + | ===== Box Formatting ===== |
| - | background-image: | + | |
| - | background-position: | + | |
| - | background-repeat: | + | |
| - | } | + | |
| + | * Once its position is decided the following properties can be set: | ||
| + | * Size (height and width) | ||
| + | * Padding | ||
| + | * Border | ||
| + | * Margins | ||
| + | * Alignment | ||
| + | * Colour | ||
| + | * Some properties, particularly '' | ||
| + | ===== Case Study: Developing a Positioning Style Sheet ===== | ||
| + | This is the document as we want it to appear when it is finished | ||
| + | [[http:// | ||
| - | Notes | + | ===== Document Structure ===== |
| - | To change | + | * Open the [[http:// |
| + | * Examine the structure. | ||
| - | # wrap { background: url(bench.jpg) left top repeat; } | ||
| - | #screen { background: #FEF6F8; } | ||
| - | a:focus a:hover a:active { background: #F3CFB6; } | ||
| - | #sidebar { background: #F5F8FA; } | ||
| + | ===== The HTML5 display-role reset ===== | ||
| - | Notes | + | * 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:// | ||
| - | Setting the Height or Width for the Element | + | ---- |
| - | To set the height or width for an element: | + | <code css> |
| + | charset " | ||
| - | #wrap { width: 90%; max-width: 900px; min-width: 480px; } | + | /* 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; | ||
| + | } | ||
| + | </ | ||
| - | #main {width: 75%; } | + | ===== The CSS Reset ===== |
| - | .photo { width: 100px; height: 75px; } | + | * Common technique, ensures that design starts from a blank slate on all browsers |
| + | * [[http:// | ||
| + | ---- | ||
| + | <code css> | ||
| + | /* CSS RESET | ||
| + | ------------------------------------------------ */ | ||
| + | /* http:// | ||
| + | v2.0 | 20110126 | ||
| + | | ||
| + | */ | ||
| - | [Setting the width and height of an element] | + | 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: | ||
| + | } | ||
| + | </ | ||
| - | Notes | + | ===== Changing the Background |
| - | + | ||
| - | 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] | + | |
| - | + | ||
| - | 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' | + | |
| - | + | ||
| - | 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' | + | |
| - | 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: | + | |
| - | + | ||
| - | .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' | + | |
| - | + | ||
| - | a: | + | |
| - | + | ||
| - | [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' | + | |
| - | 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: | + | |
| - | + | ||
| - | [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 ' | + | |
| - | + | ||
| - | + | ||
| - | Consequences of the Box Model | + | |
| - | + | ||
| - | CSS can be used to determine the appearance and position of each element' | + | |
| - | Gives considerable control over layout. | + | |
| - | Element' | + | |
| - | 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' | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | 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=" | + | |
| - | <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. | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | 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 | + | |
| 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) |
| - | background-position: left top; | + | |
| - | background-repeat: | + | |
| } | } | ||
| + | </ | ||
| + | [[http:// | ||
| - | Notes | + | ===== To change the background colour |
| - | + | ||
| - | | + | |
| - | + | ||
| - | # wrap { background: url(bench.jpg) left top repeat; } | + | |
| - | #screen { background: #FEF6F8; } | + | |
| - | a:focus a:hover a:active { background: #F3CFB6; } | + | |
| - | #sidebar { background: #F5F8FA; } | + | |
| - | + | ||
| - | + | ||
| - | 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: | + | |
| - | .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] | + | |
| - | + | ||
| - | 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' | + | |
| - | + | ||
| - | 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' | + | |
| - | 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] | + | <code css> |
| + | #page { background: #fef6f8 } | ||
| + | a:focus | ||
| + | a:hover | ||
| + | a:active { background: #F3CFB6; } | ||
| + | .logo a:hover { background: transparent; | ||
| + | .sidebar { background: #f5f8fa; } | ||
| + | </ | ||
| - | Once the navbuttons div is on top, the links work as expected. | + | [[http:// |
| + | ===== Setting the Height or Width for the Element ===== | ||
| + | * [[http:// | ||
| + | * [[http:// | ||
| - | 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: | + | ===== 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' |
| + | * 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 |
| - | We can then change the cursor and the background of the home link so that it doesn' | + | |
| - | a: | + | ===== Offsetting Elements in the Natural Flow ===== |
| - | [Changing the link style and cursor] | + | ===== Positioning Elements Absolutely ===== |
| - | Notes | + | ===== Positioning Elements in 3d ===== |
| - | Determining | + | ===== Determining |
| - | | + | ===== Aligning |
| - | 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 | + | * [[http:// |
| + | * [[http:// | ||
| + | * [[http:// | ||
| - | [Aligning images vertically] | ||
eg-146/lecture16.1332186557.txt.gz · Last modified: 2012/03/19 19:49 by eechris