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 19:38] – [Layout with Styles] eechris | eg-146:lecture16 [2012/03/19 20:58] – [Changing the Cursor] eechris | ||
---|---|---|---|
Line 230: | Line 230: | ||
===== Layout with Styles ===== | ===== Layout with Styles ===== | ||
- | * [[#Example 2]] | + | |
- | * [[#Constructing | + | * [[#Another Example Document]] |
+ | * [[#The Box Model]] | ||
+ | * [[#Types of Positioning]] | ||
+ | * [[#Box Formatting]] | ||
+ | | ||
+ | |||
+ | ===== 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) | ||
+ | * Lots of Advnatages (See notes) | ||
+ | * Disadvantages | ||
+ | * Some older browsers are buggy((Notably IE 6 and IE 7)) | ||
+ | * Really old browsers provide no support for layout. | ||
+ | |||
+ | ---- | ||
+ | |||
+ | < | ||
+ | Advantages of Layout with Styles | ||
+ | * Can apply layout to all documents and change with one style sheet | ||
+ | * Smaller files: HTML+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. | ||
+ | * HTML code is cleaner and easier to edit. | ||
+ | * Standard so supported in future. | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ===== Another Example Document ===== | ||
+ | The same [[http:// | ||
+ | |||
+ | * Only the style sheet changes | ||
+ | * Different effects are achieved with style sheets alone. | ||
+ | |||
+ | ---- | ||
+ | |||
+ | 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=" | ||
+ | < | ||
+ | |||
+ | <!-- | ||
+ | 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=" | ||
+ | |||
+ | <div class=" | ||
+ | < | ||
+ | |||
+ | <p class=" | ||
+ | </ | ||
+ | </ | ||
+ | <!-- end .entry #1 --> | ||
+ | |||
+ | <!-- Start Entry #2 --> | ||
+ | <section class=" | ||
+ | < | ||
+ | < | ||
+ | <p class=" | ||
+ | </ | ||
+ | |||
+ | <p class=" | ||
+ | |||
+ | <div class=" | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | <p class=" | ||
+ | </ | ||
+ | <!-- end .entry #2 --> | ||
+ | |||
+ | <!-- Start Entry #3 --> | ||
+ | <section class=" | ||
+ | < | ||
+ | < | ||
+ | <p class=" | ||
+ | </ | ||
+ | |||
+ | <p class=" | ||
+ | |||
+ | <div class=" | ||
+ | < | ||
+ | |||
+ | <p>I never get tired of coming here. There are rows and rows of busy stalls with fresh fruit and vegetables, and spices and nuts. And more than a couple of crazy tourists like me taking pictures. I confuse the locals by talking to them in Catalan, but& | ||
+ | |||
+ | <p class=" | ||
+ | </ | ||
+ | </ | ||
+ | <!-- end .entry #3 --> | ||
+ | </ | ||
+ | <!-- end #main content --> | ||
+ | |||
+ | <!-- ==== START SIDEBAR ==== --> | ||
+ | <div id=" | ||
+ | <aside class=" | ||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | <p class=" | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <ol reversed=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | <p class=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | |||
+ | <!-- ==== START FOOTER ==== --> | ||
+ | <footer id=" | ||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | <ul class=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | <!-- end #footer --> | ||
+ | </ | ||
+ | <!-- #page --> | ||
+ | </ | ||
+ | <!-- #container --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | ===== 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 ===== | ||
+ | |||
+ | * 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:// | ||
+ | |||
+ | < | ||
+ | <div style=" | ||
+ | <div style=" | ||
+ | <div style=" | ||
+ | <div style=" | ||
+ | <div style=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== 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 HTML 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 // | ||
+ | * 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 '' | ||
+ | |||
+ | |||
+ | |||
+ | ===== 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 '' | ||
+ | |||
+ | ===== Case Study: Developing a Positioning | ||
+ | This is the document as we want it to appear when it is finished | ||
+ | [http:// | ||
+ | |||
+ | ===== Document Structure ===== | ||
+ | |||
+ | * Open the [[http:// | ||
+ | * Examine the structure. | ||
+ | |||
+ | |||
+ | ===== 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:// | ||
+ | |||
+ | ---- | ||
+ | |||
+ | <code css> | ||
+ | charset " | ||
+ | |||
+ | /* Style new " | ||
+ | article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section { | ||
+ | display: block; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== The CSS Reset ===== | ||
+ | |||
+ | * Common technique, ensures that design starts from a blank slate on all browsers | ||
+ | * [[http:// | ||
+ | |||
+ | ---- | ||
+ | |||
+ | <code css> | ||
+ | /* CSS RESET | ||
+ | ------------------------------------------------ */ | ||
+ | /* http:// | ||
+ | v2.0 | 20110126 | ||
+ | | ||
+ | */ | ||
+ | |||
+ | 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: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== Changing the Background ==== | ||
+ | |||
+ | To use a background image: | ||
+ | <code css> | ||
+ | #container { | ||
+ | background: url(../ | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | [[http:// | ||
+ | |||
+ | |||
+ | ==== To change the background colour ==== | ||
+ | |||
+ | <code css> | ||
+ | #page { background: #fef6f8 } | ||
+ | a:focus | ||
+ | a:hover | ||
+ | a:active { background: #F3CFB6; } | ||
+ | .logo a:hover { background: transparent; | ||
+ | .sidebar { background: #f5f8fa; } | ||
+ | </ | ||
+ | |||
+ | [[http:// | ||
+ | |||
+ | ===== Setting the Height or Width for the Element ===== | ||
+ | |||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | |||
+ | |||
+ | |||
+ | ===== Setting the Margins around an Element ===== | ||
+ | |||
+ | ===== Adding Padding around an Element ===== | ||
+ | |||
+ | * 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: | ||
+ | |||
+ | |||
+ | ===== Making Elements Float ===== | ||
+ | |||
+ | |||
+ | ===== Controlling Where Elements Float ===== | ||
+ | |||
+ | ===== Setting the Border ===== | ||
+ | |||
+ | ===== Offsetting Elements in the Natural Flow ===== | ||
+ | |||
+ | ===== Positioning Elements Absolutely ===== | ||
+ | |||
+ | ===== Positioning Elements in 3d ===== | ||
+ | |||
+ | ===== Determining How to Treat Overflow ===== | ||
+ | |||
+ | ===== Aligning Elements Vertically ===== | ||
+ | |||
+ | ===== Changing the Cursor ===== | ||
+ | |||
+ | |||
+ | |||
+ | ===== Displaying and Hiding Elements ===== | ||
+ | |||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | ===== 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' | ||
+ | |||
+ | 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 | ||
eg-146/lecture16.txt · Last modified: 2012/03/19 21:30 by eechris