При создании шаблонов для Joomla очень часто использую один простой пример, который позволяет оформлять ссылки красиво. Единственное условие для организации этого, необходимо, чтобы анкор ссылки был заключен в span, т.е. иметь следующий вид:
<a href=’#’ title=’title’><span>Добро пожаловать</span></a> |
Пункты меню в Joomla как раз выводятся в таком формате.
Далее рисуем в фотошопе фон для кнопки, и разрезаем на две части. Левая будет короче. В моем случае ее размеры 7*31. Правую часть делаем шире, она будет резиновой, и тянуться в соответствии с длинной ссылки.
Теперь осталось только прописать стили для ссылок:
a.btn, a.btn:visited{ background:url(../images/button-left.png) top left no-repeat; display:block; height:31px; line-height:31px; float:left; margin:0 10px 0 0; color:#666; text-decoration:none; text-shadow:1px 1px 2px #FFF; } a.btn span{ background:url(../images/button-right.png) top right no-repeat; display:block; margin:0 0 0 7px; padding:0 7px 0 0; } a.btn:hover{color:#333;} |
Следует обратить внимание, что у ссылки ставим display:block, и задаем высоту. Свойство line-height будет равно высоте. Теперь про span, который внутри ссылки: сдвигаем его вправо на ширину левой картинки, в моем случае 7px (margin:0 0 0 7px). Плюс ко всему делаем отступ справа (padding:0 7px 0 0).
Пример можно посмотреть здесь.
Посмотрела пример. При увеличении количества символов (+12 символов) появляется разрыв фона кнопки. Получается кнопка тянется до определенного предела?
Конечно. Будет тянуться до ширины картинки button-right.png. Сделайте ее в 400px на всякий случай, и будет вам счастье.
А мне для работы часто хватает 200.
А пример то и не работает 🙁
Переезжал на другой хостинг. Папку с демо случайно удалил.