JavaScript EditorBest javascript editor debugger     Ajax website 
↑


Main Page

Previous Page
Next Page

Displaying and Hiding Elements

The display property is useful for hiding or revealing particular elements. You can also override an element's natural display type (from block-level to inline, or vice-versa). Or you can display an element as a list itemeven without the li tag.

Figure 12.1. Here's the (X)HTML: three simple paragraphs with an image in each one. The middle paragraph has a class of hide.


Figure 12.2. The only CSS applied here is a 2 pixel bottom margin to the elements. All three paragraphs and their images are visible.


To specify how elements should be displayed:

1.
In your style sheet rule, type display:.

2.
Type none to hide the given element and completely remove it from the document flow (Figures 12.3 and 12.4).

Figure 12.3. When we hide the display...


Figure 12.4. ...no trace of the hidden paragraph (or the image within it) remains.


Or type block to display the element as block-level (thus starting a new paragraph).

Or type inline to display the element as inline (not starting a new paragraph).

Or type list-item to display the element as if you had used the li tag (see page 216).

To control an element's visibility:

1.
In your style sheet rule, type visibility:.

2.
Type hidden to make the element invisible without removing it from the document flow (Figures 12.5 and 12.6)

Figure 12.5. When we change the visibility to hidden...


Figure 12.6. ...an empty space remains where the hidden paragraph used to be.


Or, type visible to reveal the element.

Tips

  • If you use display: none, no trace remains of the hidden element in the browser window. There is no empty space. When you use visibility: hidden, the space that the hidden element would have taken up still takes up room in the document flow.


  • If an element is absolutely positioned and thus already taken out of the document flow, display:none and visibility: hidden are identical in terms of layout. However, some browsers don't load elements whose display is set to none, saving download time.

  • While it's true that the display property is not inherited, this may be irrelevant since when an element is hidden, its entire contents (including any descendants) are also hidden.

  • The display property has a number of other properties for use in tables but they are poorly supported.

  • I have some more complex examples of display on the following pages.

  • The visibility property is not inherited.

  • The visibility property has a third value (apart from inherit): collapse. When used with table cells, it hides the offending row, removes it from the table, but still uses the content to calculate the height and width of adjacent columns and rows.

  • CSS also has a clip property which allows you to determine which portion of an element will show through. Its syntax is clip: rect(top right bottom left), where each value is the desired distance in that direction starting from the top or left. Although it is supported relatively widely, I haven't seen it implemented in a useful way that couldn't be more easily handled with margin and padding.


Previous Page
Next Page


JavaScript EditorBest javascript editor debugger     Ajax website 
→