[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]

Napisz, że Ci się nie chcesz szukać rozwiązania, a nie...

Masz: http://www.cardeo.ca/creating-slick-button...le-backgrounds/

[Weles]

Napisz, że Ci się nie chcesz szukać rozwiązania, a nie...

Masz: http://www.cardeo.ca/creating-slick-button...le-backgrounds/

Taa.. tyle że ja dosłownie na tej stronie siedzę.
I jeszcze na tej.
http://www.css3.info/preview/multiple-backgrounds/

Odkąd pół godziny temu mi napisałeś to zapytanie to próbuję wymęczyć to, ale i tak nie wychodzi bo albo jeden obrazek nachodzi na drugi, albo wgl itd.

i tak też nie idzie..
.menu_button {
background: url(grafika/menu_button_1a.png) top left no-repeat,
url(grafika/menu_button_1c.png) top right no-repeat,
url(grafika/menu_button_1b.png) top center repeat-x;
height: 40px;
}
nakłada się jedno na drugie.

Ten post edytował Weles 16.12.2012, 22:35:09