Главная Вход в систему Регистрация
Задать вопрос Консультации Пользователи Форум
О системе Помощь
Задать вопрос экспертам
Консультация № 161013
20.02.2009, 17:51
0.00 руб.
0 1 1
Компьютеры Программирование
Здравствуйте! Помогите решить проблему.
Есть ссылка со словом "Подробнее..." у неё в качестве background поставлена картинка кнопки, НО ни как не получается сделать так, что бы эта картинка "тянулась" в след за текстом.... то есть у меня получается так что У слова Подробнее выходят за пределы картинки 5 последних символов. А хотелось бы конечно что бы картинка увеличивалась или уменьшалась в зависимости от длинны слова.
Или как растянуть картинку, хотя бы на фиксированную длину

Вызывается вот так:

<tbody>
<tr>
<td colspan="2">
<a href="/teh/index.php?option=com_content&view=article&id=2:-photoshop-cs-&catid=13:2009-02-17-10-05-55&Itemid=13" class="readon">
Подробнее...</a>

</td>
</tr>

</tbody>

CSS в приложении...

Приложение:
a.readon {
font: bold 12px Arial, Helvetica, sans-serif;
margin-top: 15px;
display: block;
float: left;
width: 124px;
height: 21px;
line-height: 21px;
padding-left: 34px;

background: transparent url(../images/icon-module-arrow.png) no-repeat 5px 50%;

color: #20272c;



Обсуждение

Неизвестный
22.02.2009, 02:05
общий
22.02.2009, 02:28
это ответ
Здравствуйте, Dan Ger!
Картинка в виде кнопки? Предлагаю изображение кнопки разделить на три части: первая часть - левая граница кнопки (btnleft.jpg), вторая - правая (btnright.jpg), а третья - центральная часть (btncenter.jpg), которая растягивается. Ширина центральной картинки может быть равна одному пикселю. Затем вложить друг в друга 3 span, а в них саму ссылку. Внешний span левую границу отображает. Вложенный в него - правую границу. Ну а вложенный во второй - центральную часть. HTML-код привожу в приложении.

Приложение:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>

<style type="text/css">
a.readon
{
font: bold 12px Arial, Helvetica, sans-serif;
color: #20272c;
}

span.spanlinkleft
{
background-image:url(btnleft.jpg);
padding-bottom:0PX;
padding-left:1PX;
padding-right:0PX;
padding-top:0PX;
background-position:left TOP;
background-repeat:no-repeat;
}

span.spanlinkcenter
{
height:14PX;
background-image:url(btncenter.jpg);
padding-bottom:0PX;
padding-left:4PX;
padding-right:4PX;
padding-top:0PX;
background-position:TOP;
background-repeat:repeat-x;
}

span.spanlinkright
{
background-image:url(btnright.jpg);
padding-bottom:0PX;
padding-left:0PX;
padding-right:1PX;
padding-top:0PX;
background-position:right TOP;
background-repeat:no-repeat;
}
</style>
</head>

<body>

<span class="spanlinkleft"><span class="spanlinkright"> <span class="spanlinkcenter">
<a href="/teh/index.php?option=com_content&view=article&id=2:-photoshop-cs-&catid=13:2009-02-17-10-05-55&Itemid=13" class="readon">
Подробнее...</a>
</span> </span></span>
</body>
</html>
Форма ответа