Blockquote

Index » Kategoria: CSS, Tutoriale » Tagi:

Cytujemy tekstOstatnio 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>.

  1. <blockquote><p>Tutaj cytat</p></blockquote>

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.

  1. blockquote{background-color:#fff url(gfx/cudzy_pocz.gif) left top no-repeat;}
  2. blockquote p{background-color:#fff url(gfx/cudzy_koniec.gif) bottom right no-repeat;}

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:

  1. blockquote{font-weight:bold; background:#fff url(gfx/cudzy_pocz.gif) left top no-repeat; margin:10px 0; padding:0 6px}
  2. blockquote p{background:#fff url(gfx/cudzy_koniec.gif) bottom right no-repeat; padding:0 20px}

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

  1. blockquote p:first-letter{font:bold 1.4em Georgia, "Times New Roman", Times, serif; text-transform:uppercase}

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.


* * *

  • Napisał: Adam — 13/11/2008 @ 10:40

    Mam to szcz???cie, ??e do joomla jest plugin, kt??ry mi umo??liwia tych cytat??w wstawianie.

  • Napisał: Kurdupel — 03/03/2010 @ 10:26

    Dzi?ki. Pomog??o!

  • Napisał: pr??ba — 21/10/2010 @ 19:53

    pr??ba

* pola wymagane

Linie i paragrafy automatyczne, adres e-mail nigdy nie widoczny.
Dozwolony HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> [code lang="css"][/code], [code lang="html"][/code]

Komentarze są moderowane. Spamowanie (reklamowanie innych stron, wpisy nie na temat itp.) komentarzy może spowodować zablokowanie IP komentującego.



 

tanie serwery www: timnet.pl

Webmark został zbudowany na silniku Wordpress
wpisy (rss)komentarze (rss)
design by zama 2008
Stat24

  • Tani hosting

    Szukasz sprawdzonego hostingu www? B?dziesz m??g?? prowadzi? sw??j w??asny serwis lub reklamowa? swoje us??ugi. A do tego zaoszcz?dzi? p??ac?c niewielkie pieniadze za du??? przestrze?? dyskow?. Zapraszamy do zapoznania si? ofert? firmy hostingowej TimNet. Dzi?ki naszej wsp????pracy z firm? mamy do zaoferowania 25% bonifikat? na tani hosting w tej firmie. Wystarczy w polu kupon zni??kowy wpisa?: webmark.shost.pl. Kupon jest do wykorzystania przy aktywacji konta www Serwer Home Hosting PL lub Serwer Web Hosting PL.
  • Saizenmedia

  • Vladstudio

  • Spectab

    Spectab
  • Reset

    Poni??ej zamieszczam link przyk??adowego zapisu css resetuj?cego domy??lne parametry (dope??nienia, marginesy, wielko??? czcionki itp) poszczeg??lnych element??w wykorzystywanych do zbudowania strony. Autorem opracowania jest Eric Mayer
  • Mo??e co?? uaktualni??

    Ju?? ponad p???? roku min???o od ostatniego wpisu… Ale jestem ponownie z nowym (jak zwykle po d??ugiej przerwie) wygl?dem strony i zamiarem uaktualniania jej od czasu do czasu. Ju?? nied??ugo do pobrania udost?pni? poprzedni theme pod wordpressa i zupe??nie nowy projekt.
  • 'Go??y dzie??'

    Go??y dzie?? na mojej stronie trwa?? do??? kr??tko. Jako?? nie jestem przekonany do “obdzierania” strony ze sk??ry tylko po to, aby zobaczy? czy narz?dy i tkank? ma zdrow?. Wydaje mi si?, ??e zupe??nie inaczej mo??na popularyzowa? standardy sieciowe.
  • Wordpress 2.5

    A new version of Wordpress is available. Taki komunikat wita mnie w panelu administracyjnym ju?? od kilkudziesi?ciu godzin. Czas na zmiany. Nowy skrypt jest podobno warty dokonaniu apgrajdu. Zobaczymy. Wi?cej na oficjalnej stronie Wordpressa.
  • Wielkanoc

    Pogodnych, spokojnych, pe??nych nadziei i mi??o??ci ??wi?t Wielkanocnych ??yczy: admin

Ostatnie komentarze

admin
TOP