Using CSS for page layout

Size: px

Start display at page:

Download "Using CSS for page layout"

Colleen Underwood
5 years ago
Views:

1 Using CSS for page layout Advantages: Greater typographic control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control Increased accessibility Ability to define styles for multiple media types Support of the Semantic Web Disadvantages: There still remain issues with the lack of uniform browser support of CSS Those already adept at designing page layout using HTML tables will see a temporary drop in their productivity as they learn CSS layout 6-1

2 The box model Content: Text and web page elements in the container Padding: Area between the content and the border Border: Area between the padding and the margin Margin: Determines the empty space between the element and adjacent elements 6-2

3 The box model (continued) When you set the width of an element, you are setting the width of its content area. To get the actual width of the box on the screen, you need to add to that: (the width of the margin + the width of the border + the width of the padding) 2 The background properties of an element apply to its content, padding and border areas, but not to its margin area. The margin is always transparent. (Well, except for <body>) The default value of the padding is usually zero. non-zero default value for margins. By default, an element has no border. However, browsers often have a 6-3

4 Normal flow By default, the elements of your page are displayed in normal flow, that is, from left to right, and then from top to bottom. Recall that, in normal flow: inline elements are always displayed to the right of the previous element and on the same line (if there is enough space on that line within their containing element). block-level elements always start a new line, and the element following them also starts on a new line; in other words, a block-level element is always displayed on its own line. You should also know that, by default: Block-level elements use all of the horizontal space that their container element gives them. Inline elements use only the space they need to display their contents (together with padding/margins). However, it is possible to explicitly override the default width and height of a block-level element (demo). 6-4

5 Positioning elements with CSS 1. Static positioning: It is the default, that is, according to normal flow 2. Relative positioning A relatively positioned element is positioned relative to its normal position in the flow. The content of a relatively positioned element can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow. 3. Absolute positioning Absolutely positioned elements are removed from the normal flow. The document and other elements behave as if the absolutely positioned element does not exist. 4. Fixed positioning An element with fixed positioning is positioned relative to the browser window. It will not move even if the window is scrolled. Fixed positioned elements are removed from the normal flow. The document and other elements behave as if the fixed positioned element does not exist. ( Floating is yet another way to position an element more on that later) 6-5

6 Relative positioning The (empty) space for the element is still in the normal flow but the display of the element is offset from its normal position.... <style> body { background-color: #666; font-size: 3em; line-height: 200%; }.shifted { position: relative; top: 20px; right: 50px; } span { background-color: #FFF; border: 1px solid #000; } p { background-color: #666666; } </style> </head> <body> <p><span>static 1</span> <span>static 2</span> <span>static 3</span> <span>static 4</span> <span>static 5</span> <span class="shifted">relative</span> <span>static 6</span> <span>static 7</span> <span>static 8</span> <span>static 9</span> <span>static 10</span> </p> </body> 6-6

7 Absolute positioning An absolute position element is positioned relative to the first containing element that has a position other than static. If no such element is found, the containing block is <html>, that is, the canvas of the entire window.... <style> body { background-color: #666; font-size: 3em; line-height: 200%; }.shifted { position: absolute; top: 20px; right: 50px; } span { background-color: #FFF; border: 1px solid #000; } p { background-color: #666666; /* position: relative; */ } </style> </head> <body> <p><span>static 1</span> <span>static 2</span> <span>static 3</span> <span>static 4</span> <span>static 5</span> <span class="shifted">relative</span> <span>static 6</span> <span>static 7</span> <span>static 8</span> <span>static 9</span> <span>static 10</span> </p> </body> What if top were replaced with bottom? What if the comment were removed? 6-7

8 Fixed positioning An element with fixed positioning is positioned relative to the browser window (not a containing element nor the window s canvas, as in absolute positioning). It will not move even if the window is scrolled.... <style> body { background-color: #666; font-size: 3em; line-height: 200%; }.shifted { position: fixed; top: 20px; right: 50px; } span { background-color: #FFF; border: 1px solid #000; } p { background-color: #666666; } </style> </head> <body> <p><span>static 1</span> <span>static 2</span> <span>static 3</span> <span>static 4</span> <span>static 5</span> <span class="shifted">relative</span> <span>static 6</span> <span>static 7</span> <span>static 8</span> <span>static 9</span> <span>static 10</span> </p> </body> 6-8

9 New HTML5 structural elements The following elements are like <div> but have more meaningful names. <section>: a thematic grouping of content typically with a header; examples include a chapter in a book, a tabbed page in a dialog box, or the components of a web page such as an introduction, news items, or contact information <nav>: a section with navigation links, that is, a section of a page that links to other pages or to parts within the page <article>: a self-contained composition in a document that is, in principle, independently distributable or reusable; examples includes a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, etc. <aside>: a section of a page that consists of content that is tangentially related to the main topic; often rendered as a sidebar <hgroup>: used to group a set of <h1>-<h6> elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines <header>: a group of introductory or navigational aids, including <h1>-<h6>, <hgroup>, logo, etc. <footer>: typically contains information about its parent section such as who wrote it, links to related documents, copyright data, etc. 6-9

HTML Organizing Page Content

HTML Organizing Page Content CSS for layout Examples http://www.shinybytes.com/newcss.html Generic Elements Used to create a logical grouping of content or elements on the page Can be customized to describe