nagradzam tutoriale

  • Box informacyjny

    dodano 11.10.2007 / komentarzy: 0 / autor: palmiak

    W tym tutorialu pokażę jak uzyskać za pomocą XHTML i CSS boks informacyjny, który ostatnio mozna spotkać na wielu stronach.

    Nasz box wygląda następująco:

    Lorem ipsum nsn biksang klnfgn lsnldfg sdfgsdfg

    Przygotowania

    Pobieramy zestaw ikon z http://www.famfamfam.com/lab/icons/silk/

    Kodujemy

    Najpierw przygotujmy sobie kod xhtml

    <p class="box">Lorem ipsum nsn biksang klnfgn lsnldfg sdfgsdfg</p>
     

    Teraz bierzemy się za CSS. Na początku tylko zaznaczam, że ten kod obejmuje tylko obrazek, kolor i paddingi. Takie wartości jak rodzaj, kolor i wielkość czcionki czy szerokość zostaną odiedziczone z reszty strony. Oczywiście nic nie stoi na przeszkodzie, zeby zadeklarować je samemu.

    .box {
            background:#E4F8FE url(accept.png) no-repeat 20px 50%;
            padding: 9px 20px 9px 50px;
            border-top:2px solid #00A8DF;
            border-bottom:2px solid #00A8DF;
            }
     

    Już tłumaczę co za co odpowada:

    background:#E4F8FE url(accept.png) no-repeat 20px 50%;
    Ustalamy kolor tła, obrazek (ikonkę po lewej), fakt, że ta ikonka się nie będzie powtarzać (no-repeat) oraz umieszczamy ten obrazek 20px od lewej krawędzi i w połowie wysokości.

    padding: 9px 20px 9px 50px;
    Tutaj ustalamy marginesy wewnętrzne w kolejności góra, prawo, dół oraz lewo (jest 50px bo musimy pamiętać, że tekst nie może nam wejść na obrazek).

    border-top:2px solid #00A8DF;
    border-bottom:2px solid #00A8DF;

    A na końcu dodajemy z góry i dołu ramkę.

    I to wszystko. Możecie sobie teraz eksperymentować do woli :)

    Napisz komentarz