HTML & CSS: The Good Parts

Using the display Property to Change an Element’s Flow

The CSS display property reliably accepts a range of values corresponding to the flow types explained previously, as well as none. The resulting behavior produces a range of desirable effects, all of which are demonstrated on this book’s companion site:

• Primary navigation links on “brochure” sites most often assume a horizontal orientation. This is done by changing the display value of their constituent list items to block (resolving an ambiguity in the HTML Document Type Definitions) and applying a number of other layout properties, particularly float. In tandem with assigning display: block to hyperlinks, this solution is preferred to applying #nav li { display: inline; } in situations where navigation link footprints need to be equally or statically sized.

• Once given a display value of block, links can be assigned arbitrary width and height values, which makes them easier to compose within a web application interface. This technique can also be used to increase their footprint, putting into practice the principle of human-computer interaction (HCI) known as Fitts’s Law. This asserts that larger interface objects are easier to activate with a pointer device than smaller ones.

• The manner in which ordered and unordered lists are normally arranged with respect to their neighbors can be altered, so that they can be presented serially within other copy.

• By changing the display value of form controls to block, it becomes possible ...