Каскадные таблицы стилей
CSS советы & приемы

Меню "конфетти"

Разноцветное меню, которое вы видите ниже - просто DIV элемент с элементом P внутри. Визуальный эффект достигается тем фактом, что каждый элемент P имеет собственное позиционирование, цвет и шрифт. Это отлично работает с короткими фразами, потому что визуальный эффект основан на перекрывании, но если фразы будут длинными, перекрывания будут создавать трудности для чтения.

Таблицы стилей разрешают до 10 элементов в меню, для примера выше используется 8. Вот исходный HTML для примера выше:

<div class="map">
<p id="p1"><a href="http://www.w3.org/Style/CSS/#news">What's new?</a>
<p id="p2"><a href="http://www.w3.org/Style/CSS/#learn">Learning CSS</a>

<p id="p3"><a href="http://www.w3.org/Style/CSS/#browsers">CSS Browsers</a>
<p id="p4"><a href="http://www.w3.org/Style/CSS/#editors">Authoring Tools</a>
<p id="p10"><a href="http://www.w3.org/Style/CSS/#specs">Specs</a>
<p id="p6"><a href="http://www.w3.org/Style/CSS/Test">CSS1 Test Suite</a>

<p id="p9"><a href="http://www.w3.org/StyleSheets/Core">W3C Core Styles</a>
<p id="p8"><a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a>
</div>

Примечание: класс "map" находится в элементе DIV, который является контейнером для меню. Каждый элемент P должен иметь (различный) ID, названый p1, p2,... или p10. Нет необходимости давать каждому ID последовательное имя (как в примере выше), достаточно сделать его уникальным. Вы можете использовать таблицы стилей копируя их в свои собственные, или используя @import или элемент LINK для копирования map.css прямо из сайта W3C: или

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

или

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

Пояснение к таблице стилей

Тут будет рассказано, как работают таблицы стилей. Таблицы стилей начинают определять DIV элемент у которого класс "map". Это создает пространство высотой 190 пикселей в котором будут размещены элементы P. Каждый из элементов с IDs от p1 до p10 получит свой цвет и шрифт, каждый из P элементов получит свою позицию в пространстве обозначенным элементом DIV учитывая значение 'margin': отрицательный top margin подвинет элемент вверх, а положительный bottom margin даст возможность элементу отображаться снизу DIVа.

( Слабость таблиц стилей в том, что все определяется в пикселях. Вы можете хотеть изменить это и использовать относительные величины (проценты), если вы имеете браузер, который оперирует с CSS достаточно хорошо.)

DIV.map {                   /* Оставляем некоторое место для ссылок */
  padding-top: 190px;
  margin-left: -2em;             /* Адаптируем к вашей странице... */
  margin-right: -2em;            /* Адаптируем к вашей странице... */
  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 */

Конечно, вы можете изменять таблицы стилей и использовать различные шрифты, цвета и позиционирование, или создать дополнительные правила таблиц стилей для более чем 10 элементов. Также обратите внимание на левые и правые отступы элемента DIV: они делают отрицательное позиционирование, так что вы видите, что меню шире чем обтекающий его текст, но в вашей странице отступы могут быть недостаточными для этого, так что вам может быть придется отказаться от этих правил таблиц стилей.

К сожалению, таблицы стилей не очень хорошо работают в Netscape 4. Это ошибка Netscape 4, конечно. Тем не менее, таблица стилей map-ns.css идентична предыдущей и работает хорошо в этом браузере. Следующий прием в заголовке вашего HTML документа позволит версии Netscape 4 и выше адекватно исполнять CSS :

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

Корректный обработчик CSS прочитает обе таблицы стилей, но правила во второй таблице переопределят правила из первой, так что кроме небольшой ненужной работы ничего не произойдет. Netscape 4, наверное, не будет загружать вторую таблицу стилей, потому что атрибут "media" для него не понятен.

Также, вам хотелось бы знать почему элементы позиционируются по значению (отрицательному) margins, если это выглядит как первоочередной кандидат для абсолютного позиционирования. В самом деле , вы можете сделать тоже самое с 'position' и 'left' & 'right'. Причина, по которой таблицы стилей используют отступы в том, что такой метод работает в браузерах, которые поддерживают только CSS1.