Layout with Styles

Castro Chapter 11

Tables vs. CSS

You can produce “liquid layouts” (layouts that stretch as the browser is resized) using tables or CSS.

However, CSS styles can be updated in a central location and consequently affect changes across your entire site. This cannot be accomplished with tables.

Additionally, CSS separates formatting & style rules from the content of your page.

Structuring Your Pages

Divide your page into logical sections using the <div> tag(ex: “header”, “main”, “footer”)

Place your content in the order that would be most useful if CSS were not used.

Use header elements (h1, h2,…) consistently throughout your pages.

Structuring Your Pages (2)Window document body div “header” div “main” div “footer”

The Box Model

Every element has an invisible box around it.

The invisible box has four parts to it:• Content area

• Padding

• Border

• Margin

The Box Model Examples

W3C Box Model Specifications

ILoveJackDaniels.com (Simplified Model)

HicksDesign 3D Box Model

Positioning With CSSWe can leverage the power of CSS to help us position our

elements in our pages.

4 Ways to Position an Element Box1. Static: leaves the box where it is found in the flow of the

page.2. Absolute: places the box exactly where you want it on the

page with respect to its parent.3. Fixed: place the box in a fixed location in the browser

window.4. Relative: places the box relative to its natural position.

Z-Index: determines the stacking order of overlapping boxes.

Changing Backgrounds

We can change the backgrounds of our boxes. The following CSS rule creates a background image of an avacado that does not repeat and will always appear at the top left corner of the screen. The background color of the page is green.

Setting Box Width / Height

The code below sets the “main” division to a width and height of 90% of a browser’s window. As a user resizes the browser window the “main” division will stretch.

Setting Margins

The code below demonstrates several possible options for setting the margins around a box. Note: the value must be set in clockwise order (top, right, bottom, left).

Setting Padding

The code below demonstrates several possible options for setting the padding around a box. Note: the value must be set in clockwise order (top, right, bottom, left).

Absolute Positioning

Places your box anywhere on a page you choose, with respect to its parent.

Fixed Positioning

Places your box at a fixed location on the page. As a user scrolls through your page, the image does not move from its affixed location. The following code forces content to stay at the top left corner of the browser.

Float Positioning

Forces your box to the right or left of your text (and other elements) on your page.