1.
Lecture 2 : CSS III SFDV2001 Web Development

2.
Page layout with CSS <ul><li>Tables, though still heavily used by web designers to control page layout, were never intended for that purpose. </li></ul><ul><li>Ideally tables should be used for data only. </li></ul><ul><li>As browsers become better at supporting web standards and as users of the web adopt those browsers, layout controlled entirely by CSS is becoming an increasingly realistic option. </li></ul><ul><li>Even when table layout is still necessary, CSS streamlines their use, and makes your code much cleaner. </li></ul>

3.
Standard document flow <ul><li>When no layout control is implemented for an HTML page, elements flow from top to bottom, left to right: </li></ul><ul><ul><li>Block-level elements produce a line break that sees subsequent block-level elements come beneath them. </li></ul></ul><ul><ul><li>Inline elements come one after the other, left to right, in the order they appear. </li></ul></ul><ul><ul><li>The order sequence is determined by the tag sequence in your HTML. </li></ul></ul><ul><li>When you expand or contract the browser window, block-level elements alter to fit the new width. </li></ul>

4.
Standard document flow <ul><li>When you position elements with CSS you can remove an element from the normal flow. </li></ul><ul><li>Order your HTML sensibly so that someone accessing it without style information can make sense of it: </li></ul><ul><ul><ul><li>Title </li></ul></ul></ul><ul><ul><ul><li>Navigation </li></ul></ul></ul><ul><ul><ul><li>Main content </li></ul></ul></ul><ul><ul><ul><li>Footer </li></ul></ul></ul><ul><li>That order won’t affect what you can achieve with CSS with regard to layout. </li></ul>

5.
Float <ul><li>In Transitional HTML we could align an image to the right and have text wrap around it on the left using the align attribute. </li></ul><ul><li>In CSS such behaviour is not limited to images. You can float any element. </li></ul><ul><li>ul#nav{ </li></ul><ul><li>float: left; </li></ul><ul><li>} </li></ul>

6.
Clear <ul><li>Just as we had the clear attribute of <br> in transitional HTML to stop text from sitting beside an aligned image when we didn’t want it to, so we have clear to accompany float in CSS. </li></ul><ul><li>The clear attribute of <br> had the possible values: left , right or all . </li></ul><ul><li>In CSS clear gets: left , right , both , none or inherit . </li></ul><ul><li>The clear property can only be applied to block-level elements. </li></ul>

7.
Position <ul><li>There are a number of different values of position in CSS: </li></ul><ul><ul><ul><li>Static </li></ul></ul></ul><ul><ul><ul><li>Relative </li></ul></ul></ul><ul><ul><ul><li>Absolute </li></ul></ul></ul><ul><ul><ul><li>Fixed </li></ul></ul></ul><ul><li>Static is the normal (default) position of elements on your page. Elements conform to the standard document flow. </li></ul><ul><li>Position (and any of its values) can apply to any element. </li></ul>

8.
Position <ul><li>Once you have determined what kind of positioning an element will employ (relative, absolute or fixed), the actual positioning is done via four properties: </li></ul><ul><ul><ul><li>Top </li></ul></ul></ul><ul><ul><ul><li>Right </li></ul></ul></ul><ul><ul><ul><li>Bottom </li></ul></ul></ul><ul><ul><ul><li>Left </li></ul></ul></ul><ul><li>The values of these properties can be a length or a percentage. </li></ul><ul><li>Top position refers to an elements distance from the top (the top of what depends on what kind of positioning you are employing). </li></ul>

9.
position: relative; <ul><li>Relative positioning moves an element from its place in the standard document flow but retains the space where it came from: </li></ul><ul><li>position: relative; </li></ul><ul><li>top: 40px; </li></ul><ul><li>left: 40px; </li></ul>40 40

10.
position: absolute; <ul><li>Absolute positioning moves an element from its place in the standard document flow and closes the space where it came from. </li></ul><ul><li>An element is positioned absolutely with relation to its nearest parent element that isn’t statically positioned. </li></ul><ul><li>position: absolute; </li></ul><ul><li>top: 40px; </li></ul><ul><li>left: 40px; </li></ul>40 40

11.
position: fixed; <ul><li>Like absolute positioning, fixed positioning removes an element from the standard document flow, but instead of being fixed relative to its parent element it is fixed in relation to the view-port (normally the browser window). </li></ul><ul><li>Can be useful to recreate frame like behaviour where a navigation menu can stay fixed while the rest of the content scrolls. </li></ul><ul><li>Not as well supported as relative and absolute positioning. </li></ul>

12.
Position Combinations <ul><li>Relative and absolutely positioned elements in particular can be combined to give your layout greater flexibility. </li></ul><ul><li>An absolutely positioned element inside a relative element is positioned absolutely with respect to that relatively positioned parent. So the parent may be flexible but the child always stays in the same place in relation to it. </li></ul><ul><li>Time for an example I think. </li></ul>

13.
CSS and tables <ul><li>Please don’t get the message “tables are evil”. </li></ul><ul><li>Tables should absolutely be used for tabular data: </li></ul>

14.
CSS and tables <ul><li>And they are still necessary for some layout purposes. Complex forms are still easier to control with a table than CSS (and in many instances the form information fits the tabular data description). </li></ul><ul><li>When you have to use a table for layout control keep it as clean as possible; use your CSS to style it. </li></ul><ul><li>Things like empty cells, though there were never very many good excuses for them, should be rare with CSS. </li></ul><ul><li>Combining CSS and tables for layout can be more of a headache than using CSS alone, so don’t think you’re taking the easy route. </li></ul>

15.
Learn by example <ul><li>And by practice. Lots and lots of practice. </li></ul><ul><li>You could sit in a thousand lectures, read a thousand articles and still not really “get” CSS. </li></ul><ul><li>You absolutely must practice it: work out how things do what they do through experiment. </li></ul><ul><li>There is no learning experience like encountering a problem, getting incredibly frustrated and then feeling elated when you find a solution. </li></ul><ul><li>You will not come out of this course an expert in CSS. </li></ul>

16.
Recommended sites: Why Tables for Layout is Stupid: http:// www.hotdesign.com/seybold / A List Apart: Practical CSS Layout Tips, Ticks & techniques: http:// www.alistapart.com/articles/practicalcss / Max Design Floatutorial: http:// css.maxdesign.com.au/floatutorial / Further reading: Web Design in a Nutshell, 3rd Edition by Jennifer Niederst Robbins