Zagadka - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › Zagadka

« poprzedni wątek

następny wątek »

Ilość wypowiedzi w tym wątku: 19

1. Data: 2010-12-16 23:48:37
Temat: Zagadka
Od: desertman <d...@p...onet.pl>

Witam,
Mam szybką zagadkę.
Jaki kolor strony wyświetli się dla poniższych kodów stron?

----test1-----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional
.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test1</title>
</head>
<body style="padding: 0; margin: 0; background-color: red">
<div style="background-color: blue; height: 100%;"></div>
</body>
</html>

----test2-----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
</head>
<body style="padding: 0; margin: 0; background-color: red">
<div style="background-color: blue; height: 100%;"></div>
</body>
</html>

I może ktoś mądry wytłumaczy mi dlaczego tak jest? ;)

pozdrawiam
desertman

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

do góry
2. Data: 2010-12-17 00:36:42
Temat: Re: Zagadka
Od: kamil d <k...@t...pl>

Określ w pierwszym height 100% dla <body> oraz <html> i zobacz co się
stanie.

Wygląda na to, że w XHTML wysokość elementu określona w procentach jest
ustawiana na "auto" jeśli wysokość rodzica też jest "auto". Test:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional
.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test1</title>
</head>
<body style="padding: 0; margin: 0; background-color: red">
<div style="background-color: blue; height: 400px;">
<div style="background-color: aqua; height: auto;">
<div style="background-color: white; height: 80%;">
</div>
</div>
</div>
</body>
</html>

Dlaczego tak jest nie wiem, pewnie gdzieś w dokumentacji jest odpowiedź ;)

--
kamil d

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

do góry
3. Data: 2010-12-17 00:48:15
Temat: Re: Zagadka
Od: kamil d <k...@t...pl>

W sumie teraz to nawet takie zachowanie wydaje mi się logiczne ale późno
już ;) Przecież % wysokości z rodzica, który ma wysokość zero to będzie
zero. Widocznie specyfikacja HTML 4.01 w takiej sytuacji przewiduje
odwołanie się do kolejnego elementu nadrzędnego (czyli w twoim
przykładzie <body> -> <html> -> rozmiar okna przeglądarki) a XHTML 1.0
nie. Niech ktoś powie czy dobrze kombinuję czy lepiej mam iść spać.

--
kamil d

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

do góry
4. Data: 2010-12-17 11:53:54
Temat: Re: Zagadka
Od: Paweł Piskorz <n...@p...nie?>

On 2010-12-17 00:48, desertman wrote:
> Witam,
> Mam szybką zagadkę.
> Jaki kolor strony wyświetli się dla poniższych kodów stron?
>
>
> ----test1-----
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional
.dtd">

Tryb standardów.

> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
> <head>
> <title>test1</title>
> </head>
> <body style="padding: 0; margin: 0; background-color: red">
> <div style="background-color: blue; height: 100%;"></div>
> </body>
> </html>

Czerwony.

> ----test2-----
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Tryb wstecznej zgodności.

> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
> <head>
> <title>test</title>
> </head>
> <body style="padding: 0; margin: 0; background-color: red">
> <div style="background-color: blue; height: 100%;"></div>
> </body>
> </html>

Niebieski.

> I może ktoś mądry wytłumaczy mi dlaczego tak jest? ;)

W trybie wstecznej zgodności <body/> jest magiczne.

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

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

do góry
5. Data: 2010-12-17 12:56:06
Temat: Re: Zagadka
Od: desertman <d...@p...onet.pl>

W dniu 2010-12-17 01:36, kamil d pisze:
> Określ w pierwszym height 100% dla <body> oraz <html> i zobacz co się
> stanie.
>

To nie działa, tzn działa ale nie tak jak powinno.
Po ustawieniu height: 100% dla html i body faktycznie div pojawia się na
całej stronie (niebieski), ale jeśli do tego diva wrzucę zawartość która
jest większa niż wysokość ekranu, to div ma tylko wysokość ekranu,
później zawartość wychodzi z diva.

