Citater, billedtekst og emnelister

Blockquote, figcaption og definitionlist.

Det er helt klart en god ide at være så præcis man kan i sin opmærkning – citater bør være opmærket korrekt. Det bliver lettere at style og i wordpress er der også adgang til blockquote i den visuelle editor.

Skærmbillede 2013-09-02 kl. 17.17.36

blockquote {
		font-style: italic;
		background-color: #eee;
		width: 500px;
		padding: 20px 20px 0;
		border: 1px solid gray;
		margin-bottom: 20px;
	}
 
q {font-size: 1.1em;}
 
blockquote footer {
		   background-color: #4d4d4d;
		   color: white;
		   letter-spacing: .2em;
		   text-align: right;
		   margin-top: 20px;
		   padding: 4px;
			}

Billedtekst eller figurecaption

Billedtekst kan være en god ide

Skærmbillede 2013-09-02 kl. 17.34.27

img {width: 300px;}
 
figcaption {
             background-color: #4d4d4d;
	     color: white;
	     letter-spacing: .2em;
	     text-align: right;
	     padding: 5px;
	     width: 290px;
	     margin-top: -10px;
}

En liste med emnegrupper

Definitionlist ser man ikke så ofte men er ret genial

Skærmbillede 2013-09-02 kl. 17.34.50

HTML:

<dl>
<dt>Foretter</dt>
	<dd>østers</dd>
	<dd>snegle</dd>
 
<dt>Hovedretter</dt>
	<dd>burger</dd>
	<dd>stegt flæsk</dd>
 
<dt>Desserter</dt>
	<dd>regnbueis</dd>
	<dd>lagkage</dd>
</dl>

Og CSS

dl {
    padding:0px;
    width: 300px;
    background-color: #aaa
}
 
dt {
     background-color: #4d4d4d;
     color: white;
     margin: 10px 0 5px 0;}
 
dd {font-style: italic;}

Leave a Reply