|
Advanced:
Getting Outside the Box with CSS Positioning
CSS
positioning allows you place objects exactly where you want
them on your Web site, regardless of what's already there.
When CSS was originally proposed, it was broken into two
pieces: CSS-1, which handles the visual properties, such
as font family, font color, and background characteristics;
and CSS-P, which allows HTML authors to put content wherever
they wanted. CSS-P also allows content to be broken into
different layers that can be placed over or under other
layers. This tutorial introduces you to positioning, including
requirements, instructions, and examples.
Table
of Contents
What
is positioning?
What is required for positioning?
How do I position?
Can you give me some examples?
What's the "D" in "DHTML"?
What
is positioning?
Positioning
under CSS-P is simply the ability to place an object or
container outside of the normal flow of the Web page as
it is rendered. Before positioning, HTML pages were drawn
sequentially by the browser. Using positioning, an author
can break positionable content out of the sequential "box"
and tell the browser exactly where to put the content. Positioning
therefore allows authors to do the following:
- Because content pieces are broken out of the normal
flow of the document, authors cannot only move the content,
but can also place content over or under other items
on the page.
- With positioning and JavaScript, authors can cause
pieces of the page to move dynamically in response to
user input or according to their own personal agenda.
- Content
can be hidden or displayed according to an author's
instructions. For example, multiple frames of content
could occupy the same physical two-dimensional space,
and each frame could correspond to a different button
that, when clicked, caused all of the frames not relevant
to the button to be hidden and only the frame relevant
to the button to be displayed.
Positioning
opens some great new possibilities to HTML authors which
previously could only be acheived by learning (and buying)
proprietary software and relying on your visitor's browser
to have the correct plug-in.
What
is required for positioning?
Positioning
is achieved using the CSS-P instructions. Since the release
of this recommendation, CSS-1 and CSS-P have been combined
into a single standard and labelled as "CSS-2".
This new recommendation is still waiting for browser makers
to implement it, so until it is supported, using it is only
safe when you can control which browser the visitors are
using, such as with an Intranet application.
Using
CSS-P as the baseline, your visitors must be using a version
4.0 or later browser. Both Internet Explorer 4.x and Navigator
4.x support the CSS-1/CSS-P recommendations, but to a limited
degree. Internet Explorer allows greater access to the individual
elements in Web pages, and Navigator allows enough access
to accomplish some great effects that will still work across
browser platforms.
If the
positionable part of your content is going to play a crucial
role in the overall functionality of the Web site, then
you should put some client validation code in your page
to notify visitors who do not meet the minimum standard
that their browser will not render the page correctly. It's
not uncommon to suggest a browser update to your visitors
and provide them with a link to your preferred browser maker.
To get the latest version of Internet Explorer, link your
visitors to http://microsoft.com/windows/ie/default.htm,
or if you are rooting for Navigator to make a comeback,
then link your visitors to http://netscape.com/browsers/6/index.html.
Or if you believe in a free market, provide a link to both
and let your visitors decide which is the better product.
How
do I position?
To create
positioning under CSS-P, you must set style attributes that
"invoke" the CSS-P behaviors. There are two basic types
of positioning, relative and absolute. Relative
positioning retains enough of the "normal" characteristics
of browser rendering to allow effects that need to rely
on the position of other elements or objects in the Web
page. Absolute positioning sheds all that to allow complete
detachment from the rest of the document. The first step
then is to determine which type of positioning best applies
to your application. Here are the basic steps involved in
invoking either type of positioning.
- Create the object using a container that can be positioned.
An <IMG> element is a good container for this purpose,
or if you want a paragraph of text or something with more
than a single element inside the container then use a
<DIV>.
- Declare the properties POSITION:RELATIVE or
POSITION:ABSOLUTE for the object in order to
make it positionable. The other properties you will need
to assign include TOP:10PX; and LEFT:10PX
(replacing 10 with the correct value for your application).
You can also specify a different length unit than PX (meaning
"pixel"), such as MM (meaning "millimeter")
and others.
- Assign the properties to the object using a class, or
define them in a style applied to the specific element
itself. There are examples of both methods below. One
special note, if you want to apply some of the "D"
from DHTML to have the object "do" something
aside from just sitting outside of the normal flow of
the Web page, then give the object an "ID" too. This is
illustrated below.
Can
you give me some examples?
An example of Relative Positioning
Relative
positioning create effects that use the position of another
element to make them work, such as a drop shadow, which can
be created by placing a different version of an object at
an offset relative to the position of the original. Here is
the code to create the following example. We start with the
bottom layer (the shadow), then the highlight color, and lastly
the main color.
<![CDATA[
<DIV NAME="drop0" ALIGN="center"
STYLE="font-family:georgia,serif;
font-size:8mm;
font-weight:bold;
color:ccccbb;
">This is a drop shadow example.</DIV>
<DIV NAME="drop1" ALIGN="center"
STYLE="font-family:georgia,serif;
font-size:8mm;
font-weight:bold;
color:ffffaa;
position:relative;
top:-40px;
left:-6px;
">This is a drop shadow example.</DIV>
<DIV NAME="drop2" ALIGN="center"
STYLE="font-family:georgia,serif;
font-size:8mm;
font-weight:bold;
color:aaaa77;
position:relative;
top:-74px;
left:-5px;
">This is a drop shadow example.</DIV>
]]>
This
is a drop shadow example.
This
is a drop shadow example.
This
is a drop shadow example.
An example of Absolute Postioning
Here
is an example of using absolute positioning to create an
image (and some text) that is detached from the body of
the document. An obvious problem to point out is that once
an object is no longer "relevantly" positioned-based on
the surrounding objects, it can be VERY difficult to position
it to interact with the content in a relevant way. For example,
positioning the detachable objects beside the code example
that illustrates how to achieve them is entirely guess work.
Trying to take into account the width of the browser window
, the length of the page, and size of the font will be on
a visitor's machine cannot be done easily.
Method 1: Assigning Style Attributes at Object
Level (Detachable Object 1)
<![CDATA[
<DIV ID="fly0" STYLE="font-family:verdana,sans-serif;
font-size:2.5mm;
background-color:111111;
color:ffffee;
position:absolute;
top:2150px;
left:600px;"
>Detachable Object 1</DIV>
<DIV ID="fly1" STYLE="font-family:verdana,sans-serif;
font-size:2.5mm;
position:absolute;
top:2170px;
left:620px;"
><IMG SRC="imagemap/animated_shapes.gif"></DIV>
]]>
Detachable Object 1
Detachable
Object 2
Method 2: Assigning Style through a Class
Container (Detachable Object 2)
<![CDATA[
<STYLE>
.the_widget1{
font-family:verdana,sans-serif;
font-size:2.5mm;
background-color:111111;
color:ffffee;
position:absolute;
top:2450px;
left:600px;
}
.the_widget2{
font-family:verdana,sans-serif;
font-size:2.5mm;
position:absolute;
top:2470px;
left:620px;
}
</STYLE>
<DIV ID="fly0" CLASS="the_widget1" NOWRAP>Detachable Object
2</DIV>
<DIV ID="fly1" CLASS="the_widget2"><IMG SRC="imagemap/animated_shapes.gif"></DIV>
]]>
(Look
for buttons at the bottom of the
page which continue this example.)
What's
the "D" in "DHTML"?
Applications
that use positioning may be enough to create some interesting
effects that can set your Web work apart from the work of
others, but they don't really illustrate what is so truly
dynamic about dynamic HTML. The "D" in DHTML only
sheds its misnomer-esque meaning when you excercise the ability
to manipulate the HTML elements in your page AFTER they have
been initially created. In this example we can cause the items
to wander around the page and offer visitors something to
catch their eye.... or to annoy them, depending on their state
of mind at the time. Click the button below to toggle the
detachable examples above.
Back
to Build Your Site
Back
to Table of Contents
|
