Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [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
 
 Start new topic
Odpowiedzi
by_ikar
post
Post #2





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

Posty w temacie
- Dominis   [css][html] Podwójne tło   5.02.2012, 11:05:26
- - Damonsson   multiple background?   5.02.2012, 11:25:49
- - prowseed   multiple backgrounds spoko, ale jak to wypozycjono...   5.02.2012, 13:54:05
- - by_ikar   W tych tematach: http://forum.php.pl/index.php?sho...   5.02.2012, 14:37:09
- - Dominis   dzięki za zainteresowanie.. by_ikar, niestety tam...   6.02.2012, 00:25:55
- - by_ikar   Nie wiem po co te floaty, można spróbować rozwiąza...   6.02.2012, 09:16:15
- - Dominis   Dzięki "by_ikar", z tego cos sobie już z...   6.02.2012, 09:30:45
- - by_ikar   Nie ma sprawy, pamiętaj żeby obrazek, który w sumi...   6.02.2012, 11:14:11

« 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

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

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