Re: CSS Strona podzielona 50/50 pionowo - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › CSS Strona podzielona 50/50 pionowo › Re: CSS Strona podzielona 50/50 pionowo

Data: 2009-06-16 13:22:54
Temat: Re: CSS Strona podzielona 50/50 pionowo
Od: MK <k...@w...pl> szukaj wiadomości tego autora
[ pokaż wszystkie nagłówki ]
On 16 Cze, 12:07, eryq <e...@i...pl> wrote:
> Witam.
>
> Mam problem z podziałem stronki przy pomocy CSS 50/50.
>
> Dokładniej chodzi mi o to aby strona wygladała tak
>
> +----------------------------------------+
> | x | y |
> | +----------------------+ |
> | | z | |
> | | | |
> | +----------------------+ |
> | |
> +----------------------------------------+
>
> x - np kolor czerwony
> y - np kolor czarny
> z - np kolor zółty
>
> Czy ktoś wie jak to zrobić?

Nie jestem pewien, czy dobrze rozumiem. Chodzi o taki efekt, że połowa
tła strony ma jakiś kolor, a druga połowa ma inny?
Jeżeli tła mają być jednolite, to w prosty sposób można to obejść tak:

1. Przygotuj obrazek 1px wysokości na jakieś 3000px szerokości o
jednolitym tle (w tym przypadku czarnym - kolor Y).
2. Zadeklaruj tło body czerwone (kolor X) z obrazkiem przesuniętym o
50%

body{ background:red url('black.gif') repeat-y 50% 0; }
div#wrapper { background: yellow; } <- div dla właściwego contentu

A jeżeli chcesz coś bardziej skomplikowanego niż jednolite tło, to
wtedy trzeba użyć dodatkowego diva pozycjonowanego absolutnie:

<body>
<div id="bkg"></div>
<div id="wrapper">
content
</div>
</body>

html{ height: 100%; } /* IE6 hack */
body{ background: red url('obrazek_lewego_tla.gif') repeat 0 0; }
div#bkg{ position: absolute; z-index: 1; top: 0; left: 50%; width:
100%; height: 100%; background: black url('obrazek_prawego_tla.gif')
repeat 0 0; }
div#wrapper{ position: relative; z-index: 2; margin: 0 auto; width:
700px; background: yellow; } /* tutaj do zwykłych deklaracji dla
wrappera dodajesz position:relative i z-index:2, żeby wyświetlał się
nad #bkg */

Analogicznie można stosować także dwa divy oprócz obrazu tła:

div#left { position: absolute; z-index: 1; top: 0; left: -50%; }
div#right { position: absolute; z-index: 2; top: 0; left: 50%; }
div#wrapper { position: absolute; z-index: 3; ........ }

A na żywym organizmie możesz zobaczyć takie efekty np. na http://www.kolo.com.pl