Forum PHP.pl > Problem z tłem

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

pietrov8

30.04.2010, 20:35:07

Witam.

Mam jeden mały problem.
Otóż jak na poniższym obrazku można zauważyć że białe, ukośne tło kończy się w pewnym momencie.

http://yfrog.com/9edogooj

I teraz mam do Was pytanie. Czy da się zastosować powtórzenie tła (tło w PS mam do momentu gdy całe czerwone pole zostanie zapełnione) dla ukośnej lini??
Jeżeli nie to proszę o pomoc jak ten problem rozwiązać.

Html projektu: Projekt

krzysztof_kf

30.04.2010, 20:37:58

Możesz zastosować tam gdzie masz umieszczoną grafikę

[CSS] pobierz, plaintext 
 
background: url(grafika.jpg) repeat;
 
[CSS] pobierz, plaintext

pietrov8

30.04.2010, 20:42:22

No tak jest taka opcja lecz wtedy tło (grafika.jpg) straci swoje pierwotne położenie głównie chodzi o lewą stronę.

krzysztof_kf

30.04.2010, 20:46:18

hmm nie rozumiem jak straci położenie ? to ? Klik

pietrov8

30.04.2010, 20:48:34

Aha to źle się zrozumieliśmy. Mi chodzi o to białe tło które jest pod psem i na nim znajdują się przyciski od zmiany języków. Ono urywa się w pewnym momencie. Gdy zaś chce dać width 100% wtedy prawa strona ucieka na maxa w prawo i strona rozjeżdza się.

likemandrake

30.04.2010, 22:14:07

Zrób po prostu stronę o stałej szerokości, czyli wszystko to co znajduje się w <body /> opakuj w dodatkowy div, np <div id="container" /> i nadaj temu divowi stałą czerokość, np 1000px. Wyprzedzając ewentualne dalsze pytania, jeśli chcesz wyśrodkować takiego diva, dajesz mu margin left i right na auto, czyli w skrócie margin: 0 auto; przy czym, dla IE6 musisz zastosować hack i dla body ustawić text-align na center, a potem w divie przywrócić na left.

Hmmm, no cóż, pozdrawiam

pietrov8

1.05.2010, 07:47:39

No i co to dało

Tło z headera to czerwone zostało obcięte i tyle.

mortus

1.05.2010, 08:00:30

Cytat

Czy da się zastosować powtórzenie tła (tło w PS mam do momentu gdy całe czerwone pole zostanie zapełnione) dla ukośnej lini??

Rozumiem, że chcesz dociągnąć biały blok do końca prawej strony okna przeglądarki i oczywiście po skosie. Nie da się za pomocą background-repeat tego zrobić. Jedyne wyjście to wstawienie grafiki, co już jest wykonalne. Możesz np. tło całej strony wrzucić do body, a w tle headera umieścić odpowiednio długi fragment białego bloku, ustawić, żeby się nie powtarzał i wypozycjonować za pomocą background-position.

pietrov8

1.05.2010, 08:18:29

No tak ale jeżeli tło będzie szersze niż szerokość właściwa strony wtedy strona się rozjedzie i pojawi się pasek przewijania lewo-prawo. A Background position center wycentruje mi tło a nie spowoduje iż ten biały ukośny pasek będzie się zaczynał od wybranego miejsca z lewej strony.

mortus

1.05.2010, 08:59:57

Cytat(pietrov8 @ 1.05.2010, 09:18:29 )

No tak ale jeżeli tło będzie szersze niż szerokość właściwa strony wtedy strona się rozjedzie i pojawi się pasek przewijania lewo-prawo.

Szerokość tła umieszczonego jako background dla jakiegoś elementu nie wpływa na szerokość strony.

Cytat(pietrov8 @ 1.05.2010, 09:18:29 )

A Background position center wycentruje mi tło a nie spowoduje iż ten biały ukośny pasek będzie się zaczynał od wybranego miejsca z lewej strony.

A co za problem zrobić obrazek png (z przeźroczystością) o szerokości np. 1600px i w odpowiednim miejscu umieścić wspomniany fragment (u Cibie 545px od środka w poziomie).

Inaczej można rozwiązać problem stosując dodatkowego div-a z odpowiednim tłem i pozycjonowaniem, ale jest to trudniejszy sposób i wymagałby nieco szerszej modyfikacji Twojego kodu.

likemandrake

1.05.2010, 15:03:14

Domyślam się o co ci chodzi, ale przy Twoim projekcie graficznym i charakterze strony raczej odbiegałbym od strony, która dopasowywuje się do szerokości okna przeglądarki. Takie coś co ty chcesz zrealizować jest możliwe, tyle że musisz wstawić obrazek o takiej szerokości, aby uzyskać moment całkowicie białego tła. Projektując szablon nie wiele miałeś pojęcia o możliwości jego realizacji, stąd Twój problem. Ja proponuję zastosować rozwiązanie, które wyżej podałem i ewentualnie dodatkowo rzucić jakiś cień po brzegach kontenera oraz rzucić ogólne tło dla <body />.

Jeśli chodzi o rozwiązanie @mortus z przezroczystym PNG, musisz mieć świadomość, że pojawią się problemy z IE6, ale to Twoja decyzja, czy IE6 jeszcze Cię obchodzi.

pietrov8

2.05.2010, 07:22:54

Problem rozwiązany dzięki mortus'owi

http://piotr-m.vooa.pl/project/dogo/

likemandrake

2.05.2010, 21:55:36

Takie coś chciałeś uzyskać?

Nie mam więcej pytań

pietrov8

6.05.2010, 17:31:37

U mnie wszystko wygląda idealnie.

Proszę o zamknięcie tematu.

likemandrake

6.05.2010, 20:05:40

Cytat(pietrov8 @ 6.05.2010, 18:31:37 )

U mnie wszystko wygląda idealnie.

Ano to właśnie jest błędne podejście początkującego webmastera. No cóż, każdy z nas kiedyś się uczył, toteż życzę owocnej nauki.

Pozdrawiam
Piotr

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.