Разтягане на бутон

[lub4o]

Здравейте, нямам си работа и започнах да си играя с направата на бутони от сорта на:

Виждате как според текста в бутона се определя неговата дължина.

Та въпроса ми е вие как подхождате в този случай и кой според вас е най - удачния начин за направата на бутони, които се разтягат според текста ?

Сетих се за няколко варианта, но не съм сигурен кой е по - добър.

1
html

<div class="left"></div>
<div class="center">web</div>
<div class="right"></div>

css

.left{background: url('left.png') no-repeart; width:bla; height:bla; float:left;}
.center{ background:url('center') repeat-x; height:bla; float:left;}
.right{background: url('left.png') no-repeart;width:bla;height:bla;float:left;}

Images

Float-ваме трите елемента, като на средния му задаваме repeat-x

2
html

<a href="#" class="button"><span>Web Tourist</span></a>

Css

.buttons{
background: url('right.png') no-repeat right top;
height:30px
float: left;
display:block;
}
.buttons span
{
background: url('left.png') no-repeat left top;
height:22px;
text-align:center;
padding: 10px 10px;
float: left;
}

img

3

<div class="button">WebT</div>

css

.button{
background: url('center.png') repeat-x;
height:30px;
border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}

Изключил съм го като вариант, тъй обичам всичко да ми е точно или по - точно (ie5 ie6 ie7 ie8)
4
html

<a href="buttons"><span>wttttttt</span></div>

css

.buttons span
{
background: url('varian3.png') no-repeat right -30px;
height:30px;
text-align:center;
float: left;
}
.buttons
{
background: url('varian3.png') no-repeat right top;
float: left;
height:30px;
}

img

5
Варианта с направата на 1500 бутона и съответно да ги викам с img, което не ме устройва.


Предложете ми някой вариант, който използвате вие и нямате проблеми с него.

Май не съм объркал раздела.
Айй дълга тема стана

 

[eddyy93]

Ами аз го правя по този вариянт.

[css]
.menu {width: auto; height: 20px;}

.left{width: 30px; height: 20px; background: url(img_left.jpg) no-repeat; float: left;}

.center{width: auto; height: 20px; background: url(img_center.jpg) repeat-x; float: left;}

.center_tekst{width: auto; height: 10px; margin: 5px;}

.right{width: 30px; height: 20px; background: url(img_center.jpg) no-repeat; float: left}
[/css]

<div class='menu'>

<div class='left'></div>
<div class='center'><div class='center_tekst'></div></div>
<div class='right'></div>

</div>

 

[lub4o]

И аз го карам с този по принцип и нямам проблеми, просто реших да разгледам другите. Ще се радвам и ако някой друг пише

 

[rivo]

2 е най-добре според мен, 3 картинки са, но изглежда най-добре, а може и да ги направиш на 1 картинка и просто да им викаш кординатите, спрайтове май се наричаха.

 

[lub4o]

2 е най-добре според мен, 3 картинки са, но изглежда най-добре, а може и да ги направиш на 1 картинка и просто да им викаш кординатите, спрайтове май се наричаха.

Както на вариант 4 съм направил?
background: url('') no-repeat right -36px; //Задавам точните координати

Но така примерно, ако имам 15 бутона и на тези 15 бутона, като се има в предвид, че ще имам <div class="left,center,right"> и като задавам координатите на тази картинка за left,center,right, то тя ще се зарежда цялата картинка 3 пъти, просто ще визуализира определената от мен позиция, това според мен е малко излишно, макар и много сайтове да го ползват.

Виждал съм сайтове, на които дизайна им е 1 картинка и всичко си го викат с точни координати на background, това няма ли да забави сайта много повече от това да си го нарежеш , както трябва ?