| A Web page (also referred to as simply the document) is displayed within a browser window. Within the rectangular confines of the viewport, everything that you can present to the viewer is displayed. You can open multiple windows (each displaying its own documents in its own viewport), resize and position windows on the screen, and even break the window into smaller viewports called frames. Everything that you present, however, is displayed within a browser window as part of a document (Figure 7.1). Figure 7.1. The browser window. The element on the gray background has been moved from its normal position to 125 pixels from the top and 12em from the left. 
Like the elements contained within it (see "Understanding an Element's Box" in Chapter 6), the window has a width and height, as well as a top, bottom, left, and right. In fact, you can think of the browser window as being the ultimate element in your Web designthe parent of all other elements. Browser windows and the documents they contain have three distinct widths and heights and four different sides: Browser width and height refers to the dimensions of the entire window, including any browser controls and other interface items. Viewport width and height refers to the live display area of the browser window's viewport. The live dimensions, obviously, are always less than the full window dimensions. Generally, when I refer to "the window," I'm referring to the live window area. Document width and height, sometimes called the rendered width and height, refers to the overall dimensions of the entire Web page. If the document's width and/or height is larger than the live width and/or height, you'll see scrollbars that let you view the rest of the document. Document origin is the top left corner of the document. All absolutely positioned elements that have the body as their direct parent are positioned in relationship to this point. Element positions (left, top, right, bottom) are used to set exactly how an element is offset from the sides of the document, its parent element, or from its normal flow position. Element origin is the top-left corner of any element on the screen. The left-and top-element positions move the element from this corner. Bottom and right positions move the element from the bottom-right corner.
 Tips
|
