Код для топ-меню : Коды CSS и HTML : Вебмастеру : Территория Веб графики и фонов

Главная Аккаунт Файлы Ссылки Форум Графика

Разделы

Фоны для сайта
Рамки для сайта
Кнопки для меню
Кнопки
3d кнопки
CSS и HTML
Шаблоны
Примеры кнопок
Flash

Главное меню

Домой

Фоны текстуры

Новости

Фоны 2

Веб графика

Вебмастеру

Добавить статью

Архив статей

Статистика

Архив файлов

Полезные ссылки

Форум

Галерея

Сайты партнеров

Опросы

Карта сайта

14.4.08 15:23 | Код для топ-меню

Раздел: Коды CSS и HTML | Автор: upet | Рейтинг: 1.00 (2) Оценить | Хитов 4730

Код для топ-меню без графики (только ролловер с фоном). Ширина меню 100%, но можно выставить фиксированный размер. Ниже находится код HTML для вставки под шапку или над ней.

Один нюанс, желательно ничего не менять, потому как все ссылки могут у вас съехать в вертикальное положение.

Внизу код CSS для вставки в отдельный файл с расширением CSS. Здесь меняйте спокойно все параметры на свой вкус. Чтобы вставить графику в меню, сделайте свою или воспользуйтесь находящейся здесь веб графикой. Предварительно уберите эту часть кода padding-left: 10px;
    padding-right: 10px; В комментариях всё описано.

.top-menu {
    font-size: 12px;                                                                  /*размер шрифта*/
    font-family:Georgia, "Times New Roman", Times, serif;      /*тип шрифта*/
    line-height: 25px;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    display: block;
    height: 25px;                        /*высота*/
    border: #FF9933 solid 1px; /*цвет тип бордера*/
    background-color:#FFD9D9; /*цвет фона*/
    color:#990000;                    /*цвет шрифта*/
    padding-left: 10px;
    padding-right: 10px;
    background-image:url(vashfile.gif) /*путь к изображению*/
}
a.top-menu:hover{
background-color: #FFA384;                                            /*цвет фона*/
font-size: 12px;                                                               /*размер шрифта*/
font-family:Georgia, "Times New Roman", Times, serif;   /*тип шрифта*/
    line-height: 25px;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    display: block;
    height: 25px;
    border: #FF9933 solid 1px;            /*цвет тип бордера*/
    color: #660000;                             /*цвет шрифта*/
    padding-left: 10px;
    padding-right: 10px;
    background-image:url(vashfile.gif) /*путь ко второму избражению, сменяющему первую картинку*/
    }

Родственные ссылки

» Другие статьи раздела Коды CSS и HTML
» Эта статья от пользователя upet

5 cамых читаемых статей из раздела Коды CSS и HTML:
» Ролловер (перекат) или смена картинки при наведении курсора
» Код для кнопки (ролловер с одним изображением) с примерами
» Код для круглой кнопки (ролловер) с GIF-анимацией
» Простейший шаблон HTML
» Код для топ-меню

5 последних статей раздела Коды CSS и HTML:
» Меню вертикальное (код)
» Код для топ-меню
» Код (ролловер) для сдвоенной кнопки с 4 изображениями в одном файле
» Код для круглой кнопки (ролловер) с GIF-анимацией
» Код для кнопки (ролловер с одним изображением) с примерами

¤ Перевести статью в страницу для печати
¤ Послать эту cтатью другу

MyArticles 0.6 beta for RUNCMS: by RunCms.ru

Можно и сюда

Файлообменник meg.ifolder.ru

Здесь вы можете загрузить или скачать свои файлы.
До 500mb бесплатно

Проверьте себя

Загрузка...

Cчётчики