PHP Array to breadcrumb UL list

Breadcrumb is navigation aid used in user interfaces. It gives users a way to keep track of their locations within programs or documents.

A good breadcrumb navigation should be build with UL dan LI tag this is good for SEO tweak.

Breadcrumb structure

Breadcrumb structure

Below is the implementation in PHP scripting language, i made as a function so you can use this easily

/**
* Creates recursively a nested HTML UL of array keys.
* @param array $array Array
* @return string Nested UL string
*/
function array2breadcrumb($array=array(),&$depth=0) {
$depth++; //echo $depth.' ';
$recursion=__FUNCTION__;
if (empty($array)) return '';
$out=($depth==1)?('<ul id="breadcrumb">'):('<ul>')."\n";
if (is_array($array))
foreach ($array as $key => $elem){
$arr = explode('|',$key); //echo $label;
if (!isset($arr[1]))
$uri = ''.$arr[0].'';
else
$uri = anchor($arr[0], $arr[1], 'title="'.$arr[1].'"');
if ($uri=='0') $uri='';
$out .= '<li>'.$uri.$recursion($elem,$depth).'</li>'."\n";
}
else
return $array;
$out .= '</ul>'."\n";
return $out;
}

$array = array('/parent|Parent page'=>array('/parent/sub|Sub page'=>array('Page detail')));
echo array2breadcrumb($array);

Ok, that’s all .. happy coding :)

Fixing IE’s image gap

This IE bug happed typicaly if you use a XTML Transitional doc type

doctype is: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

The problem sometime like this :

The images have a 1px border that render ok in the compliant browsers but IE6 leaves a small gap between the bottom of the graphic and the border leaving me with white space.

an this is an IE bug!,

The solution :

Add a CSS rule to set the image in display:block like this

#header img {padding:0; margin:0; display:block; }

Goodluck! :)