This is the working story of how I got the funky boxes on the left and right of the post to show up. When I perfect the technique, you'll see this sort of thing all over the internet. Callouts, man, it's the wave of the future. I be even magazines and stuff will have them. What got me thinking about callouts in the first place was how I wanted a distinctive look. That, and I love stealing code from people, then finding out it doesn't work, then have to reinvent the wheel, if you wheel, then as I'm finishing up, find it explained simply somewhere else. I love frustration. Mainly I was (and am) looking for a way to make things look like I want them to look. The easiest thing to do would be to create a graphic with the text I want in the look I want. That's what Apple does, and if it's good enough for them, it should be good enough for me, too, right?

Callouts, man, it's the wave of the future.

Well, for any sane person, yes. But, as I'll establish, I am not a sane person. I have needs; needs I can only fill with endless tinkering with CSS, late at night. Yeah, I'm disturbed. The most annoying thing is how this will only work in good browsers (read anything not Internet Explorer). I'm not even sure I should worry about making it work anymore. IE is the devil, and anyone still using it deserves all the bad they get. Internet Explorer is the modern bane of the CSS designer; it causes more problems than it solves. That, and you've got the problems inherent in the actual coding for good browsers. Luckily, I use Safari, and I'm the only one who reads any of this stuff, so we're all good, right? The biggest problem now is getting the width of the boxes to stay the same. Luckily, a simple width: 130px; selector finishes that off. Then you clean up the borders, margins, and padding, and you're done. However, as I was thinking I had everything fixed, I ran into another problem, the drop-cap. I'm using a drop cap technique called first-letter. It's commonly referred to as a "Pseudo-Element" Selector, but you don't need to know that, it won't be on the quiz. All you need to know is that by doing that, you get "magazine-style" callouts. That, dear Apple.com, is what I was trying to get. Here's the CSS used for me, here:

div.entry-content blockquote.call-left { font: 16px/1.2 "Times New Roman", Times, serif; float: left; margin-right: 0.9em; background: white; border: solid 3px black; padding: 0 0.5em; width: 135px; text-align: left; } div.entry-content blockquote.call-right { font: 16px/1.2 "Times New Roman", Times, serif; float: right; margin-left: 0.9em; background: white; border: solid 3px black; padding: 0 0.5em; width: 135px; text-align: left; } blockquote.call-left:first-letter, blockquote.call-right:first-letter { font: 400% "Times New Roman", Times, serif; float: left; padding-top: 0; margin-top: 0; line-height: 48px; } .dropcap { float: left; font: 60pt/0.8em Helvetica, Verdana, Arial, sans-serif; color: black; margin-right: 3px; }

Or just get the file here: callouts.css (right-click, save as) Now, you're probably wondering why I use em in there, and px everywhere else on the site. Anywhere I've mangled the CSS, I've taken out the stolen em and replaced it with px - but not here. Quite simply, it's because I don't need another thing complicated matters. For some, unknown reason, IE likes em better. Sometimes. That's why it's in there. And I forgot to take it out.

The folks I steal copy are smart about burying their code so that it works nested.

Also notice that I left the CSS selectors in human readable format. There's nothing more confusing than trying to figure out what I did to get that to go where I wanted when and where. That goes for anything you put in any kind of coding; it doesn't matter how wonderful and smart your code is, if nobody knows how to use it. There's also a structure to it all. The folks I steal copy are smart about burying their code so that it works nested. If you look at it from a purely textual basis, the blockquote that is call-left or call-right inside the DIV that is named itemtext2 has these properties, and the first-letter of the blockquote has these properties. So, that means...er...not much to you. All you care about is that it looks like the little box thing is on one side of the picture or the other, and there's enough whitespace to be readable, and nobody plagiarized anything. Now, I know a thing or three about page-layout. You want to balance your images so that your eye isn't drawn to one side or the other willy-nilly. I got a B in a photography class because I "trapped some whitespace." As your story gets longer, you want to space out your gimmicky elements. Even now, I keep moving the blockquotes on the page to balance the story. They are graphic elements that are more for show than for content.

status: published
lastmod: '2006-10-14T03:51:36.000Z'
author: John Stansbury
cms: wordpress
custom:
  podPressPostSpecific: 'a:6:{s:15:"itunes:subtitle";s:15:"##PostExcerpt##";s:14:"itunes:summary";s:15:"##PostExcerpt##";s:15:"itunes:keywords";s:17:"##WordPressCats##";s:13:"itunes:author";s:10:"##Global##";s:15:"itunes:explicit";s:7:"Default";s:12:"itunes:block";s:7:"Default";}'
  _utw_tags_0: 'a:5:{i:0;O:8:"stdClass":1:{s:3:"tag";s:3:"css";}i:1;O:8:"stdClass":1:{s:3:"tag";s:6:"design";}i:2;O:8:"stdClass":1:{s:3:"tag";s:5:"howto";}i:3;O:8:"stdClass":1:{s:3:"tag";s:2:"k2";}i:4;O:8:"stdClass":1:{s:3:"tag";s:6:"update";}}'
  similarterms: left thing blockquote callouts times good font code first-letter width float call-left internet padding call-right black work smart roman serif