Setting the Visibility of an Element


The visibility property designates whether an element is visible when it is initially viewed in the window. If visibility is set to hidden (Table 8.1), the element is invisible but still takes up space in the document, and a big empty rectangle appears where the element should be.

Table 8.1. Visibility Values

VALUS

COMPATIBILITY

hidden

IE4, FF1, S1, O4, CSS2

visible

IE4, FF1, S1, O4, CSS2

inherit

FF1, S1, O3.5, CSS2


In this example (Figures 8.1 and 8.2), the menu and the drop box have been hidden. But notice that unlike the example of display: none in Chapter 6 (Figure 6.6), the space does not collapse, and the elements leave empty space where they should be.

Figure 8.1. In this version, the menu and the drop box are visible.


Figure 8.2. In this version, the menu and drop box are hidden (but not forgotten).


To set an element's visibility:

1.

visibility:


Type the visibility property name, followed by a colon (:), in the element's CSS declaration block (Code 8.1).

Code 8.1. The visibility property is set for the navigation and drop-box to hide those objects.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Setting the Visibility of an Element</title> <style type="text/css" media="screen">h1, h2 { color: #999; } img {      margin: 4px;      display: block; } #navigation {      visibility: hidden;      margin: 0px 16px 8px 0px;      background-color: #ccc;      float: left;      font: small Arial, Helvetica, sans-serif; } #navigation a {      padding: 2px 4px;      border-top: 3px solid #fff;      text-decoration: none;      display: block;      color: red; } .chapterTitle {      display: block;      font-size: smaller;      color: black; } #copy { clear: both; } .dropBox {      visibility: hidden;      width: 358px;      padding: 6px;      border: 3px solid #f66;      margin: 0px 0px 8px 8px;      float: right;      font: small Arial, Helvetica, sans-serif; } </style> </head> <body> <div > Flip To Chapter: <a href="#">Down the Rabbit-Hole </a> <a href="#">The Pool of Tears </a> <a href="#">A Caucus-Race and a Long Tale </a> <a href="#">The Rabbit Sends in a Little Bill </a> <a href="#">Advice from a Caterpillar </a> <a href="#">Pig and Pepper </a> <a href="#">NEXT &rArr; </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <b >Lewis Carroll</b> <h2>CHAPTER VI      <span >Pig and Pepper </span> </h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice24.gif" height="238" width="350" alt="Alice in Wonderland" /> 'Well!  I've often seen a cat without a grin,' thought Alice; 'but a grin without a cat!   It's the most curious thing I ever saw in my life!' </div></div> </body></html>

2.

hidden;


Now type one of the following keywords to specify how you want this element to be treated:

  • hidden, which causes the element to be invisible when the document is initially rendered on the screen

  • visible, which causes the element to be visible

  • inherit, which causes the element to inherit the visibility of its parent element

Tips

  • Though the properties seem similar, visibility differs radically from display (Chapter 6). When display is set to none, the element is scrubbed from the document, and no space is reserved for it, unlike visibility, which leaves the space like the invisible man in his bandages. However, when an absolutely positioned element (see Chapter 7) has its visibility set to invisible, it leaves no noticeable trace on the screen.

  • Generally, display:none is used for DHTML effects, such as drop-down menus and pop-up text, in which elements are hidden and shown. Since this will remove the element, it prevents the element from interfering with the layout of the page when not needed.

  • I recommend using an ID if you want to define the visibility of a single element on the screen. This creates an object that you can change using JavaScript to make it visible.





CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net