eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwZagadka
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


  • 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


  • 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


  • 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";
    }


  • 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>


  • 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.


  • 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



  • 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";
    }


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




  • 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";
    }

strony : [ 1 ] . 2


Szukaj w grupach

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: