Webmark

Blockquote

Index » Kategoria: CSS, Tutoriale » Tagi:

Ostatnio ozdobi??em wydzielony blok tekstu - <blockquote> (d??u??szy cytat) cudzys??owem, kt??rego nie m??g??bym uzyska�? za pomoc�? normalnie sformatowanego tekstu. Sztuczka jest do??�? prosta i ??atwa w zastosowaniu na w??asnej stronie czy blogu. Nale??y pami�?ta�?, ??e z samej nazwy znacznika wynika, ??e jest to… cytat blokowy a zatem podobnie jak warstwy jest wy??wietlany blokowo. Domy??lnie wspomniany blok tekstu posiada odpowiednie wci�?cie (o ile nie jest sformatowany inaczej) i mo??e zawiera�? w sobie inne elementy blokowe.

Przyk??ad zastosowanie <blockquote> bez formatowania.

Morbi id lectus. Nullam pharetra faucibus. Ut libero lacinia quam tempus dignissim. Donec eget luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc mollis, turpis viverra ligula. Lorem ipsum primis in faucibus non, tristique senectus et odio. Nam vestibulum.

A taki mniej wi�?cej efekt uzyskamy na koniec niniejszego minitutoriala.

Morbi eleifend placerat. Mauris magna et libero. Morbi id lectus. Nullam pharetra faucibus. Ut libero lacinia quam tempus dignissim. Donec eget luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc mollis, turpis viverra ligula. Lorem ipsum primis in faucibus non, tristique senectus et odio. Nam vestibulum. Cras aliquet. Aliquam in posuere ante ipsum non mi libero, posuere eu, pulvinar velit. Vivamus nec diam id tortor. Etiam et netus et ipsum. Nunc nunc.

Uwa??ni, zauwa??yli zapewne, dziwnie wielk�? i innego kroju liter�? rozpoczynaj�?c�? cytat, ale o tym nieco p????niej. Aby uzyska�? do??�? dobrze prezentuj�?ce si�? cudzys??owy wykorzysta??em dwa, wcze??niej przygotowane, niewielkie gify z cudzys??owem otwieraj�?cym i zamykaj�?cym, kt??re ustawi??em jako t??o <blockquote> i akapitu <p>. Prawid??owo bowiem, cytat blokowy powinien zawiera�? akapit tekstu uj�?ty w znaczniki <p> i </p>.

Je??li zatem zar??wno cytat blokowy jaki i akapit s�? elementami blokowymi i mog�? "zawiera�? si�? w sobie", obrazek z cudzys??owem otwieraj�?cym mo??emy ustawi�? jako niepowtarzalne t??o w g??rnym, lewym rogu blockquote za?? gif zamykaj�?cy w prawym, dolnym roku akapitu. W takim przypadku oba cudzys??owy pozostan�? w odpowiednich, wcze??niej sformatowanych miejscach, bez wzgl�?du na obj�?to??�? tekstu cytatu.

Aby umie??ci�? obrazki/cudzys??owy w odpowiednich rogach z pomoc�? css ustawiamy je jako niepowtarzalne t??o zar??wno blockquote jak i akapitu, kt??ry jest w nim zawarty.

Nast�?pnie nale??y odpowiednio "rozsun�?�?" cudzys??owy nadaj�?c w/w elementom blokowym odpowiednie marginesy i dope??nienia. Przyk??adowy zapis sformatowanego blockquote m??g??by wygl�?da�? nast�?puj�?co:

Dzi�?ki odpowiednim dope??nieniom ("paddingom") cudzys??owy (czyli obrazki t??a) zosta??y rozsuni�?te i bez wzgl�?du na ilo??�? cytowanego tekstu pozostan�? na swoim miejscu. I to ju?? prawie wszystko. Do wyja??nienia pozosta??a ta dziwna pierwsza litera cytatu. Ot???? aby jeszcze bardziej zaznaczy�? charakter cytowanego tekstu wyr????ni??em pierwsz�? liter�? akapitu: m. innymi zmieni??em jej kr??j i wielko??�? - mo??na r??wnie?? zmieni�? jej kolor b�?d?? zawrze�? w jakim?? tle

Takim sposobem ??atwo i bezbole??nie, nie u??ywaj�?c skrypt??w mo??na upi�?kszy�? i wyr????ni�? cytowany blok tekstu. Oczywi??cie mo??na u??y�? innej grafiki obejmuj�?cej tekst: listk??w, gwiazdek i innych ozdobnik??w oddaj�?cych charakter danej strony.
Opisany spos??b mo??na wykorzysta�? r??wnie?? do nadawania t??a warstwom. P??ki co CSS 2 nie zezwala na nadanie jednej warstwie dw??ch r????nych te?? (ale to brzmi). O ile jednak w warstwie znajduje sie tekst w akapitach czy te?? inny element blokowy lub taki, kt??remu nadane zostan�? w??a??ciwo??ci blokowe (display:block), mo??na w w/w opisany urozmaica�? warstwy t??em "rosn�?cym" w zale??no??ci od wype??nienia takiego elementu.

Na koniec przypominam o istniej�?cej, liniowej formie cytowania za pomoc�? znacznika <q>, kt??ry jednak s??u??y do wyr????nienia tylko kr??tkich cytat??w. A tutaj do??�? stary, ale ci�?gle godny wykorzystania spos??b na cudzys????w bez u??ywania obrazk??w.

* * *

• Miniblog
• Komentarze
• Archiwum