Кнопка

[Ayaweb]

Не могу сообразить, как сделать вот такую кнопку

Нужно, чтобы она растягивалась, когда текста больше. я ее разрезала пополам, так как там градиент сплошной и вырезала полоску пиксельной ширины посередине. Код такой

<div id="top"></div><div id="middle">Недвижимость Доминикана</div><div id="bottom"></div>

.left #menu li div{
width:215px;
}
.left #menu li #top{
background-image:url(../img/left_menu_top.png);
height:41px;
}
.left #menu li #middle{
background:url(../img/left_menu_middle.png);
padding:0 20px 0 20px;
width:175px;
}
.left #menu li #bottom{
background-image:url(../img/left_menu_bottom.png);
height:41px;
}

Но, она, естественно, получается гораздо шире за счет того, что растягивается поле посередине, где текст. Накладку сделать нельзя, так как картинка полупрозрачная. В общем, я уже не знаю что тут сделать..

[rediskavet]

Я не понял, гораздо шире чем что, чем 215пх? Так вроде так и надо по заданию ведь "Нужно, чтобы она растягивалась, когда текста больше"?

Не можешь живой пример выложить, и поподробнее расписать что, куда и как должно растягиваться?

[Ayaweb]

Нее, я имела ввиду в высоту растягиваться.

*пиксельной высоты

Вот такая получилась

Edited November 24, 2010 by Ayaweb

[Ayaweb]

Вот живое

http://ayaweb.ru/test/

Edited November 24, 2010 by Ayaweb

[clavin]

Cам рисунок кнопки должен быть таким, чтобы можно было соответствующую кнопку сделать. Рисунок у кнопки, как видно, фиксированный.

[rediskavet]

Cам рисунок кнопки должен быть таким, чтобы можно было соответствующую кнопку сделать. Рисунок у кнопки, как видно, фиксированный.

Не почему, там вроде фон только внизу темнее, т.е. по горизонтали градиент не меняется, а значит можно как то извратиться, например текст который в кнопке, подвинуть вниз каким нибудь способом.

блок top точно можно по высоте сделать меньше чем 41пх, блоку bottom задать минимальную ширину которую позволяет сделать градиент, ну и подвинуть текст вниз, чтобы он налезал на блок bottom. Как то так.

[Ayaweb]

У меня не получается. Если делать, чтобы средний блок залезал на верхний и нижний - перекрываются фоны, а там полупрозрачность. Обрезать верхний и нижний градиент уже не получиться

[Great Rash]

Попробуйте сделать программный градиент. В нормальных браузерах это будет CSS3, а в ИЕ это будут фильтры. Единственное фильтры не очень кантачат с прозрачностью, но попробовать можно.

[arez]

Вот этого по моему вполне достаточно http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html ни каких извращений с картинками, легко правиться, подгоняется под нужды и т.д.