przykład kodu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional
.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
style="height: 100%">
<head>
<title>test1</title>
<style type="text/css">
html, body, #kontener{height: 100%}
body{padding: 0; margin: 0; background-color: red;}
#kontener{background-color: blue;}
#content{font-size: 100px}
</style>
</head>
<body>
<div id="kontener">
<div id="content">Test<br/>test<br />Test<br/>test<br
/>Test<br/>test<br />Test<br/>test<br />Test<br/>test<br
/>Test<br/>test<br />Test<br/>test<br />Test<br/>test<br /></div>
</div>
</body>
</html>

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

do góry
6. Data: 2010-12-17 13:02:39
Temat: Re: Zagadka
Od: desertman <d...@p...onet.pl>

W dniu 2010-12-17 01:48, kamil d pisze:
> W sumie teraz to nawet takie zachowanie wydaje mi się logiczne ale późno
> już ;) Przecież % wysokości z rodzica, który ma wysokość zero to będzie
> zero. Widocznie specyfikacja HTML 4.01 w takiej sytuacji przewiduje
> odwołanie się do kolejnego elementu nadrzędnego (czyli w twoim
> przykładzie <body> -> <html> -> rozmiar okna przeglądarki) a XHTML 1.0
> nie. Niech ktoś powie czy dobrze kombinuję czy lepiej mam iść spać.
>

To do czego odnosi się w takim bądź razie rozmiar tego diva w XHTML 1.0?

To nie jest dobry trop. Tu chyba chodzi o to że body w XHTML nie ma tak
jakby zdefiniowanego rozmiaru, pomimo że się wyświetla na całą wysokość
i szerokość okna przeglądarki. Tak jakby było elementem inline domyślnie
i rozciągniętym na całe okno przeglądarki, ale możliwe jest dla niego
zdefiniowanie rozmiarów i wtedy zachowuje się jak element typu block.
:confused:
Nie mogę tego ogarnąć i zrozumieć, a co za tym idzie osiągnąć efektu
który chciałem.

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

do góry
7. Data: 2010-12-17 13:06:23
Temat: Re: Zagadka
Od: desertman <d...@p...onet.pl>

W dniu 2010-12-17 12:53, Paweł Piskorz pisze:

>
>> ----test2-----
>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
>
> Tryb wstecznej zgodności.

Jaki tryb wstecznej zgodności? To przecież również jest standard - o ile
już nie doznałem pomieszania zmysłów to HTML i XHTML to standardy
kodowania stron (podobne a jakże różne :))

>
> W trybie wstecznej zgodności <body/> jest magiczne.
>
No i właśnie chciałbym, aby jakiś magik mi wyjaśnił tą magiczność. ;)
Chociaż dla mnie to raczej w XHTML <body> zachowuje się niezrozumiale

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

do góry
8. Data: 2010-12-17 13:36:53
Temat: Re: Zagadka
Od: Paweł Piskorz <n...@p...nie?>

On 2010-12-17 14:06, desertman wrote:
> W dniu 2010-12-17 12:53, Paweł Piskorz pisze:
>
>>
>>> ----test2-----
>>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
>>
>> Tryb wstecznej zgodności.
>
> Jaki tryb wstecznej zgodności?

http://hsivonen.iki.fi/doctype/

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

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

do góry
9. Data: 2010-12-17 15:21:34
Temat: Re: Zagadka
Od: desertman <d...@p...onet.pl>

W dniu 2010-12-17 14:36, Paweł Piskorz pisze:
>>
>> Jaki tryb wstecznej zgodności?
>
> http://hsivonen.iki.fi/doctype/
>
No tak, zupełnie nie zwróciłem uwagi że w HTML 4.01 dałem transitional.
Po ustawieniu doctype na strict w HTML, oba kody działają jednakowo,
tzn. div z ustawionym height: 100% jest niewidoczny, tzn. nie rozciąga
się na wysokość <body>.
Dla mnie logicznym zachowaniem powinno być przejęcie wysokości rodzica
(czyli <body> w tym przypadku) przy takim ustawieniu, ale co ja tam wiem.

