Нонче тут

Сейчас 52 гостей онлайн

Поиск

Поиск от Nigma

2


Поиск от Яндекс

Счётчики

Яндекс.Метрика

Проверка тиц

ВКонтакте

Задача: сверстать вертикальное меню, разделителем которого является двойная линия, состоящая из двух разных цветов (синий и белый):

<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О компании</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">Отзывы</a></li>
<li><a href="#">Фотографии</a></li>
<li><a href="#">Вопросы</a></li>
<li><a href="#">Контакты</a></li>
</ul>

ul {
width: 150px;
padding: 0 6px;
background: #F2F7FD url(http://dimox.name/examples/menu-with-double-separators/bg.gif) 0 100% repeat-x;
border: 1px solid #C0D7FB;
font-weight: bold;

overflow: hidden; /* необходимо для того, чтобы
спрятать верхний бордюр у первого пункта и
нижний бордюр у последнего пункта */
}
li {
list-style: none;
background: url(http://dimox.name/examples/menu-with-double-separators/bullet.giff) 4px 8px no-repeat;
padding: 5px 0 8px 22px;

border-top: 1px solid #C0D7FB; /* синяя линия */
border-bottom: 1px solid #FFF; /* белая линия */
margin: -1px 0 -2px; /* "нахлестываем" на предыдущий и следующий пункт,
в результате чего и достигается нужный эффект */
height: 1%; /* для устранения бага в IE6 и IE7 */
}

кнопка
http://dimox.name/examples/menu-with-double-separators/bullet.gif
фон
http://dimox.name/examples/menu-with-double-separators/bg.gif
теперь посмотрим как применить этот код к меню юкоза
для кнопки берём класс .uMenuV li и #uMenuDiv1 li
для фона ul.uMenuRoot
Получаем

ul.uMenuRoot { word-wrap: break-word; /* Перенос слов */
width: 150px;
padding: 0 6px;
background: #F2F7FD url(http://dimox.name/examples/menu-with-double-separators/bg.gif) 0 100% repeat-x;
border: 1px solid #C0D7FB;
font-weight: bold;

overflow: hidden; /* необходимо для того, чтобы
спрятать верхний бордюр у первого пункта и
нижний бордюр у последнего пункта */
}
.uMenuV li {
list-style: none;
background: url(http://dimox.name/examples/menu-with-double-separators/bullet.gif) 4px 8px no-repeat;
padding: 5px 0 8px 22px;

border-top: 1px solid #C0D7FB; /* синяя линия */
border-bottom: 1px solid #FFF; /* белая линия */
margin: -1px 0 -2px; /* "нахлестываем" на предыдущий и следующий пункт,
в результате чего и достигается нужный эффект */
height: 1%; /* для устранения бага в IE6 и IE7 */
}
#uMenuDiv1 li
{
list-style: none;
background: url(http://dimox.name/examples/menu-with-double-separators/bullet.gif) 4px 8px no-repeat;
padding: 5px 0 8px 22px;

border-top: 1px solid #C0D7FB; /* синяя линия */
border-bottom: 1px solid #FFF; /* белая линия */
margin: -1px 0 -2px; /* "нахлестываем" на предыдущий и следующий пункт,
в результате чего и достигается нужный эффект */
height: 1%; /* для устранения бага в IE6 и IE7 */
Уважаемые гости сайта! Теперь Вы можете ознакомиться с новостями сайта в социальных сетях.
Новости сайта публикуются в Facebook, ВКонтакте, Blogspot и Мой мир и Twitter .
Что бы перейти к аккаунтам просто кликните на иконках социальных сетей.