8/13/2003 designing without tables using css by reshma kumar and marina naito
DESCRIPTION
8/13/ CSS Overview Cascading Style Sheets (CSS) were designed to deal with issues that HTML cannot handle. CSS is a powerful, flexible way to specify HTML formatting. It lets you separate the style and layout of your HTML files from their content, allowing you to control the layout, e.g. fonts, colors, leading, margins, typefaces, and other aspects of style, of a Web document without compromising its structure.TRANSCRIPT
8/13/2003
Designing Without Tables Using CSS
by Reshma Kumar and Marina Naito
8/13/2003 2
Agenda
CSS Overview Pros & Cons of a CSS-Based Site Designing Table-Free Web Sites
8/13/2003 3
CSS Overview Cascading Style Sheets (CSS) were
designed to deal with issues that HTML cannot handle. CSS is a powerful, flexible way to specify HTML formatting.
It lets you separate the style and layout of your HTML files from their content, allowing you to control the layout, e.g. fonts, colors, leading, margins, typefaces, and other aspects of style, of a Web document without compromising its structure.
8/13/2003 4
Pros & Cons of a CSS-Based Site Pros
Separation of content from presentation Because CSS files are typically stored separate from the web pages themselves, a
consistent look and feel can be applied throughout the site from a common source. Increased Stylistic Control
Allows for re-usability and portability One site's color or layout scheme can be applied to others simply by copying the CSS
file. Centralized Design Information Semantic Content Markup
Meaning vs. syntax Accessibility
Multiple web-enabled devices (PDAs, cell phones, and TV-based browsers) can draw on the same source pages, but be displayed in completely different styles. Same for a printer-friendly page. One page serves all purposes!
8/13/2003 5
Pros & Cons of a CSS-Based Site Pros
Better User Experience CSS layouts load faster, because there is less code in them,
and display more quickly on screen because there are no complex tables to sort through. A CSS layout can display important parts of the page before the full page loads.
CSS Reduces Costs Smaller file sizes means savings in bandwidth Time savings in coding
Standards Compliance Cons
Browser limitations Netscape Navigator 4.x and Internet Explorer 4.x and earlier
8/13/2003 6
Building A CSS-Based Site
Site- and page-level issues understanding the workings of CSS
positioning understanding the development of a number
of basic page layouts
8/13/2003 7
Table-Less Layouts
Using CSS Positioning (CSS-P) to Layout Web Pages
When building a site using tables, you have to think in a "tabular" format. think in terms of cells and rows and columns.
And your Web pages will reflect that. When you move to a CSS-P design, you'll start thinking of your pages in terms of the content.
8/13/2003 8
Table-Less Layouts
Rethinking How You Build a Page Header, left nav, content area, right nav,
footer Rather than putting these elements in a table,
use the <div></div> tag to define the different portions of the content, and then use CSS-P to place the content elements on the page. <div id="leftnavigation"></div> <div id="rightnavigation"></div> <div id="content"></div>
8/13/2003 9
Table-Less Layouts
Using CSS, define the position for the id'ed divs. Store the position information in a style call like this: #content {
}
8/13/2003 10
Table-Less Layouts
Content within a div tag will take up as much space as it can, namely 100% of the width of the current location, or the page. So, to affect the location of a section without forcing it to a fixed width, change the padding or the margin elements.
Margin & padding applies to all elements Examples: (see illustrations)
8/13/2003 11
Table-Less Layouts
Box Model:
Element ContentAt the center of the CSS box model is the content itself. Don’t think of this “content” as being the same as words or pictures that comprise the content of a news story or a set of links. The content is anything contained within the area of the box.
Padding (inside box)
Margin (outside box)
Border
8/13/2003 12
Table-Less Layouts
3 Column Layout:
Left Nav
Header
Footer
Content Right Nav
8/13/2003 13
Table-Less Layouts
<div></div>:
Left Nav
Header
Footer
Content Right Nav
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
8/13/2003 14
Table-Less Layouts
id:
Left Nav
Header
Footer
Content Right Nav
<div id=“header”> </div>
<div id=“leftnavigation”> </div>
<div id=“content”> </div>
<div id=“rightnavigation”> </div>
<div id=“footer”> </div>
8/13/2003 15
Table-Less Layouts
For this layout, set the two navigation columns to fixed widths and then set their position absolute, so that they wouldn't be impacted by where they are found in the HTML. #leftnavigation { position: absolute; left: 0; width:
150px; margin-left: 10px; margin-top: 20px; color: #000000; padding : 3px; }
#rightnavigation { position: absolute; left: 80%; top: 20px; width: 140px; padding-left: 10px; z-index: 3; color: #000000; padding: 3px; }
8/13/2003 16
Table-Less Layouts
Then for the content row, set the margins to be somewhat relative to the outer columns. #content { top: 0px; margin: 0px 25% 0
165px; padding: 3px; color: #000000; } (order: top margin, right margin, bottom
margin and left margin) While the page won't look wonderful in non-
CSS-P browsers, it is possible to define how the page will look without any table tags.
8/13/2003 17
Table-Less Layouts
8/13/2003 18
Converting An Existing Page
Objective: Take an HTML heavy design and convert it to HTML + CSS
Step 1: Figure out page structure Take a look at existing page in browser. Add a temp stylesheet with red border for all
table and td elements.
8/13/2003 19
Converting An Existing Page Step 2: Strip Down HTML Markup
Remove transparent images (unnecc. clutter that can be replaced with margin & padding)
Eliminate: font & <br> elements, entities, bgcolor & background attributes, align and valign attributes, width, border & cellpadding table attributes, any table cells containing only an image or nothing, any text & link attributes on the body element.
Do not remove: cellspacing, colspan & rowspan.
8/13/2003 20
Converting An Existing Page
Step 3: Add your Stylesheet Step 4: Benefits
Cleaner document structure Easier to edit & maintain Decreased file size Decreased server load
8/13/2003 21
Converting An Existing Page
Method Size* Characters Server Hits Images Tables Font Tags
All HTML 100% 10,617 4 to 19 18 (16 repeat) 11 49
HTML+CSS 64.2% 6,819 3 2 5 0
HTML with Link 44.6% 4,789 +
2,112 3 to 4 2 5 0
*Compared to the all-HTML method; refers to the size of the HTML document only.
Source: Eric Meyer on CSS by Eric A. Meyer
8/13/2003 22
Resources Standards:
http://jigsaw.w3.org/css-validator/ W3C CSS Validation Service http://www.w3.org/Style/CSS/ W3C Cascading Style Sheets home page
CSS Sites: http://www.alistapart.com/topics/css/ A List Apart http://www.inknoise.com/experimental/layoutomatic.php inknoise http://glish.com/css/ Eric Costello http://www.thenoodleincident.com/ Owen Briggs http://www.bluerobot.com/web/layouts/ The Layout Reservoir http://www.meyerweb.com/eric/css/edge/ Eric Meyer
Books (with web sites): http://www.cssbook.com/ “Designing CSS Web Pages” by Christopher Schmitt http://www.sitepoint.com/books/css1/ “HTML Utopia: Designing Without Tables Using CSS”
by Dan Shafer http://www.glasshaus.com/BookInfo.asp?bookId=59 “Cascading Style Sheets: Separating
Content from Presentation” by Owen Briggs, Steven Champeon, Eric Costello, Matt Patterson http://www.oreilly.com/catalog/css/ “Cascading Style Sheets, The Definitive Guide” by Eric A.
Meyer http://www.ericmeyeroncss.com/ “Eric Meyer on CSS” by Eric Meyer
8/13/2003 23
Resources (continued) Other CSS sites:
http://www.westciv.com/style_master/academy/css_tutorial/ West CIV http://www.csszengarden.com/ Zen Garden – The Beauty in CSS Design http://www.sitepoint.com/books/css1/ http://www.webreference.com/ HTML Utopia by Dan Shafer About.com
8/13/2003 24
Questions