Masz może pomysł jak ustawić styl dla tego diva żeby rozciągał się na
całe <body>? Mi się nie udało.

Może napiszę co chciałem zrobić, to może ktoś podpowie jakiś inny sposób.
Grafik mi podesłał layout dla stronki, gdzie tło całej strony składa się
z dwóch warstw:

1. gradient pionowy, który ustawiłem aby był powtarzany poziomie na całą
szerokość strony(background-repeat: repeat-x). Uzyskany efekt to
przejście od jasnego do ciemnego koloru w pionie. Obrazek ma wymiary 1px
x 1000px. Dla body ustawiłem kolor tła na najciemniejszy kolor z
gradientu, w przypadku gdyby strona była wyższa niż 1000px.

2. wzorek w gifie z przeźroczystym tłem (60x60px), który powinien być
nałożony na ten gradient. Wzorek jest powielany w poziomie i w pionie
(background-repeat: repeat) na całym obszarze strony.

Dla body ustawiłem background 1 (gradient) i chciałem następnie dać diva
z przypisanym background 2 (wzorek).
No i tu zaczęły się problemy z tym divem, którego nie mogę rozciągnąć w
pionie na wysokość <body>.

Jeśli nie uda mi się znaleźć rozwiązania, żeby zrobić to na dwóch
warstwach, to jedyny pomysł jaki mi przychodzi to zrobić tło z
gradientem i wzorkiem o wysokości jakieś 2000px - 3000px i szerokości
60px i wrzucić to tło do <body> z repeat-x.

Jakieś inne, lepsze pomysły?

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

do góry
10. Data: 2010-12-17 20:48:06
Temat: Re: Zagadka
Od: Paweł Piskorz <n...@p...nie?>

On 2010-12-17 16:21, desertman wrote:
> W dniu 2010-12-17 14:36, Paweł Piskorz pisze:
>>>
>>> Jaki tryb wstecznej zgodności?
>>
>> http://hsivonen.iki.fi/doctype/
>>
> No tak, zupełnie nie zwróciłem uwagi że w HTML 4.01 dałem transitional.
> Po ustawieniu doctype na strict w HTML, oba kody działają jednakowo,
> tzn. div z ustawionym height: 100% jest niewidoczny, tzn. nie rozciąga
> się na wysokość <body>.
> Dla mnie logicznym zachowaniem powinno być przejęcie wysokości rodzica
> (czyli <body> w tym przypadku) przy takim ustawieniu, ale co ja tam wiem.

<body>
<div style="height:100%"></div>
<div style="height:100%"></div>
</body>
Ile powinno mieć body, a ile każdy div? ;)

> Masz może pomysł jak ustawić styl dla tego diva żeby rozciągał się na
> całe <body>? Mi się nie udało.

Poszukaj sobie rozwiązań "sticky footer", zwykle korzystają właśnie z
diva rozciągniętego na całe body.

> Może napiszę co chciałem zrobić, to może ktoś podpowie jakiś inny sposób.
> Grafik mi podesłał layout dla stronki, gdzie tło całej strony składa się
> z dwóch warstw:
>
> 1. gradient pionowy, który ustawiłem aby był powtarzany poziomie na całą
> szerokość strony(background-repeat: repeat-x). Uzyskany efekt to
> przejście od jasnego do ciemnego koloru w pionie. Obrazek ma wymiary 1px
> x 1000px. Dla body ustawiłem kolor tła na najciemniejszy kolor z
> gradientu, w przypadku gdyby strona była wyższa niż 1000px.
>
> 2. wzorek w gifie z przeźroczystym tłem (60x60px), który powinien być
> nałożony na ten gradient. Wzorek jest powielany w poziomie i w pionie
> (background-repeat: repeat) na całym obszarze strony.
>
> Dla body ustawiłem background 1 (gradient) i chciałem następnie dać diva
> z przypisanym background 2 (wzorek).
> No i tu zaczęły się problemy z tym divem, którego nie mogę rozciągnąć w
> pionie na wysokość <body>.

Masz jeszcze <html/>.

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

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

do góry