Hack 5. Create HTML Boxes

Use HTML and simple graphics to create attractive boxes for your web pages.

Sometimes it's useful to put your page content into boxes to make it easier for users to navigate your site. You can draw attention to a particular piece of content, create newspaper-like interfaces, or just go with a little cubism to impress your artsy friends. The scripts in this hack make it easy to draw boxes around any content you like.

2.4.1. The Code

Save the code in Example 2-5 as box1test.php.

Example 2-5. A test page for boxing up content

	<html>
	<head>
	<? include( "box1.php" );
	add_box_styles();
	?>
	</head>
	<body>
	<div style="width:200px;">
	<? start_box( "News" ); ?>
	Today's news is that there is no news. Which is probably a good thing since
	the news can be fairly distressing at times.<br/><br/>
	<a href="morenews.html">more…</a>
	<? end_box(); ?>
	</div>
	</body>
	</html>

For the PHP portion of the mini-application, save the code in Example 2-6 as box1.php.

Example 2-6. Adding a little PHP and CSS

	<?
	function add_box_styles() { ?>
	<style type="text/css">
	.box {
		font-family: arial, verdana, sans-serif;
		font-size: x-small;
		background: #ccc;
	}
	.box-title { 
		font-size: small; 
		font-weight: bold; 
		color: white; 
		background: #777; 
		padding: 5px; 
		text-align: center;
	}
	.box-content { 
		background: white; 
		padding: 5px;
	}
	</style>
	<? }

	function start_box( $name ) { ?>
	<table class="box" cellspacing="2" cellpadding="0">
	<tr><td class="box-title"><? print( $name ) ?></td></tr>
	<tr><td class="box-content">
	<? }
	
	function end_box() { ?>
	</td></tr></table>
	<? } ?>

More important than this particular set of CSS tags is the fact that you can easily customize the box to your liking, highlighting any portion of the box's content that you want. You can even combine this with user-selectable CSS [Hack #3], and let the user decide on his own box styles!

2.4.2. Running the Hack

Navigate your browser to the box1test.php script. You will see something like Figure 2-6.

Figure 2-6. The resulting HTML box

The news blurb is boxed up in a black-and-white box because that code is bracketed with the start_box and end_box calls. The title of the box is a parameter to the start_box function.

Hack 5. Create HTML Boxes
If you want several different colors of boxes, you can create different CSS classes for the colors. Or you can put style attributes on the table and td tags to override the color on a per-box basis.

2.4.3. Hacking the Hack

If you want something a little more attractive, you can create rounded boxes using a set of gif or png files. Start by saving the code in Example 2-7 as box2test.php.

Example 2-7. Sample HTML file providing a test bed for rounded rectangles

	<html>
	<head>
	<? include( "box2.php" );
	add_box_styles();
	?>
	</head>
	<body>
	<div style="width:200px;">
	<? start_box( "News" ); ?>	
	Today's news is that there is no news. Which is probably a good thing since 
	the news can be fairly distressing at times.<br/><br/> 
	<a href="morenews.html">more…</a>
	<? end_box(); ?>
	</div>
	</body>
	</html>

Then save the code in Example 2-8 as box2.php.

Example 2-8. Using images in addition to CSS to create fancier boxes

	<?
	function add_box_styles() { ?>
	<style type="text/css">
	.box {
		font-family: arial, verdana, sans-serif;
	} 
	.box-title {
		font-size: small;
		font-weight: bold;
		color: white;
		background: #000063;
		text-align: center;
	}
	.box-content-container {
		background: #000063; 
	}
	.box-content {
		background: white;
		font-size: x-small;
		padding: 5px;
	}
	</style>
	<? }

	function start_box( $name ) { ?>
	<table cellspacing="0" cellpadding="0" class="box">
	<tr><td>

	<table cellspacing="0" cellpadding="0" width="100%" class="box-title">
	<tr><td width="20" height="20"><img src="blue_ul.png" /></td>
	<td><? print( $name ) ?></td>
	<td width="20" height="20"><img src="blue_ur.png"></td></tr></table>

	</td></tr>
	<tr><td>

	<table width="100%" cellspacing="2" cellpadding="0" 
	class="box-content-container">
	<tr><td class="box-content">
	<? }

	function end_box() { ?>
	</td></tr></table>
	<tr><td>

	<table cellspacing="0" cellpadding="0" width="100%" class="box-title">
	<tr><td width="20" height="20"><img src="blue_ll.png" /></td>
	<td>&nbsp;</td>
	<td width="20" height="20"><img src="blue_lr.png"></td></tr></table>
	
	</td></tr></table>
	<? } ?>

With this new version of code on the server, navigate to the box2test.php script, and you should see something like Figure 2-7.

Figure 2-7. The same box, now with rounded borders created using PNG graphics

Now the png files sit in the corners of the box. The box is created using start_box and end_box, just as it was before. But the HTML code that creates the box is more complex; a set of three tables is nested within a main table. The first table creates the titlebar, the second holds the content, and the third is the border along the bottom.

The background colors of the borders should match the colors of the graphics exactly. If you want different colors, you will need a different CSS and another set of graphics files.

Hack 5. Create HTML Boxes
The graphic files are available on the O'Reilly book site (http://www.oreilly.com/catalog/phphks) along with the code. The graphics were created with Macromedia Fireworks. Adobe Photoshop would work as well, of course.

2.4.4. See Also

"Add Tabs to Your Web Interface" [Hack #6]

Table of Contents