Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

XHTML/CSS-Übungen: Element blockquote

Posted by sura1 - 25. Juni 2008

Bookmark and Share

Das Element blockquote zeichnet ein langes Zitat aus. Es erzeugt eine eigene Zeile und muss Blockelemente beinhalten.

Das blockquote-Element wird gerne verwendet, um Einrückungen zu realisieren. Da es sich jedoch um eine logische Textauszeichnung handelt, die keine bestimmte Art der Formatierung vorschreibt, ist der Einrück-Effekt nicht garantiert.

Wie Zitate und Adressen genau dargestellt werden, darauf haben Sie mit XHTML keinen Einfluss. Sie können solche Elemente jedoch ganz einfach mit CSS formatieren.

Beispiel: (ohne CSS-Formatierung)

<p>Lorem ipsum usu dicit adversarium ne. Ex cum option aperiri nostrum,
pro in altera audiam, in dico atomorum sed. Ut euismod takimata cum.
Putent mediocritatem his et, an mucius persius interpretaris ius.
Vis ex lorem assum, in est nihil doming noster. Congue libris aliquam no per,
ius in dicunt iuvaret fierent, eum modus civibus ne.</p>

<blockquote>

<p><span>»</span>Die Art, wie er das Spielgerät liebkoste,

<em>verzückte</em> seine Anhänger<span>«</span></p>

</blockquote>

<p>Lorem ipsum usu dicit adversarium ne. Ex cum option aperiri nostrum,
pro in altera audiam, in dico atomorum sed. Ut euismod takimata cum.
Putent mediocritatem his et, an mucius persius interpretaris ius.
Vis ex lorem assum, in est nihil doming noster. Congue libris aliquam no per,
ius in dicunt iuvaret fierent, eum modus civibus ne.</p>

Ergebnis:

Beispiel (mit CSS-Formatierung):

zip-file: 1.51KB ( Download Beispieldateien )

Hier wird das blockquote-Element in einen Fließtext eingebaut. Der dazugehörige CSS-Code sieht wie folgt aus:


blockquote {
color: #927B6B;
font: italic 2em/1.2 georgia, serif;
float: right;
margin: .3em 0 .7em .5em;
text-align: center;
width: 250px;
}

blockquote p {
margin: 0;
}

blockquote em {
color: #87420F;
}

blockquote span {
color: #BAB9B3;
font-size: 1.1em;
font-weight: bold;
line-height: 1.0;
padding: 0 .2em;
}

Ergebnis (zur Vorschau auf die Grafik klicken!)

Informationen:

http://de.selfhtml.org/html/text/zitate_adressen.htm
http://www.mediaevent.de/xhtml/blockquote.html

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: