Flexible Layouts and Printing

Flexible Layouts

Depending on content, the navigation bar can be placed on top, left and right. However, when using a list for the navigation, remember the default value display of li is list-item.
For a horizontal navigation bar change the display property to display:inline
For left navigation, display will be block and float:left
Consequently for navigation on the right simply by float:right

Of course other alternative for ‘float’ is by using position relative or absolute.

Printing

There are nine possible output types:all, aural, braille, handheld, print, projection, screen, tty, and tv with varying degrees of support. Practically speaking, the ones likely ever used are screen, print and handheld.

The default value for media attribute is all, so declaring media=”all” is redundant.

Using Media-Specific Style Sheets
You can designate a style sheet to be used only for a particular output, perhaps only for printing or only for viewing on screen in the browser. For example, you might create one general style sheet with features common to both the print and screen versions, and then create individual print and screen style sheets with properties to be used only for print or screen, respectively.

To designate media-specific style sheets:
Add media=”output” to the link or style start tags, where output is one or more of the following: print, screen.

In the head section add :
<link rel=”stylesheet” href=”style.css” media=”screen” />
<link rel=”stylesheet” href=”print.css” media=”print” />

Where the style.css is used for display on computer screen and the print.css is used for printing.

For example, when printing you do not need the navigation you need to simply specify

nav {
display:none;
}