Bert
Bos, style activity leadCopyright © 1994–2021 W3C® Privacy policy
Created 5 May 2001;
Last updated Wed 06 Jan 2021 05:40:49 AM UTC
See also the index of all tips.
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">
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.)
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.
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 worked in 2001, in browsers that only implemented CSS1.
Bert
Bos, style activity leadCreated 5 May 2001;
Last updated Wed 06 Jan 2021 05:40:49 AM UTC