Tło tabeli ala gradient Opcje

[lectric]

Hej

Probuje wykonac cos takiego:

jest tabela np 700 x 500. Chcem dac jej tlo od gory szary rozjasniajac sie w dol do bialego (typowy gradient).

Robie tak:
przygotowalem pasek o szerokosci 1 px (gradient) wstawiam go do klasy w css jako tlo tabeli.
Wszystko ladnie piekie, tylko gdy tabela sie zwieksza w wysokoscie (dochodzi wiecej tekstu w tabeli) tlo zaczyna sie brzydko powtarzac od nowa
Dodatkowo wstawiajac w ta tabele inna tabelke tlo tej nowy zawsze jest biale a chcem zeby bylo przezroczyste.

prosze i pomoc.

[maryaan]

najprosciej zrobic tak:
1. ustalasz graniczne wartosci dla gradientu ciemnySzary i jasnySzary
2. ustalasz liczbe wierszy
3. obliczasz aktualny gradient dla kolejnych wierszy
numerWIersza * ((jasnySzary-ciemnySzary)/ileWIerszy) + ciemnySzary
i przypisujesz do kazdego wiersza styl zawierajacy kolor tla z wartosciami z powyzszych obliczen

[E -dd]

Wystarczy że zrobisz tak

Kod

background: url('tlo.gif') #color repeat-x;

#color to wartość koloru na którym się kończy grandient. Repeat-x odpowiada za powtarzanie tła graficznego. Jeśli chcesz zeby powtarzało w pionie a nie poziomie daj repeat-y.

[gekon]

A co to za matematyczna magia? Ja bym zrobił to tak:

[HTML] pobierz, plaintext 
table {
...
 background: url("obrazek.png") repeat-x top left;
...
}
table table { background-color: transpaernt; }
[HTML] pobierz, plaintext 

Ten post edytował gekon 1.02.2007, 20:07:08

[lectric]

eh no ok, podstawiany obrazek.png ma domyslne rozmiary szerokosc 1px wysokosc 200 px, gdy tabela ma wysokosc 200px jest ok ale gdy zwiekszy sie jej wysokosc o 50 px, tlo z obrazek.png zaczyna sie na nowo po raz drugi (od dolu)

[gekon]

Pokaż kod bo widzę, że się nie dogadamy.

[lectric]

[HTML] pobierz, plaintext 
TD.MAIN {
background-image:url('img/main_bg.gif');
background-repeat:repeat-y fixed;
	  }
[HTML] pobierz, plaintext 

[gekon]

No więc nie dawaj tła dla td, tylko dla table - tak jak pokazałem w przykładzie (chyba, że chcesz żeby każda komórka miała oddzielne tło). I jeszcze jak ustawiasz atrybuty oddzielnie to nie dawaj im dwóch wartości (fixed to background-position a nie repeat).

[lectric]

No ok. Tylko dalej pozostaje nie rozwiazane dla mnie najwazniejsze, jesli tlem dla komorki / tabeli czego kolwiek, jest plik obrazek.png o wymiarach 1px szerokosci i 200 px wysokosci i np. tabelka (wysokosc 200px) posiada takie tlo z takiego obrazka zacznie sie robic wieksza (np wysokosc 400px) to tlo zacznie sie powtarzac od nowa czego nie chce.

[gekon]

Za powtarzanie tła odpowiada właściwośc background-repeat i może przyjmować ona wartości: repeat (domyślna), repeat-x (powtarzanie w poziomie), repeat-y (powtarzanie w pionie), no-repeat (brak powtarzania), może być także dziedziczona. W Twoim przypadku powinno wyglądać to tak:

[HTML] pobierz, plaintext 
table{
//jakis inny kod
background-repeat: repeat-x;
//jakis inny kod
}
[HTML] pobierz, plaintext 

Wartość fixed, którą wstawiłeś w swoim kodzie może przyjmowac właściwość background-position.

[lectric]

no ok, i tak jest repeat-x ladnie wyglada tabelka ale co bedzie z tlem gdy tabelka bedzie wieksza ? np 300 px wysokosc - a plik tla ma wysokosci 200px ?

Tlo zacznie sie powtarzac od nowa czego ja nie chcem.

[gekon]

Boże ile razy można Ci tłumaczyć?! Jeżeli będzie repeat-x to tło nie będzie sie powtarzać na wysokość! Chyba, że coś zrobiłes źle, ale tego Ci nikt nie powie dopóki nie pokażesz kodu.

Ten post edytował gekon 5.02.2007, 18:12:08