Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

CSS-Beispiele: Blockquote, Textfeld, Hinweisboxen

Posted by sura1 - 8. Oktober 2008

Bookmark and Share

CSS-Beispiele: Blockquote (2x), Hervorgehobenes Textfeld, Hinweisboxen

Im Rahmen meiner Reihe “ Beispieldateien aus Little-Boxes – Teil 02 “ möchte ich Ihnen heute 4 neue CSS-Beispiele vorstellen.

Download: hier (15 KB – alle Dateien+Grafiken) oder am Ende jedes einzelnen Beispieles!


1. Zitate mit Blockquote:


Quelltext:
<body>
<h1>Zitate mit <em>blockquote</em></h1>

<p>Der folgende Absatz ist ein Block-Zitat mit Quellenangabe:</p>

<blockquote>
<p>Sie können Zitate von Fremdautoren in einem eigenen, anders
formatierten (zumeist eingerückten) Absatz hervorheben.</p>
<p>Es handelt sich dabei jedoch um eine logische, inhaltliche
Auszeichnung. Wie diese Absätze genau formatiert werden, bestimmt
letztlich der Web-Browser. Die Vorgabe ist jedoch, solche Absätze
auffällig und vom übrigen Text unterscheidbar anzuzeigen.
<cite>(Quelle: <a href="http://de.selfhtml.org/html/text/zitate_adressen.htm">
SelfHTML</a>)</cite></p>
</blockquote>

</body>
 CSS-Datei:
/* ==============================================
      Gestaltung Layout und Hyperlinks
      ============================================== */
   * {
      padding: 0;
      margin: 0;
   }
   h1, p {
      margin: 1em 0;
   }
   body {
      width: 50em;
      font-family: "Lucida Sans Unicode", "Lucida Grande",
      Verdana, Arial, Helvetica, sans-serif;
      font-size: small;
      line-height: 1.5;
      padding: 10px;
      margin: 0 auto;
   }
   a[href^="http:"] {
      background:url(linkinsweb.gif) no-repeat left center;
      padding-left: 16px;
   }
   a[href^="http:"]:visited {
      background-image: url(linkinsweb_visited.gif);
   }
   /* ==============================================
      Gestaltung von blockquote
      ============================================== */
   blockquote {
      background: #fff9df ;
      padding: 1em 1em 0 1em;
      border-top: 3px solid #f3c600;
      border-bottom: 3px solid #f3c600;
      margin-left: 0; /* keine Zentrierung */
   }
   blockquote cite {
      display: block;
      font-size: 90%;
      font-style: normal;
      letter-spacing: 1px;
      text-align: right;
   }



2. Zitate mit Blockquote und Grafik:


Quelltext:
<body>
<h1>Zitate mit <em>blockquote</em></h1>

<p>Der folgende Absatz ist ein Block-Zitat mit Quellenangabe:</p>

<blockquote>
<p>Sie können Zitate von Fremdautoren in einem eigenen, anders formatierten
(zumeist eingerückten) Absatz hervorheben.</p>
<p>Es handelt sich dabei jedoch um eine logische, inhaltliche Auszeichnung.
Wie diese Absätze genau formatiert werden, bestimmt letztlich der Web-Browser.
Die Vorgabe ist jedoch, solche Absätze auffällig und vom übrigen Text
unterscheidbar anzuzeigen.
<cite>(Quelle: <a href="http://de.selfhtml.org/html/text/zitate_adressen.htm">
SelfHTML</a>)</cite></p>
</blockquote>

</body>
 CSS-Datei:
/* ==============================================
      Gestaltung Layout und Hyperlinks
      ============================================== */
   * {
      padding: 0;
      margin: 0;
   }
   h1, p {
      margin: 1em 0;
   }
   body {
      width: 50em;
      font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana,
                    Arial, Helvetica, sans-serif;
      font-size: small;
      line-height: 1.5;
      padding: 10px;
      margin: 0 auto;
   }
   a[href^="http:"] {
      background:url(linkinsweb.gif) no-repeat left center;
      padding-left: 16px;
   }
   a[href^="http:"]:visited {
      background-image: url(linkinsweb_visited.gif);
   }
   /* ==============================================
      Gestaltung von blockquote
      ============================================== */
   blockquote {
   background: #fff9df url(quote.gif) no-repeat 5px 5px;
      padding: 1em 1em 0 40px;
      border-top: 3px solid #f3c600;
      border-bottom: 3px solid #f3c600;
      margin-left: 0; /* keine Zentrierung */
   }
   blockquote cite {
      display: block;
      font-size: 90%;
      font-style: normal;
      letter-spacing: 1px;
      text-align: right;
   background: url(unquote.gif) no-repeat right bottom;
   padding: 10px 40px 0 0;
   }



3. Hervorgehobene Textpassage:


