Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Как превратить LI в кнопку с текстом поверху?

Автор: vlad275 14.5.2012, 15:19

Как превратить LI в кнопку с текстом поверху? Удается только сдвинуть текст влево, а вверх не получается.
http://tricolor.tw/2/index.html

Повесить изображение кнопки фоновым изображением не получается

Код


li{
list-style-image: url('button2.png');
margin-left:150px;
color:#FFFFFF;
font-size:13px; 
font-weight:bold; 
line-height:28px;}
//background: url(button2.png) top left no-repeat;
}

Код


        <ul>
            <li><span style="margin-left:-120px;margin-top:-20px;">Главная</span></li>
            <li>О компании</li>
            <li>Контакты</li>
            <li>Услуги</li>
            <li>Наши клиенты</li>
            <li>Дата-центр</li>
            <li>Интернет</li>
        </ul>

Автор: vlad275 14.5.2012, 15:55

нашел:

Код


#button-text{
z-index:100;
position:relative;
top:-27px;
left:-150px;
//margin-left:-150px;
//margin-top:-30px;
}

Автор: tarsukoff 28.6.2012, 23:52

Код


#menu li a{
            list-style:none;
            display:block;
            background:url(/img/menu_back_norm.png) no-repeat left;
            font-family:"Arial";
            font-size:13px;
            color: #787854;
            text-decoration:none;
            line-height: 30px;
            }

Я делал так.