Веб-графика наше всё


Код для топ-меню

Дата:  14.4.08 | Раздел: Коды CSS и HTML

Код для топ-меню без графики (только ролловер с фоном). Ширина меню 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)  /*путь ко второму избражению, сменяющему первую картинку*/
    }





Cтатья опубликована на сайте "Территория Веб графики и фонов":
http://webgraphica.ru

Адрес статьи:
http://webgraphica.ru/modules/myarticles/article_storyid_17.html