CSS PullQuotes without JavaScriptJune 9th, 2007
« Top methods for Faster, Speedier web sitesChanging Any Password On XP »
I looked at a lot of different ways to display quotes and pullquotes and even though the javascript solutions are very nice, esp. the 456bereastreet.com solution, I decided to just use CSS (Keep It Simple Stupid).
Heres what it looks like:
I discovered the “q” tag and tried it out, once it validated as
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Yes thats XHTML 1.0 Strict. I also checked it with Firefox 1.0*-2.0* and IE 6.0.2*-the new IE 7.0. It also renders perfectly in Opera, Mozilla, and Netscape. Once I learned all that I was completely sold!
Example XHTML:
<q>I can go to bat for them and make it a win-win-win </q>
<p><strong>"I put a renewal plan togethe</strong>r last year for one of my clients</p>
<q class="q2">our clients are the ones who really reap the greatest benefits!</q>
<p><strong>"I have to be sure that I can</strong> get all of the ..sometimes I can go to bat for them and make it a win-win-win etween!"</p>
Example CSS:
q {float:left; width:18em; display:block; margin:0.25em 0.75em 0.25em 1em; padding:0.5em; border:3px double #CCC; border-width:3px 0; color:#333; background-color:#f0f0f0; text-align:center; font:italic 1.3em/1.3 Georgia;}
q.q2 {float:left; width:9em; display:block; margin:0.25em 0.75em 0.25em 1em; padding:0.5em; border:3px double #CCC; border-width:3px 0; color:#333; background-color:#f0f0f0; text-align:center; font:italic 1.3em/1.3 Georgia;}
Links
Pure CSS (no js)
Good Javascript Examples:
For Wordpress:
« Top methods for Faster, Speedier web sitesChanging Any Password On XP »
Similar Reads
- Review: Posh CSS
- Online CSS Compression Tools
- Best CSS .Classes for CSS Toolbox
- CSS Background Image Sprites
- Firefox, Firebug, and yslow are REQUIRED
- 12 Lessons for Those Afraid of CSS
- mod_rewrite Fix for Caching Updated Files
- Best-practice Web Design Process
- Top methods for Faster, Speedier web sites
- Top Javascript Code Snippets for 2007
- Come On and Sprite for your Website
Sponsors
Someone's Reading
- PullQuotes using CSS
- Arp Packet Hacking
- Install multiple OS Without Cds
- Custom PHP.ini tips and tricks
- Abbr and Acronym examples
- SEO with Robots.txt
- Debug apache log files from php
- Fast and Easy Custom WordPress New User Registration
Related Articles
- Review: Posh CSS
- Online CSS Compression Tools
- Best CSS .Classes for CSS Toolbox
- CSS Background Image Sprites
Most Popular 100
- Abbr and Acronym examples
- Speed Up Sites with htaccess Caching
- Undetectable Sniffing On Ethernet
- SEO with Robots.txt
- Custom PHP.ini tips and tricks
- .Htaccess rewrites, Mod_Rewrite Tricks and Tips
- Apache SSL in htaccess examples
- Sending POST form data with php CURL
- htaccess rewrite, htaccess
- Ultimate Htaccess Guide and .htaccess Tutorial
Newest Posts
- The Final Countdown – Mario Bros Style
- Make Windows XP Blazingly Fast
- Student under Criminal Investigation for Allegedly Sending Email
Random
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee
It's very simple -
you read the protocol
and write the code.
-Bill Joy
HTML | DCMI | GRDDL | XOXO | XDMP | XFN | DOM | XML | XHTML 1.1 Strict | CSS 2.1 | W3C | WAI | DISA | ICSI | GIAC | SANS RR | GHOST
Authority: 110 ↑ TOPExcept where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License, just credit with a link.
This site is not supported or endorsed by The Apache Software Foundation (ASF). All software and documentation produced by The ASF is licensed according to these terms. "Apache" is a trademark of The ASF.
Nice work. :) I thought you’d like to see my approach as well: http://www.designmeme.com/articles/csspullquotes/
Really well done, thanks!