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

multiple background css - już wiesz co wpisać w google

[Weles]

multiple background css - już wiesz co wpisać w google

Lipa.. jakkolwiek próbuję, to nie wychodzi..

np.:

[HTML] pobierz, plaintext 
 .menu_button {
	width: 100px;
	height: 35px;
	background: url(grafika/menu_button_1a.png) left no-repeat,  url(grafika/menu_button_1c.png) right no-repeat;
}
[HTML] pobierz, plaintext 

[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

[Damonsson]

Ale co Ty tam męczysz? Masz gotowca, w którym jedyne zmiany jakie musisz zrobić, to podmiana źródła grafiki i ewentualnie wysokości.
Pokaż online co wymęczyłeś.

[Weles]

Ale co Ty tam męczysz? Masz gotowca, w którym jedyne zmiany jakie musisz zrobić, to podmiana źródła grafiki i ewentualnie wysokości.
Pokaż online co wymęczyłeś.

Momencik, już wrzucam na FTP i ci pokazuję.

Ok, link:
http://uphere.pl/new/

Ten post edytował Weles 16.12.2012, 22:37:59

[Damonsson]

.png jest przezroczysty, więc widać wszystko pod tymi obrazkami niewypełnionymi kolorem.

[Weles]

.png jest przezroczysty, więc widać wszystko pod tymi obrazkami niewypełnionymi kolorem.

No to właśnie :f
Mówię że nie mogę nic wykombinować, a JPG odpada, a tamten sposób co w poście głównym z tabelkami podałem jest beznadziejny po prostu.

Ten post edytował Weles 16.12.2012, 22:49:02

[Pawel_W]

to zrób to starym dobrym sposobem - css sliding doors

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

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ć

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 

to właśnie to o co mi chodziło, nie wpadłbym w życiu że border tutaj pomoże, stokrotne dzięki

[Pawel_W]

swoją drogą trochę boli że pomimo ciągłego rozwoju technologii nawet w CSS3 trzeba się posługiwać takimi fixami

[Damonsson]

No niestety też nad tym ubolewam, ale jakoś trzeba sobie radzić. W sumie dawno temu miałem identyczny problem i nie wiedziałem kompletnie jak go rozwiązać. Dzisiaj po tylu latach z CSS, mniej więcej znam jego zachowania na różne podawane parametry i wiem jak go ugryźć, żeby zrobił to co się konkretnie chce.