Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> różnokolorowe tło body
demolka666
post
Post #1





Grupa: Zarejestrowani
Postów: 58
Pomógł: 0
Dołączył: 28.09.2009

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

Witam,
potrzebuję zakodować layout, tak, że po dwóch różnych stronach głównego pojemnika będzie inny kolor tła.
Jak widać na złączonym obrazku: Zielony box to główny pojemnik. Ma zdefiniowany width: 1000px i zawsze jest po środku (margin: 0 auto). Tło po lewej stronie ma być szare, a po drugiej niebieskie. Jak to zrobićquestionmark.gif Bo ja niestety nie mam wogóle pomysłu
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 7)
mat-bi
post
Post #2





Grupa: Zarejestrowani
Postów: 690
Pomógł: 92
Dołączył: 6.02.2011

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

dwa divy?
Go to the top of the page
+Quote Post
demolka666
post
Post #3





Grupa: Zarejestrowani
Postów: 58
Pomógł: 0
Dołączył: 28.09.2009

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

A jak je mam rozciągnąć?
Muszą zajmować cały ekran, nie? A ekran może mieć różne rozdzielczości
Go to the top of the page
+Quote Post
thek
post
Post #4





Grupa: Moderatorzy
Postów: 4 362
Pomógł: 714
Dołączył: 12.02.2009
Skąd: Jak się położę tak leżę :D
Ja wiem jak to zrobić w normalnych przeglądarkach, ale oczywiście IE robi jak zwykle problem, ponieważ nie centruje głównego kontenera. Może jednak to co mam Ci pomoże...
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style>
  4. *{margin:0;padding:0;}
  5. </style>
  6. </head>
  7. <body>
  8. <div style="width:50%;position:absolute;top:0;left:0;background-color:gray;height:100%;">lewo</div>
  9. <div style="width:50%;position:absolute;top:0;left:50%;background-color:blue;height:100%;">prawo</div>
  10. <div style="margin:0 auto;width:1000px;background-color:green;position:relative;">Srodek</div>
  11. </body>
  12. </html>
[HTML] pobierz, plaintext

Ogólnie myk polega na tym, by mieć dwa divy o szerokości 50% pod głównym kontenerem. By nie miały przeglądarki problemów, główny div MUSI mieć pozycjonowanie ustawione na relative, inaczej nie centruje. To właśnie moment gdzie IE się wywala. Rozwiązanie działa w Fx i operze na bank.


--------------------
Najpierw był manual... Jeśli tam nie zawarto słów mądrości to zapytaj wszechwiedzącego Google zadając mu własciwe pytania. A jeśli i on milczy to Twój problem nie istnieje :D
Go to the top of the page
+Quote Post
demolka666
post
Post #5





Grupa: Zarejestrowani
Postów: 58
Pomógł: 0
Dołączył: 28.09.2009

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

@thek - centrowanie w IE to nie problem, wystarczy ustawić dla body text-align: center. Ale dzięki za Twój kod smile.gif.
Ale problem jest taki, ze zaproponowane przez Ciebie rozwiązanie nie sprawdzi się u mnie, gdyż różnokolorowe tło przypadnie tylko na sekcję headera (o zmiennej wysokości). Reszta strony, poniżej headera, będzie miała zwykły background. I jak to zrobić, żeby de absolutne divy rozciągały się na wysokość headera??
Go to the top of the page
+Quote Post
zegarek84
post
Post #6





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

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

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style>
  4. *{margin:0;padding:0;}
  5. </style>
  6. </head>
  7. <body>
  8. <div id="header" style="position:relative;width:100%;height:200px">
  9. 	<div style="position:absolute;width:50%;top:0;left:0;right:200px;bottom:0;background-color:gray;height:100%;">lewa</div>
  10. 	<div style="position:absolute;width:50%;top:0;left:50%;right:0;bottom:0;background-color:blue;height:100%;">prawa</div>
  11. 	<div style="margin-left:50%;position:absolute;height:100%;">
  12. 		<div style="margin-left:-500px;width:1000px;background-color:green;position:absolute;height:100%;">Srodek</div>
  13. 	</div>
  14. </div>
  15.  
  16.  
  17. reszta strony
  18.  
  19. </body>
  20. </html>
[HTML] pobierz, plaintext


--------------------
Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.
Go to the top of the page
+Quote Post
thek
post
Post #7





