MetadataCSS pull quotes
Geniaal bedacht! Zo simpel dat ik het zelf ook had gekund.
Via R@LF’S WeBLoG kwam ik terecht bij Michael Pick, en de schillen vielen bijna letterlijk van mijn ogen. Met een onwaarschijnlijk simpel stukje CSS bereik je prachtige opmaak-effecten, waardoor een saai tekstblok helemaal tot leven kan komen.
Je zou zelfs kunnen overwegen om je weblog om te bouwen tot een soort van glossy-achtig magazine. Mij niet gezien, maar toch, met CSS kan het.
Hmmm.. dan bij jij met surfen verder gekomen als ik. Die site van MP had ik namelijk nog niet gespot.. Binnenkort maar eens ff goed doorlezen.
Ahum.. zie net dat ik niet echt goed gelezen heb.. zal wel door de warmte komen denk ik..
En weet je wat ik zo raar en irri vind.. die blanco ruimte op de plaats waar je de quote neerzet..
Die blanco ruimte rondom de tekst zit er in omdat het zo in de CSS style gedefinieerd is. Kun je makkelijk aanpassen, maar ik vind het wel aardig zo. Ik gebruik voor die kolom aan de rechterzijde deze opzet:
.pullquote {
float: right;
width: 150px;
margin-left: 15px;
margin-right: 0;
margin-top: 0;
margin-bottom: 15px;
padding: 0;
color: #333;
font-family: georgia, palatino, serif;
font-size: 17px;
text-align: left;
line-height: 20px;
}
Hier kun je met wat aanpassingen weer eindeloze varianten maken.
Nee, ik bedoel de ruimte voor de tekst ”Via Ralf’s Weblog..”, daar staan zo’n 3 lege positie’s.. Dit zelfde gebeurde ook in mijn testblog. Heb geen manier gevonden om die lege ruimte niet te laten onstaan.
oh ok, ik zal eens kijken hoe dat te verhelpen is.
Ben heel benieuwd! Ik heb nog geen manier gevonden om die lege ruimte te laten verdwijnen.. Op de één of andere manier nemen die div’jes toch wat positie’s in beslag.
Zet dez tag om het ‘inspringende’ tekstblok, en voila, het staat weer kaarsrecht:
<div style="margin-left:0px;">tekst-tekst-tekst-tekst-tekst-tekst-tekst-tekst-tekst</div>
Ja, dat werkt! Maar.. (ik ben vrij kieskeurig) daardoor wordt je pull quote ook links uitgelijnd.. en dat was nou net niet de bedoeling..
Dat is een kwestie van smaak, je kunt kiezen uit:
text-align: right;
text-align: left; (mijn voorkeur)
text-align: center;
text-align: justify;