Quelltext:
<body>
<h1>Hervorgehobene Passagen</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean blandit neque in turpis. Etiam vitae pede. Nam semper
arcu sollicitudin turpis. Vestibulum nec diam. Nunc placerat
tortor quis neque. Donec vulputate urna at magna. Vivamus sit
amet nunc fringilla sem ullamcorper tristique. Suspendisse vitae
turpis. Duis rhoncus velit. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Mauris
in quam. Integer sit amet lacus. Vivamus sit amet tortor. </p>

<blockquote class="hervorgehoben"><p>Hervorgehobene Passagen
werden tatsächlich gelesen!&nbsp;</p></blockquote>

<p>
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Suspendisse rhoncus. Proin
posuere, sapien quis bibendum nonummy, dolor lacus lacinia nulla,
sit amet mollis neque orci vel risus. Donec id lectus vitae augue
tempus adipiscing. Nam in pede et risus volutpat pretium. Nulla
congue est. Praesent non mauris eu nisl eleifend fermentum. Fusce
quis tortor. Suspendisse potenti. Pellentesque vel urna. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae;
</p>

</body>
 CSS-Datei:
/* ======================
      Gestaltung Layout
   ====================== */
* {
   padding: 0;
   margin: 0;
}
h1, p {
   margin: 1em 0;
}
body {
   width: 50em;
   font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana,
                 Arial, Helvetica, sans-serif;
   font-size: small;
   line-height: 1.5;
   padding: 10px;
   margin: 0 auto;
}

/* ==============================================
   Hervorgehobene Textpassage
   ============================================== */
.hervorgehoben {
	float:right;
   width: 15em;
	font-size: 110%;
   background-color: #fff9df;
	padding: 0 0 0 35px;
   border-top: 3px solid #f3c600;
   border-bottom: 3px solid #f3c600;
	margin: 10px;
}



4. Hinweisboxen:


Quelltext:

<body>
<h1>Hinweisbox</h1>

<p class="hinweisbox">Bitte füllen Sie das Feld "Name" aus.</p>
<p class="nr02">Bitte füllen Sie das Feld "Name" aus.</p>
<p class="nr03">Bitte füllen Sie das Feld "Name" aus.</p>
<p class="nr04">Bitte füllen Sie das Feld "Name" aus.</p>
<p class="nr05">Bitte füllen Sie das Feld "Name" aus.</p>

<p style="border: none; width: auto; padding: 0; margin-top: 1em;">
Die Icons sind aus dem
<a href="http://www.famfamfam.com/lab/icons/silk/">SILK-Set</a>
von famfamfam. </p>

</body>
 CSS-Datei:
/* ======================
      Gestaltung Layout
      ====================== */
   * {
      padding: 0;
      margin: 0;
   }
   h1, p {
      margin: 1em 0;
   }
   body {
      width: 50em;
      font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana,
                    Arial, Helvetica, sans-serif;
      font-size: small;
      line-height: 1.5;
      padding: 10px;
      margin: 0 auto;
   }
   /* ==============================================
      Hinweisbox
      ============================================== */
   p {
      width: 20em;
      padding: 5px 5px 5px 45px;
      border-top: 2px solid #f3c600;
      border-bottom: 2px solid #f3c600;
      margin-bottom: 2em;
   }
   p.hinweisbox { background: #fff url(error.png) no-repeat 15px center; }
   p.nr02 { background: #fff url(exclamation.png) no-repeat 15px center; }
   p.nr03 { background: #fff url(smiley.png) no-repeat 15px center; }
   p.nr04 { background: #fff url(asterisk_orange.png) no-repeat 15px center; }
   p.nr05 { background: #fff url(email.png) no-repeat 15px center; }


4 Antworten to “CSS-Beispiele: Blockquote, Textfeld, Hinweisboxen”

  1. Danke für die Anleitung. Sie hat mir sehr geholfen!

    • sura1 said

      Freut mich sehr, wenn ich Ihnen helfen konnte; vielleicht sehen Sie auch einmal in meinem neuen Weblog Sura1.at vorbei. Dort finden Sie auch mehrere interessante CSS-Beispiele!

      lg
      Sura1

  2. Schöne Anregung,
    ich verwende das dann mal so auf der Homepage der Alexander-Behm-Schule Tarp.

    Danke
    DasNordlicht

    • sura1 said

      Hallo Nordlicht!

      Freut mich, dass dir meine Anregungen gefallen und du diese auf der Homepage der Alexander-Behm-Schule Tarp
      verwenden willst.

      Da mein Blog Sura 1 Artworks bereits seit einiger Zeit stillgelegt ist, würde es mich freuen, wenn du
      bei Gelegenheit auf meiner neuen Webseite vorbeischaust:

      Suras Weblog

      lg Franz

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: