HTML and CSS Reference
In-Depth Information
#navigation {
position:absolute;
width:200px;
padding-top:15px;
background:#dade75;
}
■
Note
You can find the code for the HTML and CSS for this chapter in the Source Code/Download section
of the Apress web site.
Please, please don't use a
<center>
tag on your web page. You center a layout in the CSS,
not in the web page markup. In our example, you'll see mechanisms in place to do this:
For the more standards-compliant browsers out there, you use the
margin
property
on the element that needs to be centered and give it a value of
auto
. So, the
wrapper
div
had
margin:10px auto 0 auto
, where the left and right values were set to
auto
. This
causes the browser to calculate equal margins on either side, thus centering the
wrapper
div.
•
•
For IE/Windows version 6 (if running in quirks mode) or earlier, the previous technique
is not recognized, so the
body
element is given a
text-align
value of
center
. This causes
anything in the body, regardless of whether it really is text, to center on the page. That
leaves us with something to clean up, though.
Because of inheritance, every element below the
body
element in the document (basi-
cally, everything!) will also center text, so we need to reset the normal appearance of
text and other elements by reapplying a
text-align
value of
left
in the newly centered
wrapper div
.
•
In our CSS example, you'll note that some items are positioned using the value
absolute
and some with
relative
. What's the difference and which one should you use?
When you specify that an element is to be positioned absolutely, the browser needs to
know “in relation to what?” If you state that it should be absolutely positioned 0 pixels from
the top and left, the browser treats that as 0 from the browser viewport, regardless of what
container that element sits in or how far down the document tree that is—unless you tell the
browser to use a different starting point.
If the element you are trying to position is contained in one that is itself already posi-
tioned (as the
wrapper div
is), then the x and y coordinates (or left and top properties) start
from that point. This is a tricky concept to explain with words alone, so refer to Figure 7-3,
which explains it visually.
