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


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)


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


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


6

Creating a ColumnUse the <div> tag to set up a “wrapper” containing your layout

Style it, including a fixed width


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) 8

A Two Column Layout

9

Let’s Add a Third Column


CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 10

A Three Column Layout

11

Headers and Footers


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>


13

Complete Example


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>


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


16

Using the Inner <div>Add a <div> of class inner and change styling for <article> as follows:


17

Using the box-sizing Property


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


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


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


21

A More Complex Example


22

Content The HTML for the content of this page would have an overall structure like this:


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


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


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


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


http://www.w3schools.com/default.asp

http://www.w3schools.com/default.asp

Documents

Page Layout CHAPTER 5 1 CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION)