Een kleine blok tekst weergeven in je tekst, aan de linker of rechter kant om extra aandacht te trekken.
Of als toelichting op je tekst een afbeelding plaatsen zonder je tekst te moeten stop zetten voor de afbeelding.
Hier worden 4 verschillende manieren beschreven:
- inline image quotes
- image blockquotes, idem als eerste maar op een andere manier
- pullquotes
- floating quotes
1. Inline image quotes
CSS:
blockquote {
text-indent: 25px;
background: url(quotes1.png);
background-position: 0 2px;
background-repeat: no-repeat;
}
blockquote p {
display: inline;
margin: 0;
padding-right: 24px;
background: url(quotes2.png);
background-position: bottom right;
background-repeat: no-repeat;
}
XHTML:
<blockquote cite="Brian Littrell"><p>Shoot for the moon. Even if you miss, you'll land among the stars.</p></blockquote>
2. Blockqoutes en pullquotes
CSS:
.blockquote {
background-image: url(images/open-quote.gif);
background-repeat: no-repeat;
background-position: left 5px;
padding-left: 30px;
font-style: italic;
}
.blockquote span {
background-image: url(images/close-quote.gif);
background-repeat: no-repeat;
background-position: right bottom;
display: block;
padding-right: 30px;
}
XHTML:
<blockquote><span>Everyone knows to use block quotes as a way to highlight, well, a quote. And while this is a good technique to use, you should also try a pull quote every once in a while.</span></blockquote>
3. Pullquotes
CSS:
.pullquote {
padding: 10px;
float: right;
width: 200px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #694e1c;
border-bottom-color: #694e1c;
font-size: 16px;
text-align: center;
line-height: 36px;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: normal;
}
XHTML:
<h4 class="pullquote">put the text for the pullquote here</h4>
4. Floating quotes
CSS:
#kleur1 {
color: #ffd700;
}
#kleur2 {
color: #ffa500;
}
#clear {
clear: both;
)
#container {
width:400px;
}
#quoting {
float: right;
width: 150px;
margin : 10px 20px 10px 10px;
font-family: Georgia,Arial,Helvetica;
font-size: 28px;
line-height: 24px;
color:#FF6600;
padding-bottom:5px;
text-align: right;
}
De kleuren van de span kleur1 en kleur2 bepalen we in de id zelf (hier goud en oranje), en dan een belangrijk onderdeel komt op het einde, namelijk de laatste <div> met id:clear, dit is noodzakelijk om alle volgende inhoud die na de quote komt weer zijn normale plaats te geven, dus de id:clear zorgt ervoor dat alle floats die eerder gebeurden nu afgesloten (opgehoffen) worden.
XHTML:
<div id="container">
<div id="quoting">
<span id="kleur1">
...Quotes maken een
</span>
coole tekst
<strong>
om zoveel mooier dat het eigenlijk
</strong>
spijtig is
<span id="kleur2">
dat het nu gedaan is...
</span>
</div>
<p>Alas, the conjoint dog measurably said
inside this talkative eel. Dear me, the porcupine
is more submissive than a savage meadowlark</p>
<p>Dummy tekst gemaakt met generator,
zoals lorem ipsum".</p>
</div>
<div id="clear"></div>
I didn’t!
