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

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

« poprzedni wątek

następny wątek »

Ilość wypowiedzi w tym wątku: 7

1. Data: 2009-06-16 10:07:09
Temat: CSS Strona podzielona 50/50 pionowo
Od: eryq <e...@i...pl>

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ć?

[ pokaż wiadomość z nagłówkami ]

do góry
2. Data: 2009-06-16 10:17:11
Temat: Re: CSS Strona podzielona 50/50 pionowo
Od: "Radek N." <n...@g...pl>

eryq pisze:
> 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ć?

http://blog.html.it/layoutgala/

--
Radek N.

[ pokaż wiadomość z nagłówkami ]

do góry
3. Data: 2009-06-16 13:22:54
Temat: Re: CSS Strona podzielona 50/50 pionowo
Od: MK <k...@w...pl>

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

[ pokaż wiadomość z nagłówkami ]

do góry
4. Data: 2009-06-16 13:54:44
Temat: Re: CSS Strona podzielona 50/50 pionowo
Od: Grzegorz Staniak <g...@w...pl>

On 16.06.2009, eryq <e...@i...pl> wroted:

> 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ć?

Np. jakoś tak?

http://staniak.ovh.org/test.html

GS
--
Grzegorz Staniak <gstaniak _at_ wp [dot] pl>
Nocturnal Infiltration and Accurate Killing

[ pokaż wiadomość z nagłówkami ]

do góry
5. Data: 2009-06-16 16:58:26
Temat: Re: CSS Strona podzielona 50/50 pionowo
Od: Paweł Piskorz <n...@p...nie?>

MK pisze:
> 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?

U mnie to wygląda jakby chciał, żeby prawa krawędź wyglądała jakby ją
pies pogryzł ;)

> Jeżeli tła mają być jednolite, to w prosty sposób można to obejść tak:
>
> 1. Przygotuj obrazek 1px wysokości

Co tak mało? 100px wysokości przy jednolitym kolorze mu niewiele wpłynie
na rozmiar, a przeglądarki nie zajedziesz.

> na jakieś 3000px szerokości o

Ze skrajności w skrajność, 3000px? Dla kogo tyle? 2000px to już max
naciągane.

> jednolitym tle (w tym przypadku czarnym - kolor Y).
> 2. Zadeklaruj tło body czerwone (kolor X) z obrazkiem przesuniętym o
> 50%

Chyba nie rozumiesz jak działają % dla background-position:
http://www.w3.org/TR/CSS21/colors.html#propdef-backg
round-position
"<percentage>
A percentage X aligns the point X% across (for horizontal) or down
(for vertical) the image with the point X% across (for horizontal) or
down (for vertical) the element's padding box. For example, with a value
pair of '0% 0%',the upper left corner of the image is aligned with the
upper left corner of the padding box. A value pair of '100% 100%' places
the lower right corner of the image in the lower right corner of the
padding box. With a value pair of '14% 84%', the point 14% across and
84% down the image is to be placed at the point 14% across and 84% down
the padding box."
ergo tło strony będzie czarne, no chyba że pójdzie na łatwiznę i zrobi
obrazek tła do połowy wypełniony jednym kolorem, a reszta drugim, co
zresztą polecam :)

--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

[ pokaż wiadomość z nagłówkami ]

do góry
6. Data: 2009-06-18 14:40:06
Temat: Re: CSS Strona podzielona 50/50 pionowo
Od: eryq <e...@i...pl>

> Np. jakoś tak?
>
> http://staniak.ovh.org/test.html
>
IE sobie z tym co masz w test.html nie radzi.

Dokładnie coś takiego z tym że żółty ma mieć top: 0px; i być na 100%
height i ILESTAMpx width:
Czarny i czerwony także mają mieć height 100%.
Dodatkowo wszystko ma podążać za tekstem zawartym w żółtym.

Dzięki za podpowiedzi.

[ pokaż wiadomość z nagłówkami ]

do góry
7. Data: 2009-06-18 15:15:03
Temat: Re: CSS Strona podzielona 50/50 pionowo
Od: "Radek N." <n...@g...pl>

eryq pisze:
>> Np. jakoś tak?
>>
>> http://staniak.ovh.org/test.html
>>
> IE sobie z tym co masz w test.html nie radzi.
>
> Dokładnie coś takiego z tym że żółty ma mieć top: 0px; i być na 100%
> height i ILESTAMpx width:
> Czarny i czerwony także mają mieć height 100%.
> Dodatkowo wszystko ma podążać za tekstem zawartym w żółtym.
>
> Dzięki za podpowiedzi.

To jeszcze wygooglaj "faux columns" (np.
http://nadarzynski.net/tests/fauxcolumns/) i coś do kupy złożysz.

--
Radek N.

[ pokaż wiadomość z nagłówkami ]

do góry