20 Dec, 2008

Floating quotes

Categoriën: box |crossbrowser |Xhtml Strict

Als je tekst schrijft en wilt bijvoorbeeld 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.

HTML

<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>Alas, the conjoint dog measurably said
inside this talkative eel. Dear me, the porcupine
is more submissive than a savage meadowlark</p>
</div>

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;
}

Gerelateerde Snippets

Geen reacties op "Floating quotes"

Reactie formulier


Demo: Floating quotes:

Advertenties

Volgende nieuwe Snippet:

  • Momenteel niks gepland.