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

Главное меню


14.4.08 16:23 | Код для топ-меню
Раздел: Коды CSS и HTML | Автор: upet | Рейтинг: 1.00 (2) Оценить | Хитов 9405
Код для топ-меню без графики (только ролловер с фоном). Ширина меню 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:
» Ролловер (перекат) или смена картинки при наведении курсора
» Простейший шаблон HTML
» Код для кнопки (ролловер с одним изображением) с примерами
» Код для круглой кнопки (ролловер) с GIF-анимацией
» Код для топ-меню

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

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

MyArticles 0.6 beta for RUNCMS: by RunCms.ru


Можно и сюда


Cчётчики
Rambler's Top100 Рейтинг@Mail.ru