Grupa: Moderatorzy
Postów: 4 362
Pomógł: 714
Dołączył: 12.02.2009
Skąd: Jak się położę tak leżę :D
W takim wypadku chyba najprościej byłoby zastosować ciutkę wariacji do powyższego, a więc "rozbić" główny kontener na 2 części i ten drugi objąć jeszcze jednym divem. Minusem jest fakt, że ów dodatkowy div będzie rozepchnięty tylko na wysokość diva wycentrowanego i spod niego będzie widać te dwa kolorowe. Dlatego cały header też powinien wtedy być divem objęty i pozycjonowany relatywnie to się wtedy ograniczy idealnie jak trzeba, ale jeśli strona będzie za mała (mniejsza niż 100% wysokości strony), to pod spodem nie będzie tła i będzie pustka. raczej rzadki przypadek, ale jeśli już zajdzie, to dla pewności możesz ustawić tło identyczne z tym, które masz w divie będącym konternerem dla środka 2 smile.gif
Popatrz u mnie na kod ponownie i zobacz jakie kolory tła są gdzie a dojdziesz co i jak, bo specjalnie każdy div ma inny kolor ustawiony wink.gif
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style>
  4. *{margin:0;padding:0;}
  5. </style>
  6. </head>
  7. <body style="background-color:brown;">
  8. <div id="header" style="position:relative;">
  9. 	<div id="lewe_tlo" style="width:50%;position:absolute;top:0;left:0;background-color:gray;height:100%;">lewo</div>
  10. 	<div id="prawe_tlo" style="width:50%;position:absolute;top:0;left:50%;background-color:green;height:100%;">prawo</div>
  11. 	<div id="zawartosc_headera" style="margin:0 auto;width:1000px;background-color:red;position:relative;">Srodek 1</div>
  12. </div>
  13. <div id="tlo_reszty_strony" style="background-color:blue;position:relative;z-index:10;">
  14. 	<div id="zawartosc_reszty_strony" style="margin:0 auto;width:1000px;background-color:orange;position:relative;">Srodek 2</div>
  15. </div>
  16. </body>
  17. </html>
[HTML] pobierz, plaintext


@zegarek84: Twój kod wywalił mi doszczętnie Firefoxa na szerokość. Według niego obliczone wielkości sprawiają, że środkowy, centrowany div jest szerszy niż rozdzielczość przeglądarki, a mam 1280x800, więc jak byk powinienem mieć ze 140 luzu z obu stron...
Powód edycji: [thek]: Dodałem id byś wiedział co gdzie jest :)


--------------------
Najpierw był manual... Jeśli tam nie zawarto słów mądrości to zapytaj wszechwiedzącego Google zadając mu własciwe pytania. A jeśli i on milczy to Twój problem nie istnieje :D
Go to the top of the page
+Quote Post
everth
post
Post #8





Grupa: Zarejestrowani
Postów: 782
Pomógł: 153
Dołączył: 21.07.2010

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

Trochę inne rozwiązanie oparte o z-indexy:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. <style>
  7. *{margin:0;padding:0;}
  8.  
  9. #header
  10. {
  11.    height: 200px;
  12. }
  13.  
  14. #id1, #id2
  15. {
  16.    position: absolute;
  17.    width: 50%;
  18.    top: 0;
  19.    bottom: 0;
  20.    background-color: green;
  21.    z-index: -5;
  22.    height: 200px;
  23. }
  24.  
  25.  #id2 
  26. {
  27.    left: 50%;
  28.    background-color: red;
  29. }
  30.  
  31. #id3
  32. {
  33.    width: 1000px;
  34.    height: 200px;
  35.    margin: 0 auto;
  36.    background-color: white;
  37. }
  38. </style>
  39. </head>
  40. <body style="background-color:brown;">
  41. <div id="header" style="position:relative;">
  42.    <div id="id1"></div>
  43.    <div id="id2"></div>
  44.    <div id="id3">Srodek 1</div>
  45. </div>
  46. <div id="tlo_reszty_strony" style="background-color:blue;position:relative;z-index:10;">
  47. 	<div id="zawartosc_reszty_strony" style="margin:0 auto;width:1000px;background-color:orange;position:relative;">Srodek 2</div>
  48. </div>
  49. </body>
  50. </html> 
[HTML] pobierz, plaintext


--------------------
Już mi się ani wiedzieć, ani tym bardziej myśleć nie chce.
[Think different]!
Go to the top of the page
+Quote Post
« Następny starszy · CSS · 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 Aktualny czas: 22.08.2025 - 04:06
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn