CSS PullQuotes without JavaScript
« Top methods for Faster, Speedier web sitesChanging Any Password On XP »
Jun 09, 07
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 »
Reader Comments
Skip to formLike honey.. We Keep em' Buzzin
WebDev Technology
Someone's Reading
- PullQuotes using CSS
- 12 Lessons for Those Afraid of CSS
- Mixed SSL Content Warning Secure Fi
- Links to htaccess tutorials and art
- Changing Any Password On XP
- Get the Most from Search Engines
- Mod_Rewrite Basic Examples
- Commonly Used htaccess Code
Related Articles
- Review: Posh CSS
- Online CSS Compression Tools
- Best CSS .Classes for CSS Toolbox
- mod_rewrite Fix for Caching Updated
- Firefox, Firebug, and yslow are REQ
- CSS Background Image Sprites
- Best-practice Web Design Process
Popular
- .htaccess files - Ultimate htaccess
- htaccess rewrite, Mod_rewrite trick
- Custom Boot Menu in Windows XP
- Hack WP-Cache for Maximum Speed
- htaccess rewrite, htaccess
I'm Reading
- DoxPara Research
- The Honeynet Project
- milw0rm
- metasploit
- mod_security blog
- Mozilla Security Blog
- BlogSecurity
- Web Designer Wall
- W3C QA Home
Technology Articles
- WordPress Plugins
- Google Love SEO
- .htaccess Tips and Tricks
- Apache HTTPD
- Computer Security Articles
- Search Engine Experiments
- PHP Programming
- Linux / Unix / BSD
- Shell Scripting, Python, Perl
- CSS, DOM, XHTML
- Advanced Shell-Scripting
Online Tools
- JavaScript Compress Obfuscator
- Advanced HTTP Headers
- Request Method Security Scan
- .htpasswd Generator
- Password Cracker
- Who Am I
.htaccess Forum
Ask Apache News
Random Articles
- Racing the Windows XP ACL demon
- Using TIME_HOUR and TIME_MIN for htaccess RewriteCond
- 301 Redirect with mod_rewrite or RedirectMatch
- Speed Up Sites with htaccess Caching
- .htaccess - Wikipedia
Other Articles
- DreamHost Server IP Address List
- Vulnerability Scanners Review
- Best Free Online Banking for Web Professionals
- SPF Records on DreamHost
- Sending POST form data with php CURL
This work by AskApache.com is licensed under the most accommodating license type available, just credit source according to license. .htaccess examples
Nice work. :) I thought you’d like to see my approach as well: http://www.designmeme.com/articles/csspullquotes/
Really well done, thanks!