09 css positioning and layout
DESCRIPTION
TRANSCRIPT
![Page 1: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/1.jpg)
CSS Positioning and Layout
![Page 2: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/2.jpg)
Pages need to be laid out
But how? � Tables � Absolute positioning � Floated divs
![Page 3: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/3.jpg)
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!
![Page 4: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/4.jpg)
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.
![Page 5: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/5.jpg)
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.
![Page 6: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/6.jpg)
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
![Page 7: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/7.jpg)
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
![Page 8: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/8.jpg)
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.
![Page 9: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/9.jpg)
Demo: floats Hands-on floats
![Page 10: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/10.jpg)
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
![Page 11: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/11.jpg)
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
![Page 12: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/12.jpg)
Demo: Fixed width Hands-on fixed widths
![Page 13: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/13.jpg)
The box model provides aesthetic space
Margins � Space inside the
container between the container and the contents
Padding � Space outside the
container between sections
![Page 14: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/14.jpg)
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
![Page 15: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/15.jpg)
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!
![Page 16: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/16.jpg)
Demo: Adding padding and margins Hands-on adding padding and margins
![Page 17: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/17.jpg)
You can have different box sides
� The four sides are specified in "TRouBLe" order.
� Top, Right, Bottom, Left
![Page 18: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/18.jpg)
Demo: Disparate sides in the box model Hands-on disparate sizes in the box model
![Page 19: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/19.jpg)
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
![Page 20: 09 css positioning and layout](https://reader034.vdocuments.mx/reader034/viewer/2022051323/5495c18ab479594c4d8b4dba/html5/thumbnails/20.jpg)
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/