Using CSS for Page Layout

Types of HTML Elements Block-Level Element –Creates blocks of content e.g. div, h1..h6, p, ul, ol, li, table, form –They start a new line when you use them –Can contain other blocks, inline elements, text, or data Inline Element –Define text or data e.g. span, a, img, br –They do not start a new line –Usually contain other inline tags, text, or data Non-display elements –Tags that aren’t meant to be displayed (e.g. head & style tags)

Div Tag The div tag groups block-elements in your HTML file You can apply styles using CSS to the elements between the opening and closing div tags

Span Tag The span tag groups inline-elements in your HTML file You can apply styles using CSS to the elements between the opening and closing span tags

Div Versus Span Since span groups inline-elements, only use span when using inline styles You should use div tags with class or id attributes and external styles sheets

Layout with Div and CSS Within HTML you can define different area of your page with div tags With a stylesheet you can control various properties of these divisions Some properties are: –Background –Size –Position –Float

Background Property The background of each division can be modified individually

Size Properties You can control the size of a division with the width and height properties The possible values are: –Auto (browser calculates) –xxx% (xxx is a value from 0-100) –Length (in px, cm, etc…)

Position Property ValueDescription StaticDefault. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations) RelativeAn element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position AbsoluteAn element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties FixedAn element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)

Float Property This property will allow you to set how a division with “float” next to another division Values are: –Left –Right –None