Page Layout CHAPTER 5 1 CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION)
-
Upload
quentin-clarke -
Category
Documents
-
view
215 -
download
0
description
Transcript of Page Layout CHAPTER 5 1 CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION)
1
Page LayoutCHAPTER 5
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
2
Multi-column layoutsMost webpages use multi-column layouts in order to maximize “above the fold” content
Three basic approaches to multi-column layouts:Fixed width (column sizes do not change when user changes browser window size)
Most common width is 960px, because most monitors can accommodate that, and the number 960 is divisible with many numbers making it easier to get nice and even column width (2x480, 3x320, 4x240, 5x192, 6x160, etc.)
Fluid (column sizes adjust as the user changes the browser window size, but element sizes do not) Scales better with larger resolution monitors, but you give up control on the precise layout, because elements change relative
positions as the window size changesElastic (column sizes adjust as the user changes the browser window size, while element sizes zoom)
Very difficult to manage, will not be covered in this course
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
3
Layout HeightNormally you should not set the height of a layout (or of an element for that matter)
Content tends to change. If height is fixed, boxes will either:Have empty space at the bottom, when content is lessOverflow the box when content is more
The content is either clipped or it floods adjacent boxes, depending on the value of the overflow property
If you leave the height property to its default value of auto, elements will expand or contract as neededContent around it will also shift up and downLook will remain compact (rather than showing gaps)
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
4
Layout WidthBy contrast to height, width needs to be controlled
You want the content to fit in a reasonably sized browser window
Generally it is preferable to set the column size, but allow the elements in the column to expand to fit the column widthBlock elements already do so by default
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
5
Structuring ContentBefore we consider the layout of content on a page, we need to think about its structure
HTML5 uses new semantic elements, because they help with the automated analysis of web page contentThey replace the extensive use
of <div> with more semantically meaningful tags
In HTML5 <div> tends to be only used for generic purposes when no semantic tag fits
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
6
Creating a ColumnUse the <div> tag to set up a “wrapper” containing your layout
Style it, including a fixed width
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
7
Adding Another ColumnTo add a column:
Add another semantic tag to define your new structural unit Set the width for all structural units such that they add up to the width of the wrapper Float all structural units
E.g.: Add a navigation bar as the left column
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 8
A Two Column Layout
9
Let’s Add a Third Column
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 10
A Three Column Layout
11
Headers and Footers
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
Note: the only styling for <header> and <footer> was background colour, so we can see it.Question: Why is the footer positioned “wrong”?
12
Using the clear propertyBlock elements following a floated element are pushed up and left as much as possible
This is to create the text floating around an image effect we have seen earlier in this course
Like we learned before, we can use the clear property to change this behaviorAdd {clear:both;} or {clear:left;} to the styling of <footer>
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
13
Complete Example
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
14
Padding and Borders for ColumnsSeveral things can change the actual space occupied by columns, and mess up the layout:Adding margins (which you almost always want to add
for esthetic reasons)Adding content that forces a size wider than the
column width: A long text without spaces, such as a URL An image
Here is what happens to the previous web page if you add {padding: 10px 20px;} to <article>
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
15
Fixing the SlipThree ways to fix the slip (in least recommended to most recommended order):
Adjust the width of the column to compensate for the padding In the example we used, the width of <article> would go down from 600px to 560px Downside: you have to remember that every time you change padding, you need to adjust the width
Apply the padding and border to the elements inside the column In this case to the paragraph inside <article> Keep in mind, it works only as long as the element inside the column is NOT fixed size You will need to do so for every element in the column; can be tedious and error prone Does not work well with borders Best way: add a <div> with {width:auto;} (that’s default, by the way) and add padding and borders to this new <div>
Use the {box-sizing:border-box;} declaration on every column Has the effect of the box behaving like un un-sized box, i.e., margins and borders are taken from the content space
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
16
Using the Inner <div>Add a <div> of class inner and change styling for <article> as follows:
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
17
Using the box-sizing Property
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
18
Protecting Against Oversized ElementsWe dealt with margins and borders, but oversized elements like images or URLs can still cause problems
Here are some options:Use the img {max-width:100%;} to force the browser to resize images to fit in the column
Of course, you may limit that, as in article img {max-size:100%;}Use the {word-wrap:break-word;} style declaration on your columns to avoid problems with extra long
words (like URLs) Careful though… words are not broken according to normal hyphenation rules
Use the {overflow:hidden;} style declaration for each column It will cause clipping of oversized content
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
19
TablesHTML tables are a way to structure content in a table format
Tables consist of:Table data elements <td> </td>A “wrapper” for all the table elements in a row <tr> </tr>A “wrapper element for the entire table <table> </table>
From a presentation perspective:Rows pick up the height of the largest table data elementThe cells of the table align
By setting the display property of a semantic element to table-cell you can get the browser to display the content in a columnar format, without the need for wrappers, inner divs, etc.If you leave a column un-sized, you get a fluid layout
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
20
A Fluid 3-column LayoutHere is the easiest way to create this layout:
Start with the example from slide 13 Replace all instances of float:left; with display:table-cell;Delete the width:600px; from the style for <article>Add padding to each column, as desired
This works only post IE7
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
21
A More Complex Example
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
22
Content The HTML for the content of this page would have an overall structure like this:
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
23
Multiple Elements As page layouts get more complex, the same tags (like <div> <section> or <article> show up many times
Often we want different styles, hence the tendency to slap a class id on every itemPhilosophically wrong: classes are meant to identify things that have common characteristics, not to
distinguish between different instances of the same tag
A better approach (shown) is to add IDs at the top level of each main sectionContextual selectors can then be used to specify different styles for different tags of the same kind
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
24
CSS for Row 4Using section ID feature_area in a contextual selector with article we can style all 3 boxes
Having used “wrapper” <div> tags of class inner for the articles in this row, we can now style all three with one set of rules
Anything requiring individual styling (in this case borders) can then use the structural pseudo class nth-child to do so
Reading selectors in the style rules provide a clear image of where the rules apply
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
25
Using Inner <div>sThe use of inner <div>s has been seen as an option for setting margins that avoid the affecting column width
This use is valid, but as we have seen, other options exist for achieving that purpose
Inner <div>s are useful however beyond the margin issue, because they can be used very well for the purpose of styling different sections differently
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
26
How Can I Find the Syntax I Need?The best source is the W3School at http://www.w3schools.com/default.asp
Three tabs help you navigate to:TutorialsReferencesExamples
You can find pretty much anything you need on this website
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)