Moving Deeper into Positioning ..................................................................
In this section, I explore some further refinements of CSS positioning. CSS has
lots of ways to assist you in achieving the precise layout you’re aiming for in
your Web pages.
In the preceding sample of code, the background color is described as corn-
flowerblue. Obviously this is a more readable, understandable, and memo-
rable way of expressing this color than the bizarre RGB equivalent (#6495ED).
Browsers other than IE 6 can have problems using descriptive words for
colors. So if you’re worried about your page looking bad on other browsers,
use #6495ED instead of cornflowerblue.All browsers can translate #6495ED,
even if we humans can’t.
But my advice is to just assume that pretty much everyone who’ll see your
Web page uses IE. Why? Because most everyone does use IE.
I’ve included the IE color list in this book’s Cheat Sheet, which is located
inside the front cover. Or you can see the complete color table, with both
descriptive and RGB values, at http://msdn.microsoft.com/library/
default.asp?url=/workshop/author/dhtml/reference/properties/
background_0.asp. Or, if Microsoft has moved the table to a different URL
(not that Microsoft would ever shift one of their site’s addresses around!),
try searching the MSDN site for color table.
Remember the three styles defined in the header of the preceding sample of
code? The second style you defined is for the main section in the Web page,
called maintext:
div.maintext {position: absolute; background-color:
darkkhaki; top: 0; left: 110px; height: 75%;width:
75%;}
This is similar to the sidebar class, but uses a different color, and offsets the
div110 pixels from the left side of the browser window. This is an absolute
offset and does not change if the user stretches the browser window to make
it wider. Notice the relationship between 110 pixels (defined as the left side
of the main section here) and the previous sidebar style, which specified
that the sidebar divis 100 pixels wide. This way, these two divs fit together
nicely, with a little 10-pixel-wide stripe. How would you get rid of the stripe?
Make the maintextclass left property 100 pixels, or expand the size of the
sidebar to 110 pixels.
Chapter 4: Taking a Position 79
