Languages

Web Style Sheets CSS tips & tricks

See also the index of all tips.

A confetti menu

The colorful menu you see below is simply a DIV element with a few P elements inside. The visual effect is due to the fact that each P element is positioned individually and has its own font and color. It works best with short texts, because the visual effect is based on overlap, but if the text is too long, it overlaps so much that it becomes hard to read.

The style sheet allows for a menu of up to 10 elements, the example above uses 8. Here is the HTML source of the example above:

<div class="map">
<p id="p1"><a href="../../CSS/#news">What's new?</a>
<p id="p2"><a href="../../CSS/#learn">Learning CSS</a>
<p id="p3"><a href="../../CSS/#browsers">CSS Browsers</a>
<p id="p4"><a href="../../CSS/#editors">Authoring Tools</a>
<p id="p10"><a href="../../CSS/#specs">Specs</a>
<p id="p6"><a href="../../CSS/Test">CSS1 Test Suite</a>
<p id="p9"><a href="/StyleSheets/Core">W3C Core Styles</a>
<p id="p8"><a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a>
</div>

Note the class “map” on the DIV element, which makes it into a container for the menu, and the ID attributes on the Ps. The P elements must each have a (different) ID, called p1, p2,... or p10. It is not necessary to use the IDs in order (as the example shows). You can use the style sheet by copying it into your own style sheet, or by using @import or a LINK element to import map.css directly from the W3C site: either

@import "http://www.w3.org/Style/map.css";

or

<link rel="stylesheet" href="http://www.w3.org/Style/map.css">

Explanation of the style sheet

Here is how the style sheet works. The style sheet starts by defining a DIV element with class "map". It creates a 190px high space into which the contents of the P elements will be placed. Each of the elements with IDs p1 to p10 is then given a color and a font, and each element is positioned inside the space created by the DIV by means of the 'margin' property: a negative top margin moves the element up into the DIV space and a positive bottom margin makes sure the next element starts again at the bottom of the DIV.

(The weakness of the style sheet is that it does everything in px. You may want to change it to use percentages instead, if you have a browser that implements CSS well enough.)

DIV.map {                        /* Reserve some room for the links */
  padding-top: 190px;
  margin-left: -2em;             /* Adapt this to your own page... */
  margin-right: -2em;            /* Adapt this to your own page... */
  margin-bottom: 4em;
  margin-top: 5em;
  clear: both;
  text-shadow: 0.2em 0.2em /* 0.2em */ silver }

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
  text-decoration: none }

#p1, #p1 A   {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A   {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A   {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A   {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A   {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A   {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A   {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}

#p1  {text-align: right;  margin: -185px 0 85px 0}    /* top right */
#p2  {text-align: left;   margin: -190px 0 150px 5%}  /* top left */
#p3  {text-align: right;  margin: -90px 35% 50px 0}   /* center */
#p4  {text-align: right;  margin: -95px 0 55px 0}     /* center right */
#p5  {text-align: left;   margin: -130px 0 30px 0}    /* center left */
#p6  {text-align: left;   margin: -40px 0 15px 35%}   /* bottom center */
#p7  {text-align: right;  margin: -80px 0 0px 0}      /* bottom right */
#p8  {text-align: left;   margin: -40px 0 20px 3%}    /* bottom left */
#p9  {text-align: right;  margin: -25px 0 5px 0}      /* bottom right */
#p10 {text-align: left;   margin: -130px 0 70px 0}    /* center left */

Of course, you are free to change the style sheet to try different fonts, colors and positions, or to create extra style rules for more than 10 elements. Also take a look at the left and right margins of the DIV: they are made negative, so that the menu is wider than the surrounding text, but in your page the margin may not be wide enough for this, and so you might have to remove these rules.

If you try the style, you may notice that it doesn't work too well in Netscape 4. That is Netscape 4's fault, of course. Nevertheless, map-ns.css is a style sheet that is similar and that seems to work OK in that browser. The following trick in the head of your HTML document will allow the version for Netscape 4 and the version above for better CSS implementations to co-exist:

<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" type="text/css" media="all">

Correct CSS implementations will read both style sheets, but the rules in the second one override the first, so apart from a little unnecessary work, there is no change. Netscape 4, however, will not load the second style sheet, because of the "media" attribute, that it doesn't understand.

Also, you may wonder why the elements are positioned by means of (negative) margins, while this seems to be a prime candidate for the absolute positioning properties. Indeed, you can do the same with 'position' and 'left' & 'right'. The reason this style sheet uses margins instead, is that this way it works in browsers that only implement CSS1.

Bert Bos, style activity lead
Copyright © 1994–2014 W3C®

Created 5 May 2001;
Last updated Sat 20 Dec 2014 06:46:51 PM UTC

Languages

About the translations