К знатокам css

Здравсвуйте, такая задачка:
Нужно кнопку сделать больше чтоб -картинка т.е кнопка стала шире или больше чтоб "Главная "была в этой кнопке акуратно…

Вот сам код –

#pagenav ul li a {
background: url(images/nav.gif) repeat-x;
background-position: center 0px;
float: left;
display: block;
padding-left: 20px;
padding-right: 20px;
line-height: 30px;
height: 30px;
font-size: 14px;
letter-spacing: -1px;
color: #495d6d;
text-transform:uppercase;
font-weight: bold;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
}
Что посоветуете ?

Коментарии: 4

Qvot

28.02.2009 18:12

Ответить

в фотошопе растянуть

Carik

28.02.2009 18:17

Ответить

если не хотите, можно font-size: 14px; уменьшить до 10, но не уверен что 10 – поместиться. А меньше – уже не совсем читабельно.

Afon9

28.02.2009 18:52

Ответить

font-size: 11px; помещается, но шрифт нужно чтоб был 13-14, если в фотошопе размер поменять, то картинка теряется..! где можна прописать розширения места чтоб картинка там увличилась ? или может еще какие-то варианты есть ?

Swordman

28.02.2009 20:45

Ответить

Режете кнопку на две части – левый край и правый.
А дальше типа так:

ul {list-style:none; margin:0; padding:0;}
ul li {display:inline; margin:0px; padding:5px 0px 10px 10px; background:url(l_m.gif) left no-repeat;}
ul li a {background:url(r_m.gif) right no-repeat; color:#FFF; text-decoration:none; font-weight:bold; margin:0px; padding: 5px 20px 10px 10px;}

l_m.gif – это у меня бэк с левым краем кнопки, r_m.gif – с правым краем.
Ну высоты и прочие размеры подгоняйте под себя.

К знатокам css

Свежее