Style Evolves Posted by: Dale Franks
on Tuesday, December 27, 2005
CSS is a great breakthrough in web designAs you may have noticed, we've implemented a new style element here at QandO: the callout box. This is a Cascading Style Sheet element that is simple to implement, format, and change. CSS is a great breakthrough in web design. It's not quite up to the usefulness and reliability of tables, mainly because different browsers still handle CSS differently. But it's still a very useful—indespensible, actually—part of modern web design.
It will also be a standard formatting tool available with .Blog v2.0, which will be released in the not-too-distant future. .Blog, by the way, is the blogging software that I created, and which powers QandO, and several other blogs. <shamelesspromo>It's only 20 bucks! You should buy it!</shamelesspromo>
To implement it yourself, in case you're interested, do the following:
1. Add the follwing styles to your CSS stylesheet:
You can, of course, modify any of the attributes you'd like, except the "float" attribute. Don't screw with that. That determines on what side of the page the callout appears.
2. Once you've added the styles above to your style sheet, to make some text a callout use the following syntax in the body of your post:
<span class="quoteleft">Quoted text</span>
In this example, the callout will appear on the left side of the page. To make the callout appear on the right side of the page, use "quoteright", instead of "quoteleft".
Don't screw with the "float attribute!My experience indicates that the best practice is to drop in a callout at the very beginning of a paragraph. You can, of course, pop one in anywhere you'd like, but doing it at the very beginning of a paragraph works best, especially for people who wish to copy & paste text for quoting in other forums. You do not need to add in a carriage return, or anything above of below the callout text, and in fact, it's best if you dont. An example of the callout's use is given in the HTML example below:
<span class="quoteright">It's a happy place...as long as you have fun the way prescribed by Disney</span>Back in the 1990's, I worked for a company in Orange County, first as...
This code creates the callout as it appears in my Disney photoblogging post below.
For those who are interested in implementing this style, I hope you find this useful.
Nice bit of code, Dale. Works in Blogger just fine. Thanks for the tip. It came up at just the right time; I’ve set up a new look at BitsBlog, and added the code in. I’ll need to touch up the colors a bit, but it works just fine otherwise.
Gotta tell ya; One of the concerns I have for this is how the various RSS feeds... Atom, etc, will react when they run across such insets. So far, I’m not seeing anything weird, so I’m encouraged, but I’ve only checked the Bloglines feed, so far. I’ll be interested to see what Feedburner does with it, for example.
My feed, once it makes it to your site, is formatted correctly... right down to the pull box being in the right place. Bloglines, wich also feed from that feedburner feed, screws it up.
Understand; Initially I thought the RSS feed at Feedburner was the issue, since it was simply putting the pull inline, instead of hiding it or formatting it. My point was I was wrong, there.... the call is obviously making it through the RSS feed to your server. (Actually, I’m a little suprised that it does make it through the RSS pipe.) So, Feedburner isn’t the issue... it’s what Bloglines is doing with the feed that’s the causing issue I found.
