[CSS]3 Obrazki w 1 Stylu, Jak zrobić 3 obrazki w 1 stylu? Opcje

[Weles]

Witam!

Mam button składający się z 1 (czy jak kto woli 3 oddzielnych) obrazku z którego:

od lewej potrzebne jest 10px bez powtarzania się, po tych pixelach od lewej jest potem pixel środkowy który ma 1px i ma się powtarzać na tyle ile jest na nim tekstu, a potem kolejne 10px od prawej które ma się nie powtarzać (wszystkie to mówię na szerokość - width)

I tutaj pada pytanie - jak to zrobić jakoś 'normalnie' ?

"NIE" Normalnie wymyśliłem tak:

[HTML] pobierz, plaintext 
<style>
.menu_button_1a {
	width: 10px;
	height: 35px;
	background: url(grafika/menu_button_1a.png) left no-repeat;
}
 
.menu_button_1b {
	padding-top: 8px;
	width: auto;
	height: 27px;
	background: url(grafika/menu_button_1b.png) center;
	font-family: Verdana;
	font-style: italic;
	font-size: 11px;
	color: #ffffff;
	text-shadow: 0px 1px 0px #000000;
}
 
.menu_button_1c {
	width: 10px;
	height: 35px;
	background: url(grafika/menu_button_1a.png) right no-repeat;
}
</style>
 
<table style="border-spacing: 0px;"><tr><td style="padding: 0px;"><div class="menu_button_1a"></div></td><td style="padding: 0px;"><div class="menu_button_1b">Strona Główna</div></td><td style="padding: 0px;"><div class="menu_button_1c"></div></td></tr></table>
[HTML] pobierz, plaintext 

Ale chodzi mi tutaj o jakiś normalniejszy sposób.
Jeśli chodzi o tabelkę, to dlatego że bez trybu blokowego lub span wszystko jedzie na dół a nie jest obok.

Da się to może zrobić w dajmy na to 1 klasie, 1 divie? po prostu coś normalniejszego niż ja tutaj nabadźgałem..

Nawet nie wiedziałem jak to mogę ująć w gogle, więc kieruję pytanie tutaj.

Pozdrawiam!

[Damonsson]

.png nie musi być zapisywany z przezroczystością.
Albo tak jak wyżej kolega napisał.
Albo pójdź krok dalej i zaprojektuj button wyłącznie za pomocą samego CSS, bez żadnych grafik. Ale to trochę kombinowania.

Albo jednak możesz to zrobić (IMG:style_emoticons/default/biggrin.gif)

spróbuj tak

[CSS] pobierz, plaintext 
width: 150px;
height: 45px;
border-left:10px solid transparent;
border-right:10px solid transparent;
background-image: url(http://uphere.pl/new/grafika/menu_button_1a.png), url(http://uphere.pl/new/grafika/menu_button_1c.png), url(http://uphere.pl/new/grafika/menu_button_1b.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left top, right top, left top;
background-origin: border-box,border-box,padding-box;
background-clip: border-box,border-box,padding-box;
[CSS] pobierz, plaintext 

Ten post edytował Damonsson 16.12.2012, 23:05:50

[Weles]

.png nie musi być zapisywany z przezroczystością.
Albo tak jak wyżej kolega napisał.
Albo pójdź krok dalej i zaprojektuj button wyłącznie za pomocą samego CSS, bez żadnych grafik. Ale to trochę kombinowania.

Albo jednak możesz to zrobić (IMG:style_emoticons/default/biggrin.gif)

spróbuj tak

[CSS] pobierz, plaintext 
width: 150px;
height: 45px;
border-left:10px solid transparent;
border-right:10px solid transparent;
background-image: url(http://uphere.pl/new/grafika/menu_button_1a.png), url(http://uphere.pl/new/grafika/menu_button_1c.png), url(http://uphere.pl/new/grafika/menu_button_1b.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left top, right top, left top;
background-origin: border-box,border-box,padding-box;
background-clip: border-box,border-box,padding-box;
[CSS] pobierz, plaintext 

(IMG:style_emoticons/default/ohmy.gif) to właśnie to o co mi chodziło, nie wpadłbym w życiu że border tutaj pomoże, stokrotne dzięki (IMG:style_emoticons/default/tongue.gif)