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.

Geile dingen doen met inhoud & quotes

De universele 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
"Gigadesigns eigen dummy tekst generator,
zoals lorem ipsum".</p>
</div>
<div id="clear"></div>

Dat is de basis, na hieruit kun je alle mogelijke coole en geile dingen doen met je tekst en quotes (of afbeeldingen)

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

We bepalen met onze Css dat de container waarin alles gebeurd 400px breed moet zijn (om de hoogte hoeven we ons geen zorgen te maken), en we bepalen dat de <div> met de id quoting rechts moet worden geplaatst in de container. Natuurlijk kun je ook links de quote plaatsen door float:left; te gebruiken.
We geven deze 150px breedte en bepalen het lettertype, hoe groot de letters moeten zijn, welke kleur ze moeten hebben (de standaard kleur, de span kleuren worden door de span id’s zelf bepaald) en tenslotte geven we nog aan dat de tekst uitlijning rechts moet zijn, questie van een beetje stijl in te brengen.

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.

Voorbeeld float:right :

…Quotes maken een coole tekst om zoveel mooier dat het eigenlijk spijtig is dat het nu gedaan is…

Alas, the conjoint dog measurably said inside this talkative eel. Dear me, the porcupine is more submissive than a savage meadowlark. Ah, some gnu is much less rapid than this academic lizard. Dear me, a bald eagle is more matter-of-fact than that lucid caribou. Dear me, the porcupine is more submissive than a savage meadowlark. Dear me, the porcupine is more submissive than a savage meadowlark. Alas, the conjoint dog measurably said inside this talkative eel.

Voorbeeld float:left :

…Quotes maken een coole tekst om zoveel mooier dat het eigenlijk spijtig is dat het nu gedaan is…

Alas, the conjoint dog measurably said inside this talkative eel. Dear me, the porcupine is more submissive than a savage meadowlark. Ah, some gnu is much less rapid than this academic lizard. Dear me, lucid caribou. Dear me, the porcupine is more submissive than a savage meadowlark. Dear me, the porcupine is more submissive than a savage meadowlark. Alas, the conjoint dog measurably said inside this talkative eel.