lecture2 css 3
TRANSCRIPT
SFDV2001 Lecture 13, Semester, Year
Lecture 2 :
CSS III
SFDV2001Web Development
SFDV2001 Lecture 13, Semester, Year
Page layout with CSS
Tables, though still heavily used by web designers to control page layout, were never intended for that purpose.
Ideally tables should be used for data only.
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.
Even when table layout is still necessary, CSS streamlines their use, and makes your code much cleaner.
SFDV2001 Lecture 13, Semester, Year
Standard document flow
When no layout control is implemented for an HTML page, elements flow from top to bottom, left to right:
• Block-level elements produce a line break that sees subsequent block-level elements come beneath them.
• Inline elements come one after the other, left to right, in the order they appear.
• The order sequence is determined by the tag sequence in your HTML.
When you expand or contract the browser window, block-level elements alter to fit the new width.
SFDV2001 Lecture 13, Semester, Year
Standard document flow
When you position elements with CSS you can remove an element from the normal flow.
Order your HTML sensibly so that someone accessing it without style information can make sense of it:
• Title
• Navigation
• Main content
• Footer
That order won’t affect what you can achieve with CSS with regard to layout.
SFDV2001 Lecture 13, Semester, Year
Float
In Transitional HTML we could align an image to the right and have text wrap around it on the left using the align attribute.
In CSS such behaviour is not limited to images. You can float any element.
ul#nav{float: left;
}
SFDV2001 Lecture 13, Semester, Year
Clear
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.
The clear attribute of <br> had the possible values: left, right or all.
In CSS clear gets: left, right, both, none or inherit.
The clear property can only be applied to block-level elements.
SFDV2001 Lecture 13, Semester, Year
Position
There are a number of different values of position in CSS:
• Static• Relative• Absolute• Fixed
Static is the normal (default) position of elements on your page. Elements conform to the standard document flow.
Position (and any of its values) can apply to any element.
SFDV2001 Lecture 13, Semester, Year
PositionOnce you have determined what kind of positioning an element will employ (relative, absolute or fixed), the actual positioning is done via four properties:
• Top• Right• Bottom• Left
The values of these properties can be a length or a percentage.
Top position refers to an elements distance from the top (the top of what depends on what kind of positioning you are employing).
SFDV2001 Lecture 13, Semester, Year
position: relative;
Relative positioning moves an element from its place in the standard document flow but retains the space where it came from:
position: relative;top: 40px;left: 40px;
4040
SFDV2001 Lecture 13, Semester, Year
position: absolute;
Absolute positioning moves an element from its place in the standard document flow and closes the space where it came from.
An element is positioned absolutely with relation to its nearest parent element that isn’t statically positioned.
position: absolute;top: 40px;left: 40px;
4040
SFDV2001 Lecture 13, Semester, Year
position: fixed;
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).
Can be useful to recreate frame like behaviour where a navigation menu can stay fixed while the rest of the content scrolls.
Not as well supported as relative and absolute positioning.
SFDV2001 Lecture 13, Semester, Year
Position Combinations
Relative and absolutely positioned elements in particular can be combined to give your layout greater flexibility.
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.
Time for an example I think.
SFDV2001 Lecture 13, Semester, Year
CSS and tables
Please don’t get the message “tables are evil”.
Tables should absolutely be used for tabular data:
SFDV2001 Lecture 13, Semester, Year
CSS and tables
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).
When you have to use a table for layout control keep it as clean as possible; use your CSS to style it.
Things like empty cells, though there were never very many good excuses for them, should be rare with CSS.
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.
SFDV2001 Lecture 13, Semester, Year
Learn by example
And by practice. Lots and lots of practice.
You could sit in a thousand lectures, read a thousand articles and still not really “get” CSS.
You absolutely must practice it: work out how things do what they do through experiment.
There is no learning experience like encountering a problem, getting incredibly frustrated and then feeling elated when you find a solution.
You will not come out of this course an expert in CSS.
SFDV2001 Lecture 13, Semester, Year
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
SFDV2001 Lecture 13, Semester, Year