Forum PHP.pl > różnokolorowe tło body

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

demolka666

25.05.2011, 15:39:18

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ć

Bo ja niestety nie mam wogóle pomysłu

mat-bi

25.05.2011, 15:41:02

dwa divy?

demolka666

25.05.2011, 16:53:35

A jak je mam rozciągnąć?
Muszą zajmować cały ekran, nie? A ekran może mieć różne rozdzielczości

thek

25.05.2011, 21:29:37

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 
<html>
<head>
<style>
*{margin:0;padding:0;}
</style>
</head>
<body>
<div style="width:50%;position:absolute;top:0;left:0;background-color:gray;height:100%;">lewo</div>
<div style="width:50%;position:absolute;top:0;left:50%;background-color:blue;height:100%;">prawo</div>
<div style="margin:0 auto;width:1000px;background-color:green;position:relative;">Srodek</div>
</body>
</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.

demolka666

25.05.2011, 22:11:02

@thek - centrowanie w IE to nie problem, wystarczy ustawić dla body text-align: center. Ale dzięki za Twój kod

.
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??

zegarek84

25.05.2011, 22:27:34

[HTML] pobierz, plaintext 
<html>
<head>
<style>
*{margin:0;padding:0;}
</style>
</head>
<body>
<div id="header" style="position:relative;width:100%;height:200px">
	<div style="position:absolute;width:50%;top:0;left:0;right:200px;bottom:0;background-color:gray;height:100%;">lewa</div>
	<div style="position:absolute;width:50%;top:0;left:50%;right:0;bottom:0;background-color:blue;height:100%;">prawa</div>
	<div style="margin-left:50%;position:absolute;height:100%;">
		<div style="margin-left:-500px;width:1000px;background-color:green;position:absolute;height:100%;">Srodek</div>
	</div>
</div>
 
 
reszta strony
 
</body>
</html>
[HTML] pobierz, plaintext

thek

25.05.2011, 22:44:34

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

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

[HTML] pobierz, plaintext 
<html>
<head>
<style>
*{margin:0;padding:0;}
</style>
</head>
<body style="background-color:brown;">
<div id="header" style="position:relative;">
	<div id="lewe_tlo" style="width:50%;position:absolute;top:0;left:0;background-color:gray;height:100%;">lewo</div>
	<div id="prawe_tlo" style="width:50%;position:absolute;top:0;left:50%;background-color:green;height:100%;">prawo</div>
	<div id="zawartosc_headera" style="margin:0 auto;width:1000px;background-color:red;position:relative;">Srodek 1</div>
</div>
<div id="tlo_reszty_strony" style="background-color:blue;position:relative;z-index:10;">
	<div id="zawartosc_reszty_strony" style="margin:0 auto;width:1000px;background-color:orange;position:relative;">Srodek 2</div>
</div>
</body>
</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...

everth

25.05.2011, 23:14:52

Trochę inne rozwiązanie oparte o z-indexy:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin:0;padding:0;}
 
#header
{
   height: 200px;
}
 
#id1, #id2
{
   position: absolute;
   width: 50%;
   top: 0;
   bottom: 0;
   background-color: green;
   z-index: -5;
   height: 200px;
}
 
 #id2 
{
   left: 50%;
   background-color: red;
}
 
#id3
{
   width: 1000px;
   height: 200px;
   margin: 0 auto;
   background-color: white;
}
</style>
</head>
<body style="background-color:brown;">
<div id="header" style="position:relative;">
   <div id="id1"></div>
   <div id="id2"></div>
   <div id="id3">Srodek 1</div>
</div>
<div id="tlo_reszty_strony" style="background-color:blue;position:relative;z-index:10;">
	<div id="zawartosc_reszty_strony" style="margin:0 auto;width:1000px;background-color:orange;position:relative;">Srodek 2</div>
</div>
</body>
</html> 
[HTML] pobierz, plaintext

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.