Das Blockquote-Tag

Runde Boxen

Runde Boxen sind ein Dauerthema für Webdesigner. Eine Variante...Runde Box

Der eine oder andere noch wenig erfahrene Webdesigner nimmt es kaum zur Kenntnis: das Blockquote-Tag. Ganz zu unrecht, finde ich jedenfalls, denn mit dem Blockquote-Tag lässt sich gerade bei textlastigen Webseiten eine bessere Strukturierung und damit auch Lesbarkeit der Webseite erreichen.

Nicht zuletzt kann man -eine entsprechende Platzierung und Farb- sowie Schriftgestaltung vorausgesetzt- damit auch einen eye-catcher-Effekt erzielen. Der CSS-Teil dieses Beispiels sieht so aus:

blockquote {
border : 2px solid #000;
width: 200px;
float: right;
margin: 0px;
padding: 5px;
background-color: #ccc;
color:#000000; 
font-size:10pt;
}

blockquote h2 {
font-size:12pt;
}

blockquote a {
quotes: "\2002hier\2002weiterlesen:\2002" "\2002\2192"; 
text-decoration:none;
font-weight: bold;
}

blockquote a:hover{
text-decoration:none; 
font-weight: bold;
color:#0000FF;
}

blockquote a:before { content: open-quote; font-weight: bold; color:#FF0000 }
blockquote a:after { content: close-quote; font-weight: bold; color:#0000FF }
blockquote a:hover:after { content: close-quote; font-weight: bold; color:#00FFFF }