Date post: | 18-Dec-2014 |
Category: |
Technology |
Upload: | rap-payne |
View: | 466 times |
Download: | 0 times |
CSS Positioning and Layout
Pages need to be laid out
But how? � Tables � Absolute positioning � Floated divs
You can lay it out using tables
� Header section: Row 1 with colspan=3 � Links: Row 2, column 1 � Content: Row 2, column 2 � Ads: Row 2, column 3 � Footer: Row 3 with colspan=3 � Works great, but semantically wrong!
You can lay it out using absolute positioning <style>!div {! position: absolute;!}!div.header {! height: 100px;!}!div.left {! top: 100px;! width: 100px;!}!div.content {! top: 100px;! left: 100px;!}!</style>!
Unfortunately, this does not scale.
Best to lay it out using floated divs
� We'll show how to do this in the next few pages
� Basically, we'll define the width of a page and each section so that they fit just right.
A word about page flow
� Remember, we have two types of elements � inline elements ◦ Text and other things flow around the element ◦ No concept of width or height
� block elements ◦ A break appears before and after it ◦ Has width, height, borders, padding, and margins
� Sounds like we'll need a hybrid of the two
Float to the rescue! � The style attribute float changes the way that an
element interacts with other elements in terms of layout
� From the CSS spec: ◦ A float is a box that is shifted to the left or right on the
current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side
� Options ◦ left/right: no break before if it can fit on the page ◦ clear: re-establish breaks
Floating takes some getting used to � It is the weirdest thing in layouts � Floating things takes them out of the normal flow
of the text. Think of it like this; a non-floated element sinks to the bottom of the text block. while a floated element 'floats' in a sea of text. The text flows around it instead of being broken up.
� When we float <div>s, we allow them to exist side-by-side
� Floated elements are processed in the order that they're presented in the markup.
Demo: floats Hands-on floats
But there's now a problem with the width � When the width is nice and wide, our sections
work well. � But when the window is narrow, the sections
stack. � Solution: Fix the width. � We should always set a width on floated items
Floats work by aligning their edges
� float: left moves it as far left as it can � float: right moves it as far right as it can � They keep stacking until they run out of room � Then they shift down until they fit
Demo: Fixed width Hands-on fixed widths
The box model provides aesthetic space
Margins � Space inside the
container between the container and the contents
Padding � Space outside the
container between sections
There are many units of measure � Pixels (px) ◦ Affected by screen resolution ◦ Great for absolute control over layout
� Ems (em) ◦ Proportion of the default font of the browser ◦ Great for accessibility
� Points (pt) ◦ From the print world ◦ Great for publishing on paper but not for the web ◦ Use only in print layout
� Percentages (%) ◦ Proportion of the width or height of the container
So, which do I use?
� Use points only for print views � Use percentages and pixels for screen layout � Use ems for text � Best of all worlds this way!
Demo: Adding padding and margins Hands-on adding padding and margins
You can have different box sides
� The four sides are specified in "TRouBLe" order.
� Top, Right, Bottom, Left
Demo: Disparate sides in the box model Hands-on disparate sizes in the box model
Conclusion
� Pages have different sections which require some planning to lay them out
� Our options: ◦ Tables are semantically for data ◦ Absolute positioning is inflexible ◦ Floated divs are strange but are our best bet.
� We also have the box model to help in the aesthetic layout of our sites
Further Study � Excellent overview of table vs. div layouts ◦ http://coding.smashingmagazine.com/2009/04/08/from-
table-hell-to-div-hell/ � Great site with many layout techniques ◦ http://www.noupe.com/css/css-layouts-40-tutorials-tips-
demos-and-best-practices.html � Good overview of absolute positioning ◦ http://www.echoecho.com/csslayers.htm
� Float theory by Smashing Magazine ◦ http://coding.smashingmagazine.com/2007/05/01/css-
float-theory-things-you-should-know/