Форум Сайтостроение Веб-строительство

Фон-ссылка вместе с текстом

D1
На сайте с 26.02.2013
Offline
61
dpakyj1a
503

Привет. Подскажите пожалуйста, есть картинка размером 220x42, сделанная в css, а в её центре надпись, которая является ссылкой. Но сам элемент ссылки распространяется только на сам текст. А нужно чтобы ссылка была такой же, как и размер фона за текстом - 220х42. display:block делает 220px ширину блока ссылки, но высота остаётся такой же, как и сам текст:

Вот собственно сам код:

<center>

<div class="knopka">

<a href="/" style="display: block;">Кнопка</a>

</div>

</center>

<style>

.knopka{

background: url("images/knopka.jpg") repeat-x;

color: #fff;

font-size: 16px;

font-weight: bold;

max-width: 220px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

padding: 8px 0 8px;

text-align: center;

text-shadow: 0 1px 0 #000;

text-transform: none;

}

</style>

Мой сайт - klinok.pl.ua.
A
На сайте с 04.11.2007
Offline
134
asteroid
#1

Просто задайте высоту блока

<a href="/" style="display: block; height:44px;">Кнопка</a>

а лучше в классе .knopka задать абсолютную высоту div-a, а тут указать относительную height:100%

SocFishing
На сайте с 26.09.2013
Offline
118
SocFishing
#2

Вот, например

https://jsfiddle.net/camzLrsz/

★Сервис идентифицирует (https://socfishing.com/?utm_source=searchengines) посетителей вашего сайта и предоставляет их профили ВКонтакте, Телефон, Почта! Цены копеечные, работаем 8 лет.
Desesperada
На сайте с 11.10.2010
Offline
77
Desesperada
#3

в чем проблема задать высоту ссылке?

Создание/наполнение сайтов ICQ 7860919 Принимаю предзаказы на сателлиты/гс в индексе
V
На сайте с 09.06.2015
Offline
2
Voronkov
#4

можна так

<a href="#">Кнопка</a>

a{

display: block;

height:44px;

text-align: center;

background: url("images/knopka.jpg") repeat-x;

border-radius: 5px;

color: #fff;

font-size: 16px;

font-weight: bold;

max-width: 220px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

padding: 8px 0 8px;

text-align: center;

text-shadow: 0 1px 0 #000;

text-transform: none;

}

Горизонтальное меню Оптимизация сайта для планшетов Почему гугл и яндекс

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий