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

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.

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