Saturday, November 04, 2006

Breakin' Out

Those boxes publishers stick in long magazine articles with catchy sentences to make you read it,
And then my leg fell off!
I've heard, are called "breakouts." Those boxes are easy to display with CSS, rather than creating an image with the text in it. It's really only a div element that has its own margins, padding, background, text, and font properties. It can float right or left or take up the whole column (for those articles with thin columns).

In your CSS document, create an entry something like the following:
#breakout_left{
width:200px;
text-align:left;
font-size:14pt;
font-weight:bold;
line-height:1em;
background:#cccccc;
float:left;
margin-right:20px;
margin-top:20px;
margin-bottom:20px;
padding: 10px 10px 10px 10px;
}
This defines the div element as a section that will expand vertically (down) and have the properties you give it. If you don't like the background color, change it. If the font is too big, just make it smaller. Anything can be adjusted in the breakout this way; if one were just to create an image to display, there would not be nearly this much flexibility. With Blogger, you must use the "Edit HTML" mode:


Just create a div element such as the following:
<div id="breakout_left">Some text in the breakout!</div>
and it will follow the styles set in your style sheet. For those of you who know CSS, this is a simple concept. I don't claim to know CSS (I get very tired at browser compatibility) but when I was approached with this "breakout" task I knew just what to do. I hate images. Google doesn't index the
If the font is too big, just make it smaller.
text inside an image (yet). It's better to have the site more dynamic anyway, and accessible to programatic alteration.

If we changed this site to include DHTML or even AJAX later, it would be easier to change these breakouts with easy commands rather than manual manipulation. This is the way of the web. Tutorials on CSS are available here, here, and here. More available through Google.

No comments: