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

Path: news-archive.icm.edu.pl!news.rmf.pl!nf1.ipartners.pl!ipartners.pl!news.nask.pl!
news.nask.org.pl!newsfeed00.sul.t-online.de!t-online.de!border2.nntp.dca.gigane
ws.com!nntp.giganews.com!postnews.google.com!o21g2000prn.googlegroups.com!not-f
or-mail
From: MK <k...@w...pl>
Newsgroups: pl.comp.www
Subject: Re: CSS Strona podzielona 50/50 pionowo
Date: Tue, 16 Jun 2009 06:22:54 -0700 (PDT)
Organization: http://groups.google.com
Lines: 71
Message-ID: <4...@o...googlegroups.com>
References: <9...@k...googlegroups.com>
NNTP-Posting-Host: 217.153.186.194
Mime-Version: 1.0
Content-Type: text/plain; charset=ISO-8859-2
Content-Transfer-Encoding: quoted-printable
X-Trace: posting.google.com 1245158574 10960 127.0.0.1 (16 Jun 2009 13:22:54 GMT)
X-Complaints-To: g...@g...com
NNTP-Posting-Date: Tue, 16 Jun 2009 13:22:54 +0000 (UTC)
Complaints-To: g...@g...com
Injection-Info: o21g2000prn.googlegroups.com; posting-host=217.153.186.194;
posting-account=_AbhVQoAAACfyCKKD2uebo941fTyZOLM
User-Agent: G2/1.0
X-HTTP-UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.11)
Gecko/2009060215 Firefox/3.0.11,gzip(gfe),gzip(gfe)
Xref: news-archive.icm.edu.pl pl.comp.www:392370
[ ukryj 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