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.
Save the code in Example 1 as box1test.php.
Example 1. 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 as box1.php.
Example 2. 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.
Running
Navigate your browser to the box1test.php script. You will see something like Figure 2
Figure 2. 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.
Starting
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 3 as box2test.php.
Example 3. 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 4 as box2.php.
Example 4. 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> </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 3
Figure 3. 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.
2 komentar:
Hi,
What about a simple grid or a table. How Do I make one of those please?
One that you can put some text in each line of the grid and insert some little icons as well etc..
further eg.. a table that has say 14 lines to it and maybe 4 columns, something like that, PHP code to put it in a wordpress site.
thanks
Russ
I have to say that the information here was the most complete that I found anywhere. I am definitely bookmarking this to come back and read later. Thanks for sharing this useful code with us.
PHP Programming Company India
Post a Comment