From WikiEducator
< VirtualMV‎ | CSS‎ | Layout
Jump to: navigation, search


Layout with styles has several advantages:

  • Good for liquid layouts, that expand/contract depending on size of the monitor being used to view your page.
  • Allows you to modify a layout using a CSS for many pages that use the same "block" structure.
  • Tends to produce smaller files.
  • Conforms to current (and therefore future) standards

The disadvantages are that:

  • older browsers may or may not display the styles correctly if at all.
  • different browsers may not display the content in the same way.

VmvIcon Objective.png

Cascading Style Sheets

By the end of this page you will be able to:

Box Model (3D Document Object Model view)

CSS treats every element as if it is surrounded by an invisible box.

In Firefox you can see a 3D visualisation of the box model if you

  • Right click on page > Inspect element >
  • Click on the "Toolbox options" gear icon (tool bar lower right), scroll to the bottom of the options and check 3D view (this will add a 3D box to a lower browser bar) For instructions
  • Click on the box 3D View (bottom right) then Drag the page around = shows page divs layered (Press [F12] to make the developer option appear/disappear)
Firefox: 3D view showing box model of

Using Div for Layouts - Tutorials

Interactive css layouts

Sample from learn CSS Positioning in Ten Steps

Reference Learn CSS Positioning in Ten Steps. (2006)[1]


Cite error: <ref> tags exist, but no <references/> tag was found