HTML Boxes

calendar October 2, 2009

Sometimes it’s useful to put your page content into boxes to make it easier for users to navigate your site.

Code:

<?php
 function boxStyles()
 {
?>
 <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:#fff;
   background:#777;
   padding:5px;
   text-align:center;
 }
 .box-content
 {
   background:#fff;
   padding:5px;
 }
 </style>
<?php
 }
 function start_box($title)
 {
?>
   <table class="box">
   <tr>
   <td class="box-title"><?=$title?></td>
   </tr>
   <tr>
   <td class="box-content">
<?php
 }
 function end_box()
 {
?>
   </td>
   </tr>
   </table>
<?php
 }
?>
<html>
 <head>
 <title>Html Boxes</title>
 <?php boxStyles(); ?>
 </head>
 <body>
 <div style="width:300px;">
 <?php start_box("Greece"); ?>
 Greece was the first area in Europe where advanced early civilizations emerged,
 beginning with the Minoan civilization in Crete
 and then the Mycenean civilization on the mainland...
 <?php end_box(); ?>
 </div>
 </body>
 </html>

Note: if you want several different colors of boxes you can create different CSS classes for the colors.

admin PHP

Leave a Reply

You must be logged in to post a comment.