Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [css] background x 2, 2 różne tła dla jednej strony
p_rzemon
post 5.03.2008, 11:44:12
Post #1





Grupa: Zarejestrowani
Postów: 67
Pomógł: 0
Dołączył: 9.03.2006

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

Witam

potrzebuję 1/2 strony wypełnić tłem gdzie kreski układają się w sposób ////
a drugą połowę strony wypełnić kreskami odwróconymi \\\\

sama strona będzie wycentrowana

jak zrobić takie tło żeby przy zmianie rozdzielczości nie było problemów.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 4)
nitek
post 5.03.2008, 12:01:47
Post #2





Grupa: Zarejestrowani
Postów: 209
Pomógł: 37
Dołączył: 27.02.2008
Skąd: Kwidzyn

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

musiałbyś mieć dwa divy, z 50% wysokością, ale wtedy będziesz musiał poupychać treść w to wszystko w jakiś sposób... chybaze pokombinujesz do tego jeszcze z z-index

PS (zamiast tła ustaw sobie background-image):

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. </head>
  4.  
  5. <body>
  6.  
  7.  <div style='height: 50%; width:100%; background-color:silver;'>
  8.   div nr 1
  9.  </div>
  10.  
  11.  <div style='height:50%; width:100%; background-color:gray;'>
  12.   div nr 2
  13.  </div>
  14.  
  15. </body>
  16. </html>
[HTML] pobierz, plaintext


Ten post edytował nitek 5.03.2008, 12:04:44


--------------------
www.id2it.pl
Go to the top of the page
+Quote Post
grzesiek_g
post 5.03.2008, 12:19:29
Post #3





Grupa: Zarejestrowani
Postów: 249
Pomógł: 30
Dołączył: 18.07.2007

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

[HTML] pobierz, plaintext 
  1. <div id="container">
  2.     <div id="container2">
  3.         <!-- tresc strony -->
  4.     </div>
  5. </div>
[HTML] pobierz, plaintext


i css:
[HTML] pobierz, plaintext 
  1. #container {background:url(sciezka/do/obrazka1) repeat-x top;}
  2. #container2 {widht:100%;float:left;background:url(sciezka/do/obrazka2) repeat-x bottom;}
[HTML] pobierz, plaintext


To rozwiązanie prostsze, ale musisz utworzyć obrazki o odpowiedniej wysokości i nie jest odporne na różne rozdzielczości.

Inne rozwiązanie to pozycjonowanie absolutne:
[HTML] pobierz, plaintext 
  1. <div id="container"></div>
  2. <div id="container2"></div>
  3. <div id="strona">
  4.     <div id="main">
  5.         <!-- tresc -->
  6.     </div>
  7. </div>
[HTML] pobierz, plaintext

css:
[HTML] pobierz, plaintext 
  1. #container {
  2. background:url(sciezka/do/obrazka1) repeat;
  3. width:100%;
  4. height:50%;
  5. top:0;
  6. left:0;
  7. position:absolute;
  8. }
  9. #container2 {
  10. widht:100%;
  11. height:50%;
  12. background:url(sciezka/do/obrazka2) repeat;
  13. bottom:0;
  14. left:0;
  15. position:absolute;
  16. }
  17. #strona {
  18. position:absolute;
  19. top:0;
  20. left:0;
  21. z-index:100;
  22. width:100%;
  23. }
  24. #main {
  25. width:900px; /*tutaj zmień sobie*/
  26. margin:0 auto;
  27. }
[HTML] pobierz, plaintext


--------------------
Warsztat: Ubuntu 12.10, PHPStorm
http://vertoo.pl
Go to the top of the page
+Quote Post
p_rzemon
post 5.03.2008, 13:32:22
Post #4





Grupa: Zarejestrowani
Postów: 67
Pomógł: 0
Dołączył: 9.03.2006

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

ten 2 sposób jest całkiem fajny tylko że podział powinien być w pionie, możesz mi jeszcze podpowiedzieć jak ustawić parametry do takiego podziału
tzn. mam tak
Kod
#ca {
background:url(g2.jpg) repeat-x;
width:50%;
height:100%;
top:0;
left:0;
position:absolute;
}
#cb {
background:url(g1.jpg) repeat-x;
width:50%;
height:100%;
top:0;
right:0;
position:absolute;
}


i jest przerwa po środku 20px w IE w firefox jest ok

Ten post edytował p_rzemon 5.03.2008, 13:38:38
Go to the top of the page
+Quote Post
grzesiek_g
post 5.03.2008, 13:56:19
Post #5





Grupa: Zarejestrowani
Postów: 249
Pomógł: 30
Dołączył: 18.07.2007

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

Możesz dodać trzeci div który to wszystko przesłoni o szerokości 20px, maginesem lewym odsuniesz go na -10px, oczywiście pozycjonowany absolutnie z left:50%.

Uprzedzam, że nie testowałem tego i piszę "z palca".

Ale myślę, że da się to też inaczej wyciąć, tylko trzeba się dobrze zastanowić patrząc na psd.


--------------------
Warsztat: Ubuntu 12.10, PHPStorm
http://vertoo.pl
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 08:52
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn