Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 23rd of August 2017 07:24:40 PM

9.4. Fixed Positioning

As implied in the previous section, fixed positioning is just like absolute positioning, except the containing block of a fixed element is always the viewport. In this case, the element is totally removed from the document's flow and does not have a position relative to any part of the document.

This can be exploited in a number of interesting ways. First off, it's possible to create frame-style interfaces using fixed positioning. Consider Figure 9-24, which shows a very common layout scheme.

Figure 9-24

Figure 9-24. Emulating frames with fixed positioning

This could be done using the following styles:

DIV#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0;
background: gray;}
DIV#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%;
background: silver;}

This will fix the header and sidebar to the top and side of the viewport, where they will remain regardless of how the document is scrolled. The drawback here, though, is that the rest of the document will be overlapped by the fixed elements. Therefore, the rest of the content should probably be contained in its own DIV and employ the following:

DIV#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0;
overflow: scroll; background: white;}

It would even be possible to create small gaps between the three positioned DIVs by adding some appropriate margins, demonstrated in Figure 9-25:

BODY {background: black; color: silver;}  /* colors for safety's sake */
DIV#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0;
background: gray; margin-bottom: 2px; color: yellow;}
DIV#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%;
background: silver; margin-right: 2px; color: maroon;}
DIV#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0;
overflow: scroll; background: white; color: black;}
Figure 9-25

Figure 9-25. Separating the "frames"

Given such a case, a tiled image could be applied to the BODY background. This image would show through the gaps created by the margins, which could certainly be widened if the issue, as well as give a way to clip off parts of an element.

9.1.4.1. Overflow

So let's say that you have, for whatever reason, an elementthat has been pinned to a specific size, and the contentdoesn't fit. You can take control of the situation with theoverflow property.

author saw fit. For that matter, if a background image was of little importance, simple borders could be applied to the DIVs instead of margins.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

XML parsers make your application code more reliable and quick to develop by providing validity checking on your XML documents (if you use a DTD).
  • XML allows you to easily generate XML documents (that contain your information), since it is so structured.
  • XML parsers allow you to code faster by giving you a parser for your all your XML documents (with and without DTDs).
  • XML documents are easily committed to a persistence layer

    6.2.3.1. Keywords

    Easiest to understand are the keywords. They have the effects you'd expect from their names; for example, top right would cause the background image to be placed in the top right corner of the element. Let's go back to the small yin-yang symbol:

    BODY {background-image: url(yinyang.gif);
    background-repeat: no-repeat;
    background-position: top right;}

    6.1.1.3. Inheriting color

    By this time, you may have guessed thatcolor is inherited, and you're right.This makes good sense, since if you declare P{color: maroon;}, you probablyexpect that any text within that paragraph will also be maroon, evenif it's emphasized or boldfaced or whatever. Of course, if youwant such elements to be different colors,that's easy enough, as illustrated by Figure 6-9: In the following paragraphs, I will highlight some of the most basic and important advantages that XML and Java provide to almost any system that uses them properly. This is by no means a comprehensive list of benefits, but items in this list should appear across just about any use of XML and Java technologies.

    I will take a break from my normal pragmatic approach to getting you (the programmer) started with using XML and Java and just talk about the high level (design level) benefits of this wonderful combination. A good design is important to a good implementation for any system.

    XML is structured

    When you create your data using an XML editor (that you can write), you can not only input the content of your data, but also define the structural relationships that exist inside your data. By allowing you to define your own tags and create the proper structural relationships in your information (with a DTD), you can use any XML parser to check the validity and integrity of the data stored in your XML documents. This makes it very easy to validate the structure and content of your information when you use XML. Without XML, you could also provide this validation feature at the expense of developing the code to this yourself. XML is a great time saver because most of the features that are available in XML are used by most programmers when working on most projects.

    By using XML and Java, you can quickly create and use information that is properly structured and valid. By using (or creating) DTDs and storing your information in XML documents, you have a cross-platform and language independent data validation mechanism (for free) in all your projects!