-
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
Następne wpisy z tego wątku
- 16.06.09 13:54 Grzegorz Staniak
- 16.06.09 16:58 Paweł Piskorz
- 18.06.09 14:40 eryq
- 18.06.09 15:15 Radek N.
Najnowsze wątki z tej grupy
- Jakie znacie działające serwery grup dyskusyjnych?
- is it live this group at news.icm.edu.pl
- php, linki z nazwami a $_GET, SEO
- www polityka pl captcha
- dyktatura brudnego palucha
- www.znanylekarz.pl
- Czy pytanie o sczytywanie stron programami/skryptami to tu?
- Grupy webdevowe
- Jak wydrukować stronę?
- IIS, kilka witryn
- linki <a href="/strona.php"> (ze slashami)
- co rozszerza stronę??
- responsywny akapit <p>
- Czy istnieje jakiś emulator przeglądarek pod Mac'a?
- taka sama konfiguracja dla localhost i produkcji
Najnowsze wątki
- 2024-12-01 Rambo 2024. Co z radio-stopem
- 2024-12-01 Pijani kierowcy
- 2024-12-01 "Chciałem zamówić kurs tym"
- 2024-11-30 Windykatorzy ścigają spadkobierców z mandat nieboszczyka za przekroczenie prędkości???
- 2024-11-30 Łódź => Technical Artist <=
- 2024-11-30 Lublin => Inżynier Serwisu Sprzętu Medycznego <=
- 2024-11-30 Warszawa => Microsoft Dynamics 365 Business Central Developer <=
- 2024-11-30 Bieruń => Team Lead / Tribe Lead FrontEnd <=
- 2024-11-30 Zielona Góra => Senior PHP Symfony Developer <=
- 2024-11-30 Gdańsk => Specjalista ds. Sprzedaży <=
- 2024-11-30 Lublin => Spedytor międzynarodowy <=
- 2024-11-30 Warszawa => Mid IT Recruiter <=
- 2024-11-30 Warszawa => Fullstack Developer <=
- 2024-11-30 Żerniki => Dyspozytor Międzynarodowy <=
- 2024-11-30 Warszawa => System Architect (background deweloperski w Java) <=