| When an element is clipped, or when the parent element's width and height are less than the area needed to display everything, some content is not displayed. The overflow property (Table 8.3) allows you to specify how this cropped content is treated. Table 8.3. Overflow ValuesVALUE | Compatibility |
|---|
scroll | IE4, FF1, S1, O7, CSS2 | hidden | IE4, FF1, S1, O4, CSS2 | visible | IE4, FF1, S1, O5, CSS2 | auto | IE4, FF1, S1, O7, CSS2 |
In this example (Figure 8.5 and 8.6), the height of the menu is limited so that additional chapter links are accessible only by scrolling down that individual block. Additionally, the drop box has had its width and height limited, so some of the content lies well outside of its box. Figure 8.5. Viewers can use the scroll bars to access the overflow content of the menu and the drop-box element with the image of Alice and the Mock Turtle. 
Figure 8.6. Scroll around to see the bottom of the menu and more of the picture. 
To define the overflow control: | | 1. | width: 200px; height: 200px;
Type a width and/or height to which the element should be restricted (Code 8.3). You could also clip the element (see "Setting the Visible Area of an Element" earlier in this chapter).
Code 8.3. The overflow property is set for both the navigation object and .dropBox class.| [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 & Ajax | Setting Where the Over Flow Goes</title> <style type="text/css" media="screen"> h1, h2 { color: #999; } img { margin: 4px; display: block; } #navigation { height: 75px; overflow: auto; 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; } #copy { clear: both; } .chapterTitle { display: block; font-size: smaller; color:black; } .dropBox { width: 200px; height: 300px; overflow: auto; 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 ⇒ </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <b >Lewis Carroll</b> <h2>CHAPTER IX <span >The Mock Turtle's Story</span></h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice35.gif" height="480" width="401" alt="Alice in Wonderland"/> 'Once,' said the Mock Turtle at last, with a deep sigh, 'I was a real Turtle.'</div> </div> </body></html>
|
| 2. | overflow:
Type the overflow property name, followed by a colon (:).
| | | 3. | auto;
Type in one of the following keywords to tell the browser how to treat overflow from the clip:
scroll, which sets scroll bars around the visible area to allow the visitor to scroll through the element's content. When you set this value, space will be reserved for the scroll bars, even if they are not needed. hidden, which hides the overflow and prevents the scroll bars from appearing. visible, which forces the cropped part of the element to show up, essentially instructing the browser to ignore the cropping. auto, which allows the browser to decide whether scroll bars need to be displayed.
|
 Tips
If the overflow property is not set, or if it is set to auto, the browser will ignore the height property set for an element. Generally, auto is preferred for overflow, since this will show the scroll bars only as needed and hide the scrollbar chrome when there is nothing to scroll. The overflow property is also used to define how clipping overflow is treated.
|
