eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwCSS Strona podzielona 50/50 pionowoRe: 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

Podziel się

Poleć ten post znajomemu poleć

Wydrukuj ten post drukuj


Następne wpisy z tego wątku

Najnowsze wątki z tej grupy


Najnowsze wątki

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: