Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [css][html] Podwójne tło
Dominis
post
Post #1





Grupa: Zarejestrowani
Postów: 77
Pomógł: 19
Dołączył: 13.02.2010

Ostrzeżenie: (0%)
-----

Witam,
mam problem.
Potrzebuję tak umieścić ten pasek z prostokątami, aby szedł od lewej strony (w lewym kierunku) strony , a następnie, z prawej strony, szedl od prawej strony, w prawa stronę.

nie mogę zrobić: 
[HTML] pobierz, plaintext 
  1. repeat-x
[HTML] pobierz, plaintext


ponieważ jeśli strona będzie wyświetlana w różnych rozdzielczościach, to będzie niestety problem, poniewaz te prostokąciki, będa innaczej się układały.
Mam nadzieje że zdjęcie pomoże troszke zrozumieć temat.

Zdjęcie:
Szare pole, będzie to strona o stałej szerokości, 980px, wyśrodkowane.
Problem, Prostokąty mają zaczynać się od tej strony(szarego pola) i jeden ma powtarzać sie w lewa strone, a drugi w prawa strone(od konców szarego pola)

(IMG:http://kevin.net.pl/smieci/test.png)

Ktoś ma pomysł jak to mogę uczynic?
Go to the top of the page
+Quote Post
Damonsson
post
Post #2





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

multiple background?
Go to the top of the page
+Quote Post
prowseed
post
Post #3





Grupa: Zarejestrowani
Postów: 433
Pomógł: 64
Dołączył: 29.01.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

multiple backgrounds spoko, ale jak to wypozycjonowac? (IMG:style_emoticons/default/wink.gif) Poza tym nawet najnowsze przegladarki jeszcze roznie interpretuja (jezeli w ogole) wszystkie właściwości. Sposoby rozne, albo jeden ogromny jpg o szerokosci 3000px (najgorsza opcja z mozliwych (IMG:style_emoticons/default/wink.gif) ) centrowany na srodku albo dwa divy i tutaj:
1. Na bokach strony zajmujace obszar pozostaly
2. Pod strona podzielone na 50%

pozniej w nich sobie ukladasz background od lewej i od prawej i dajesz repeat-x.
Go to the top of the page
+Quote Post
by_ikar
post
Post #4





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

Ostrzeżenie: (0%)
-----

W tych tematach: http://forum.php.pl/index.php?showtopic=191714 oraz http://forum.php.pl/index.php?showtopic=191629 podałem przykładowy kod, oraz mniej więcej opisałem jak coś takiego można w łatwy sposób osiągnąć.
Go to the top of the page
+Quote Post
Dominis
post
Post #5





Grupa: Zarejestrowani
Postów: 77
Pomógł: 19
Dołączył: 13.02.2010

Ostrzeżenie: (0%)
-----

dzięki za zainteresowanie..

by_ikar, niestety tam nie znalalzlem inf, które by mi pomogły.

Próbowałem podzielić storny na 3 divy, tzn, jeden div to background, drugi div to strona, trzeci div to background prawy.

Niestety nie udało mi się tego wyśrodkować, ani dynamicznie ustawić szerokość.

Divy ustawiałem obok siebie za pomocą float: left;
Może coś źle kombinowałem?
Go to the top of the page
+Quote Post
by_ikar
post
Post #6





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

Ostrzeżenie: (0%)
-----

Nie wiem po co te floaty, można spróbować rozwiązać to inaczej, aczkolwiek nie tak jakbyś chciał, i musiałbyś stworzyć większe tło, w sensie szersze, które by się powielało w dół, o ile powinno się powielać w dół. Następnie pobawić się marginesem, żeby obniżyć trochę tło strony i całość mogłaby tak wyglądać: 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         * { margin: 0; padding: 0; }
  6.         html, body { height: 100%; }
  7.         body { background: #fff url("http://img23.imageshack.us/img23/4026/bodybackgroundv.jpg") repeat-x; text-align: center; }
  8.  
  9.         #container { width: 100%; height: auto; clear: both; position: relative; background: url("http://img651.imageshack.us/img651/5413/containerbackground.jpg") top center repeat-y; margin-top: 160px; }
  10.  
  11.         .wrapper { width: 980px; height: auto; margin: 0 auto; position: relative; top: -160px; }
  12.  
  13.         /* ta część jest zbędna, ale dałem wysokość, żeby strona miała jakąś wysokość, oraz tło żeby było wiadomo gdzie jest nasz kontenet ;) */
  14.          .wrapper { background: #9f9d9d; min-height: 1000px; }
  15.     </style>
  16. </head>
  17. <body>
  18. <div id="container">
  19.     <div class="wrapper">
  20.  
  21.     </div>
  22. </div>
  23. </body>
  24. </html>
[HTML] pobierz, plaintext


Tyle że tło trzeba by zrobić jeszcze szersze, można je zrobić niższe (wysokość/height) i przy odpowiedniej szerokości nawet w większych rozdzielczościach nie było by widać że się nie powiela.
Go to the top of the page
+Quote Post
Dominis
post
Post #7





Grupa: Zarejestrowani
Postów: 77
Pomógł: 19
Dołączył: 13.02.2010

Ostrzeżenie: (0%)
-----

Dzięki "by_ikar", z tego cos sobie już zrobie;)
Go to the top of the page
+Quote Post
by_ikar
post
Post #8





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

Ostrzeżenie: (0%)
-----

Nie ma sprawy, pamiętaj żeby obrazek, który w sumie będzie dość wielki, żeby odpowiednio zapisać go, najlepiej obniżając mu jakość i sprawdzać czy będzie widać jakieś artefakty, jeżeli nie, to próbować obniżać aż do momentu pojawienia się artefaktów. Tak żeby zyskać trochę na wadze pliku, co by 200-300kb nie ważył (IMG:style_emoticons/default/wink.gif)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 10:47
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn