CSS for Layout by pptfiles

VIEWS: 16 PAGES: 12

									The Information School at the University of Washington

CSS for Layout
Bob Boiko UW iSchool ischool.washington.edu Metatorial Services Inc. www.metatorial.com

All materials copyright Bob Boiko. Do not use without permission

The Information School at the University of Washington

What I want you to know…
• • • • Some perspective on more advanced HTML The idea of <div> and <span> Some attributes of CSS we have not covered Doing layout with positioning rather than tables

All materials copyright Bob Boiko. Do not use without permission

The Information School at the University of Washington

Some perspective
• You’ve now got the basics + • Do you want to stop or go on? • Do you want to be
– An HTML expert – An HTML user – An HTML novice

• Do you want to
– know it – Load it on demand
All materials copyright Bob Boiko. Do not use without permission

The Information School at the University of Washington

Div’s and Span’s
• A div is just a container
– Space before – Space after – Called a block element because it puts the stuff inside it in a block

• A span is just a container
– No space before or after – Called an inline element because it is used inline with the block it is part of
All materials copyright Bob Boiko. Do not use without permission

The Information School at the University of Washington

Div’s instead of tables
• • • • Tables place blocks in a grid on the page Div’s place blocks in a grid on the page Div’s give you more control Div’s load faster and in the order you want. • Div’s make your code a lot more readable

All materials copyright Bob Boiko. Do not use without permission

The Information School at the University of Washington

Div’s and tables
• Divs for
– Page level layout – Reusable layout

• Tables for
– Small scale layout – One-off layouts – Real tables

All materials copyright Bob Boiko. Do not use without permission

The Information School at the University of Washington

Doing Div Layout

All materials copyright Bob Boiko. Do not use without permission

The Information School at the University of Washington

Basic method
• Create a layout and name the areas

• In the CSS file:
– Create CSS styles for each area that have the position and bordering – Create an outer style that all the inner areas are within (the bounding box)

• In the HTML file
– Create the outer div and style it – Create the inner divs in the order you want them to show up on the screen and style them
All materials copyright Bob Boiko. Do not use without permission

The Information School at the University of Washington

Some old CSS attributes
• • • • Border Margin Padding background-color

All materials copyright Bob Boiko. Do not use without permission

The Information School at the University of Washington

Some new CSS attributes
• • • • • • Height, width Absolute, relative Border-bottom Float – go all the way to the… Clear- kill the float Overflow – scroll bars

All materials copyright Bob Boiko. Do not use without permission

The Information School at the University of Washington

Demo: Let’s do a basic div-based layout

All materials copyright Bob Boiko. Do not use without permission

The Information School at the University of Washington

Some other resources
• CSS Layout Techniques: for Fun and Profit
– http://www.glish.com/css/

• Style Sheets
– http://www.devarticles.com/c/a/Web-StyleSheets/DIV-Based-Layout-with-CSS/

• CSS Layout
– http://www.yourhtmlsource.com/stylesheets/ csslayout.html
All materials copyright Bob Boiko. Do not use without permission


								
To top