Join Chris Converse for an in-depth discussion in this video Positioning the citation, part of Design the Web: Creating a Pull Quote with CSS.
- Now we're going to address the fact…that the ending quote is positioned…over top of the citation.…So now before we create any CSS rules,…let's talk about what's happening.…We have our block quote here which has a bounding box.…We have absolute positioned the beginning and ending quote.…However, when we went back into the HTML…and edit the citation,…that increases the overall bounding box of the block quote.…And this in turn means that the bottom property…and inherited left property of the ending quote,…instead of picking up the text inside of the block quote…is now getting new properties because…it's following the citation.…
So what we're going to be doing…is absolute positioning the citation,…in addition to the beginning and ending quotes.…This way the bounding box of the block quote…will only be as large as the content…that's part of the quote.…So back in our CSS file,…let's find our selector…that's blockquote space cite.…After the color property,…let's come in here and add another property,…like position.…We're going to set this to Absolute,…
Released
2/17/2016Chris Converse provides free exercise files for every installment of Design the Web. Download the files to practice styling pull quotes on your own website.
Share this video
Embed this video
Video: Positioning the citation