FFF updates while fighting off the effects of a Turkey Coma.

By: Chris Murphy

For those you you who may have been peeking in now and then around here, you may have noticed a few subtle updates to the site. Some are far more subtle, and less likely to be noticed; however, the updates that I have been mentioning are slowly beginning to appear.

For the most part, the updates on farfrofmearless.com are graphical — the most obvious ones being my mug shot replacing my faithful cat’s place holder image — while others are the result of much needed refactoring of code. I’ve also implemented the Flickr stream I’ve been meaning to get around to for months now. In any event, I thought I’d take a moment here to highlight one of the more significant bits of mark-up that I refactored: the rounded-corner boxes you see to the right of the layout.

The original incarnation of the boxes used mark-up that while structurally valid, was fairly complex. It seemed to render well on newer browsers, but fell apart on older browsers and appeared to be a hog to render.

This was the original mark-up and CSS required to render it:

<!-- set box -->
<div id="box-test">
	<div class="box">
		<div class="box-top">
			<div class="box-top-right">
				<div class="box-top-body"><h3 class="title">Search</h3></div>
			</div>
		</div>
		<div class="box-body">
			<p>Content goes here...</p>
		</div>
		<div class="box-bottom">
			<div class="box-bottom-right">
				<div class="box-bottom-body"></div>
			</div>
		</div>
	</div>
</div>
<!-- end box -->

/* Box Class
---------------------------------------------------------- */

.box {
	/* testing
	border: 1px dotted pink;*/
}

.box .title {
	margin: 7px 0 0 0; padding: 0;
	height: 30px;
	font-family: 'Tahoma', Lucida Grande, Verdana, Aria, Sans-Serif;
	font-size: .9em;
	color: #ffffff;
	/*text-indent: -9999px;
	 testing
	border: 1px dotted pink; */
}

.box-top {
	display: block;
	margin: 0; padding: 0;
	width: 100%; height: 30px;
	background: transparent url(../lemon_twist/images/box_top_left.png) no-repeat top left;
	/* testing
	border: 1px dotted pink; */
}

.box-top-right {
	display: block; float: right;
	margin: 0; padding: 0;
	width: 100%; height: 30px;
	background: transparent url(../lemon_twist/images/box_top_right.png) no-repeat top right;
	/* testing
	border: 1px dotted blue; */
}

.box-top-body {
	display: block; float: left;
	margin: 0 0 0 32px; padding: 0;
	width: 85%; height: 30px;
	background: transparent url(../lemon_twist/images/box_top_body.png) repeat-x top right;

	/* testing
	border: 1px dotted blue; */
}

.box-body {
	margin: 0; padding: 20px 20px 0 20px;
	background-color: #688a02;
	color: #ffffff;
	/* testing
	border: 1px dotted blue; */
}

.box-bottom {
	display: block;
	margin: 0 0 10px 0; padding: 0;
	width: 100%; height: 20px;
	background: transparent url(../lemon_twist/images/box_bottom_left.png) no-repeat bottom left;
	/* testing
	border: 1px dotted blue; */
}

.box-bottom-right {
	display: block; float: right;
	margin: 0; padding: 0;
	width: 100%; height: 20px;
	background: transparent url(../lemon_twist/images/box_bottom_right.png) no-repeat bottom right;
	/* testing
	border: 1px dotted blue; */
}

.box-bottom-body {
	display: block; float: left;
	margin: 0 0 0 20px; padding: 0;
	width: 85%; height: 20px;
	background: transparent url(../lemon_twist/images/box_bottom_body.png) repeat-x bottom right;

	/* testing
	border: 1px dotted blue; */
}

Seem a little on the excessive side? I thought so after revisiting this particular issue recently. This approach wasn’t terrible; it just wasn’t extensible and required more mark-up on page than I really cared for. My approach above required that I utilize multiple image sets for different column widths in my layout. Exporting and keeping track of those images was a small chore, and I really wanted to come up with something that was both low-maintenance and low-overhead.

I refactored both the markup and the CSS as follows:

<!-- set search -->
<div id="search" class="box">
	<div class="one-col box-top"><h3 class="box-title">Search</h3></div>

	<div class="one-col box-body">
		<p>Cotent goes here...</p>
	</div>

	<div class="one-col box-bottom"></div>
</div>
<!-- end search -->

/* Box Class
---------------------------------------------------------- */
.box {
	/* testing
	border: 1px dotted pink;*/
}

.box-title {
	margin: 0; padding: 8px 0 0 30px;
	font-family: 'Tahoma',Lucida Grande,Verdana,Aria,Sans-Serif;
	font-size: .9em;
	color: #ffffff;
	/*text-indent: -9999px;
	 testing
	border: 1px dotted pink; */
}

.box-top {
	display: block;
	margin: 0; padding: 0;
	width: 100%; height: 30px;
	/* testing
	border: 1px dotted pink; */
}

.box-body {
	margin: 0; padding: 1px 0 0 0;
	background-color: #688a02;
	color: #ffffff;
	/* testing
	margin: 0; padding: 20px 20px 0 20px;
	border: 1px dotted blue; */
}

.box-bottom {
	display: block;
	margin: 0 0 10px 0; padding: 0;
	width: 100%; height: 20px;
	/* testing
	border: 1px dotted blue; */
}

.one-col.box-top {
	background: transparent url("images/1col_box_top.png") no-repeat top left;
}

.two-col.box-top {
	background: transparent url("images/2col_box_top.png") no-repeat top left;
}

.three-col.box-top {
	background: transparent url("images/3col_box_top.png") no-repeat top left;
}

.one-col.box-bottom {
	background: transparent url("images/1col_box_bottom.png") no-repeat top left;
}

.two-col.box-bottom {
	background: transparent url("images/2col_box_bottom.png") no-repeat top left;
}

.three-col.box-bottom {
	background: transparent url("images/3col_box_bottom.png") no-repeat top left;
}

With the above approach, I significantly reduced the amount of code needed to display multiple boxes, as well as reducing the complexity of the CSS rules needed to render the boxes. As a further benefit to this second approach, I am also able to render the boxes at multiple widths based on my current layout, and reduce the number of graphics required for each part of the box.

There are a few caveats to this approach; the most significant being that the images required for the different columns are dependent on the layout. Most of the rounded-corner examples I’ve come across have been able to scale dynamically — a great benefit, but one that I decided to sacrifice in favour of a light-weight implementation.

While I have no interest in going into a debate over which approach is better — I will say that, this approach worked for this layout and design.

Playing mp3 file metallica mp3 (by WinAmp Windows WordPress Plugin)

• Posted: October 8, 2007
• Comments: (4)
• Permalink
• Follow This Post: RSS 2.0