Creating a sidebar menu using CSS

(I am hoping that this is a good forum for my question...)

I am just learning CSS, and am trying to re-create several other
webpages that use style sheets in order to understand how the
authors accomplished them.

In the W3C pages on style sheets (ie. http://www.w3.org/Style/CSS/),
the authors have created a really nice sidebar menu.  I have been
trying to recreate it and am having some problems:

1) I can't get the background graphic to appear in my version,
   even when I completely duplicate the style sheet and the code
   that I see when I do a "view source".

2) The W3C's whole menu bar does not scroll; I can't get mine to
   "stick" on the page -- it scrolls with the rest of the content.

The only difference in my version of the style sheet is that I did
not include any of the "div#Menu" identifiers, but only used the
"div.map" identifiers.  I am not referencing anything with "id=.."

The portion of my stylesheet that I am using is:

    /* Navigational menu defs */
    div.navmap {
        position:         absolute;
        top: 12pt; right: 12pt; bottom: 12pt; left: auto;
        width:            132pt;
        height:           auto;
        background:       #a4d597        /* light green */
                          url(dogsear_lrg.gif)
                          no-repeat right bottom;
        }
    div.navmap, div.navmap p, div.navmap > * > li, div.navmap h2 {
        font-family:      "Goudy Old Style", Georgia, "Minion Web",
                          Palatino, "Book Antiqua", Utopia,
                          "Times New Roman", Times, serif;
        font-size:        9pt;
        line-height:      13pt;
        }
    div.navmap p, div.navmap > * > li, div.navmap h2 {
        display:          block;
        margin:           8pt 19.56pt 8pt -10.8pt;
        padding:          6pt 12pt;
        text-indent:      0;
        text-align:       left;
        background:       #418c09        /* dark green */
                          url(dogsear_sm.gif)
                          no-repeat right bottom;
        color:            white;
        list-style:       none;          /* Remove triangle from H2 */
        }
    div.navmap > ul {
        margin:           0;
        padding:          0;
        }
    div.navmap a {
        font-weight:      bold;
        font-style:       italic;
        text-decoration:  none;
        background:       #418c09;       /* dark green */
        color:            white;
        }
    div.navmap a:hover {
        background:       orange;
        color:            blue;
        }
    div.navmap:before {
        content:          "Navigation";
        display:          block;
        margin-bottom:    36pt;
        padding:          3pt 9pt;
        color:            #999;          /* grey */
        font-size:        larger;
        font-style:       italic;
        letter-spacing:   3pt;
        }

And the HTML code that I am using to reference it:

    <!-- navigation bar -->
    <div class="navmap">
    <p class="p1"><a href="./community.php">Community Information</a>
    <p class="p2"><a href="./information.php">HOA Information</a>
    <p class="p3"><a href="./members.php">Member Tools</a>
    <p class="p4"><a href="./local_links.php">Local Links</a>
    <p class="p5"><a href="./admin.php">Administrator</a>
    </div>

The resulting menu bar on the right scrolls with the rest of the
page, but the W3C version does not.  What am I missing here?

-- 

Scott G. Hall,
Raleigh, NC, USA
ScottGHall@BellSouth.Net

Received on Friday, 20 February 2004 08:04:16 UTC