Авторское право © WWW : Балбесов нет: Компьютерная графика
Перепубликация материалов,возможна только с устного или письменного разрешения Администрации сайта !
Название статьи , Опубликовано Статьи » Уроки » Веб-дизайн » CSS: Дизайн списка меню
24 апреля 2009 22:31

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

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

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

    1. HTML код

    Взгляните на HTML код и на схему. Они помогут вам понять, как работает CSS 

        
    • CSS Design 25095

    2. CSS код

    Вот ключевые моменты:
  • Задайте элементу
  • свойство position:relative и примените к стилю нижней границы.
  • Используйте position:absolute с отрицательным значением bottom, чтобы сместить элементы и ниже границы.
  • Запомните: используйте относительное значение () чтобы контролировать пространство при отступах.
    • .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 {
  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 к элементу
  • . 
    /* 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. Перевод: Портал для дизайнеров «Балбесов НЕТ»

    • URL / WWW