WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / experts / dhtml / column2

CSS positioning:
many objects occupying the same space

The keys to our technique are:

• the ability to position more than one HTML object in the same physical space.
• the ability to hide or show whichever object we choose.
• the ability to select which part of the object we show.

Recall that a CSS rule is defined by a selector and a declaration:

      H2 { font-weight: bold } 
Selector { declaration }

A CSS declaration is, in turn, defined by a property and a corresponding value.

{ font-weight: bold }
   { property: value }

And, finally, a CSS rule can host many declarations, separated by semi-colons:.

H2 {
    color: #003333; 
    font-weight: bold;
    margin-left: 0
}

Positioning Properties

We can control the position of our HTML by enclosing it in a container tag such as <DIV> or <SPAN>, with a unique ID, and defining a CSS rule for this contained HTML in our stylesheet. There are other ways, without containers, particularly in Explorer, but it is best to get used to this method first.

A good rule to follow: Use <DIV> for block-level elements (requiring a new line before and after) and <SPAN> for inline elements (rendered on same line as preceding and following HTML).

In our document, we now add the following:

<DIV ID="elMenu">
    <IMG SRC="menu.gif" USEMAP="#mpMenu" WIDTH=468 HEIGHT=18 BORDER=0>
</DIV>

And our stylesheet reads:

<STYLE TYPE="text/css">
    #elMenu { position: relative }
</STYLE>

The hash (#) designates a unique identifier to be used only once in the document. It should be avoided in CSS rules for tags or any non-positioned containment.

Our position property has the value relative because we want our image map to fall relative to the flow of the document. In fact, up to this point, we have done nothing unordinary. Our image is positioned exactly where it would have been even without CSS. Then, why do it?

Every positioned element establishes a new x-y coordinate system for all contained HTML within that element. New positioned elements can now be inserted within the DIV and positioned exactly in relation to our image map.

Nested Elements

With the above in mind, we can now enclose each of the images we have created in new absolutely positioned elements:

<DIV ID="elMenu">
    <DIV ID="elMenuUp">
        <IMG SRC="menu.gif" USEMAP="#mpMenu" WIDTH=468 HEIGHT=18 BORDER=0>
    </DIV>
    <DIV ID="elMenuOver">
        <IMG SRC="menuover.gif" WIDTH=468 HEIGHT=18 BORDER=0>
    </DIV>
</DIV>

Now, reflect these modifications in the stylesheet:

#elMenuUp {
    position: absolute;
    left: 0;            // left and top not absolutely
    top: 0              // necessary as default is 0
}

#elMenuOver {
    position: absolute;
    left: 0;
    top: 0
}

Both our images are now occupying the same physical space: They are both at the top left corner of the elMenu element. Since menuover.gif was referenced last, it was placed last, blocking out our image map.

Visibility

By adding the visibility property, we can control which of the two images is initially visible.

#elMenuOver {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden
}

Now that we have positioned two images, one on top of the other, and hidden one of them, we must find a way to display the hidden image on demand.

Produced by Peter Belesis and

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

Solutions

Whitepapers and eBooks

Adobe Article: Adobe Helps PHP Developers Create Rich Internet Applications Adobe Article: Java Developers Finding a Home at Adobe Flex IBM Articles: A Smarter Business Needs Smarter Technology Intel Xeon Processor Increases Server Efficiency and Capabilities Intel Tech Brief: Automated Energy Efficiency for the Intelligent Enterprise Oracle Whitepaper: Using Oracle In-Memory Database Cache to Accelerate the Oracle Database Oracle Whitepapers - Innovation for IT Leaders Avaya Article: Communication-Enabled Mashups--Empowering Both Business Owners and IT

Internet.com eBook: IT Manager's Guide to Social Networking Internet.com eBook: Get Ready for Windows 7 Microsoft Article: Expression Web 3--New Features for PHP Developers Whitepapers: Manage Your Business Infrastracture with IBM Whitepaper: Maximize Your Storage Investment with HP Internet.com eBook: Becoming a Better Project Manager Microsoft Article: Stress Free and Efficient Designer/Developer Collaboration MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Webcast: Connecting PHP to Microsoft Technologies Video: Microsoft Partner Program Benefits Video: Windows Azure Debugging Tips SAP BusinessObjects Webcast: Unlock the Power of Reporting with Crystal Reports

IBM Webcast: Speed Business Innovation with Reduced Cost and Risk Video: Deploy Applications on Windows Azure MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Downloads & Free Trials: Microsoft's New Efficiency Resource Center Get the Windows 7 SDK Free Trial: Red Gate SQL Backup Pro 6

Iron Speed Designer Application Generator MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

Virtual Lab: Migrating PHP Applications Enabling Web Slices and Accelerators with a PHP Site Internet.com Hot List: Get the Inside Scoop on the Hottest IT and Developer Products

All About Botnets MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint

All Rights Reserved. Legal Notices.
Created: 08/06/97
Revised: 10/16/97

URL: http://www.webreference.com/dhtml/column2/CSSpos.html