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:38] – [Layout with Styles] eechris | eg-146:lecture16 [2012/03/19 21:30] (current) – [Positioning Elements Absolutely] 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:// | ||
eg-146/lecture16.1332185886.txt.gz · Last modified: 2012/03/19 19:38 by eechris