Имя:
Пароль:
Выслать пароль?  Регистрация
Google

Учимся работе с графическими редакторами:
Adobe Photoshop,
Adobe Illustrator,
QuarkXpress.

Уроки веб дизайна.

Шаблоны wordpress new

Это надо знать:
статьи по дизайну,
справочная литература.

Может пригодиться:
программы для работы с графикой,
словарь терминов Adobe Photoshop,
кисти для Фотошопа и Иллюстратора,
actions для Фотошопа,
клипарты.

Коммерческие объявления:
Последние статьи:


CSS: Дизайн списка меню

Этот небольшой урок по CSS покажет вам, как создавать список меню, используя либо стиль границы CSS, либо фоновое изображение. Прием состоит в том, чтобы применить нижнюю границу к элементу <li>, затем, используя свойство абсолютное положение, сместить вложенные элементы вниз, чтобы закрыть границу. Это очень удобно – вы легко можете изменить верстку, сменив фоновое изображение или изображение границы. Прием работает, даже когда размер шрифта в браузере изменяется (увеличивается или уменьшается).

Посмотреть демо "Дизайн меню".

1. HTML код

Взгляните на HTML код и на схему. Они помогут вам понять, как работает CSS
<ul><br>  <li><strong>CSS Design</strong> <em>250<sup>95</sup></em></li><br></ul>

2. CSS код

Вот ключевые моменты:
  • Задайте элементу <li> свойство position:relative и примените к стилю нижней границы.
  • Используйте position:absolute с отрицательным значением bottom, чтобы сместить элементы <strong> и <em> ниже границы.
  • Запомните: используйте относительное значение (<em>) чтобы контролировать пространство при отступах.
  • .menu {
      width: 500px;
      list-style: none;
      margin: 0 0 2em;
      padding: 0;
      font: 150%/100% Arial, Helvetica, sans-serif;
    }
    .menu li {
      clear: both;
      margin: 0;
      padding: 0 0 1.8em 0;
      position: relative;
      border-bottom: dotted 2px #999;
    }
    .menu strong {
      background: #fff;
      padding: 0 10px 0 0;
      font-weight: normal;
      position: absolute;
      bottom: -.3em;
      left: 0;
    }
    .menu em {
      background: #fff;
      padding: 0 0 0 5px;
      font: 110%/100% Georgia, "Times New Roman", Times, serif;
      position: absolute;
      bottom: -.2em;
      right: 0;
    }
    .menu sup {
      font-size: 60%;
      color: #666;
      margin-left: 3px;
    }

    3. Изменение стиля границы

    Вы можете легко менять стиль границы, редактируя значения переменных padding и border для элемента <li>.
    li {
      border-bottom: dashed 1px #000;
      padding: 0 0 2.3em 0;
    }

    4. Использование изображения в качестве границы (посмотреть конечное демо)

    Также вы можете использовать фоновое изображение.
    li {
      background: url(images/circle.gif) repeat-x left bottom;
    }

    5. Версия IE6 (смотреть демо для IE6)

    Если вы все еще пользуетесь старым и полным багов браузером IE6, вы заметите что верстка отображается неправильно. Чтобы это исправить, просто добавьте прием clearfix к элементу <li>.
    /* clearfix */
    .menu li:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        }
    .menu li {display: inline-block;}
    /* Hides  IE-mac */
     * html .menu li {height: 1%;}
    .menu li {display: block;}
    /* End hide  IE-mac */
      

    Источник статьи: www.webdesignerwall.com. Перевод: Портал для дизайнеров «Балбесов НЕТ»


    Оцените, пожалуйста, эту статью:

    • Currently 3.00/5

    Рейтинг: 3.0/5 (голосов: 15)

      Опубликовано: 24 апреля 2009 | Просмотров: 27835 | Страница для печати  

    Читать комментарии [14] на форуме.

    Оставить комментарий
    Ваше имя:

    Проверка на человечность:

    Если Вы человек, то Вам не составит труда набрать буковки и циферки в поле под картинкой, которая ниже.


      О нас Советы Уроки Карта уроков по Фотошоп Уроки по Adobe Illustrator Клипарты Форум Блог админа Реклама на сайте