-
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
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
- UWAGA: MAM PODEJRZENIE, ŻE onet.pl DOKONUJE ATAKÓW!!!
- Komisja sejmowa odrzuca petycję ws. obowiązkowych kanałów RSS na stronach podmiotów publicznych
- kol. sukces po polsku: "Samurai Labs. Technologia do zapobiegania samobójstwom"
- Wściekli obywatele spalili budynek parlamentu Nepalu [bo odcięli im amerykańskie serwery społecznościowe - przyp. JMJ]
- UWAGA: MAM PODEJRZENIE, ŻE trojmiasto.pl DOKONUJE ATAKÓW
- Cenzura na wolnemedia.net - likwidacja codziennej sekcji "Sygnały zauważone"
- Nowe style na energokod.pl
- Jak działa hosting w którym wykupuje się sam serwer i domenę, bez IP?
- Perfidne ataki krakerów z KRLD na skrypciarzy JS i Pajton
- Do sądu trafił pozew zbiorowy przeciw Google'owi - oskarżenie o praktyki monopolistyczne na rynku reklamy internetowej
- 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
Najnowsze wątki
- 2026-01-09 Warszawa => Dynamics 365 Commerce/POS Developer <=
- 2026-01-09 Ładowanie w 13 minut
- 2026-01-08 Umiejętność tankowania na egzaminie z prawa jazdy
- 2026-01-08 Nowy akumulator Donut Lab
- 2026-01-08 Komenda policji nie ma nic wspólnego ze sprawą zgwałcenia policjantki
- 2026-01-08 Pilot do zamka/bramy
- 2026-01-08 Ślad węglowy
- 2026-01-08 Prezydent SZAP/USONA Trump ułaskawił prezydenta Hondurasu Hernandeza skazanego na 45 lat więzienia
- 2026-01-08 Prezydent SZAP/USONA Trump ułaskawił prezydenta Hondurasu Hernandeza skazanego na 45 lat więzienia
- 2026-01-08 Agora zwalnia grupowo, mimo że w firmie pojawiły się zyski, czyli załoga zapracowała na siebie
- 2026-01-08 Agora zwalnia grupowo, mimo że w firmie pojawiły się zyski, czyli załoga zapracowała na siebie
- 2026-01-08 Dlaczego wrzucenie szkolnego krzyża do śmieci to zbrodnia mniejsza od zgaszenia sejmowej menory?
- 2026-01-08 NR 5G -- mity, hity, kity, bez satelity...
- 2026-01-07 Oszustwa w go go
- 2026-01-07 Jaka myjka ultradźwiękowa?
![5 Najlepszych Programów do Księgowości w Chmurze - Ranking i Porównanie [2025]](https://s3.egospodarka.pl/grafika2//5-Najlepszych-Programow-do-Ksiegowosci-w-Chmurze-Ranking-i-Porownanie-2025-270016-50x33crop.png "5 Najlepszych Programów do Księgowości w Chmurze - Ranking i Porównanie [2025]")
5 Najlepszych Programów do Księgowości w Chmurze - Ranking i Porównanie [2025]
