There are least four ways to position things using CSS. They are
- Static - default positioning, evereything is positioned according to its position in the code and the natural flow of text.
- Relative - used to nudge an element slightly from its natural position in the normal text flow. Applied to this can be top, left, bottom, or right with a % or px value. Bottom and right reverse the meaning of the positive and negative values used with top and left.
- Fixed - positions the item on the viewport regardless of size of page. Does not scroll with the page. Always in the same place on the viewport. Think of this as putting the element on the monitor screen with a post-it note. It does not move relative to the viewport it moves relative to the page. The code for this is position:fixed; the a property of top, left, bottom, or right with either a % or value. Top places the element at the top of the viewport with a positive value moving it down the viewport and a negative value moving it up the viewport. Left places the element on the left side of the viewport with a positive number moving the element toward the right and a negative number moves the element towards the left. Bottom places the element at the bottom of the viewport. With a positive value moving the element up the viewport and a negative value putting the element further down the viewport. Right places the element on the right side of the viewport. With a positive value moving the element to the right and a negative value moving the element left.
- Absolute - positions the element relative to the viewport or a positioned containing element tht is not statically positioned. If there is no containing element then it is positioned to the viewport.
Absolute positioning is usually used to fix an element inside some other element.
Fixed positioning is usually used to position things relative to the viewpost.
Background positions can be controlled through CSS3.
the basic background statement is
There are ways to set the location of the image besides using background image repeats.
background-repeat:direction ; where direction can be repeat-x, repeat-y, no-repeat, or no value. The default is to repeat continuously within the window.
More advanced background features is attachment and position.
background-attachment:value where value can be scroll or or fixed. Attachment says how to afix the image not where to afix the image. Scroll allows the image to move with the page and fixed makes the image stationary.
Use background-position to tell the site where you want to position the background.
backgound-position: horizontal [vertical] where horizontal can be left right center or a number with a unit of measurement behind it for the horizontal measurement. If the vertical value is omitted it defaults to center otherwise use top, center or bottom. If a unit of measurement is used with vertical it is the measurement from the viewport.
With html5 the div for a page have been provided with consistent labels they are
|Tags||Page section useuage|
|<header> ... </header>||Page header the banding section at top of page|
|<nav> ... </nav>||Navigation usually under the header|
|<aside> ... </aside>||Any side information such as ads, blog links etc|
|<article> ... </article>||The main story of the page or the page section of the page|
|<footer> ... </footer>||The bottom footer on the page, usually has contact link, toss, etc|
The tags are just block elements and still need CSS styling to make them look more then just block elements. In HTML they are used to define what the tag/block is not what it looks like. CSS is needed to define the actual appearance of each element to the browser.
Width is the width of the block or structural element. The default value is 100%.
The CSS code is to override this is
width:value where value is either pixels or per cent.
One can also set the max and min width of the box.
Height can also be set with
value need to be set in pixels because the actual height of the page in percentage would be unknown