Sunday, August 28, 2011

Function to Convert CSV to Array using PHP

Processing CSV file for web projects is very usefull to show CSV Upload list, Upload data to database table, processing bulk posting etc., Here is the function to process CSV file, using this function we can convert our CSV file to PHP Mufti dimensional Array

 

PHP function to check valid email address and TLD

Validating email is mandatory process to maintain quality email database of website visitors. But cetertain situation we need to accept simple validating for E-mail Address using @ and . or validating using Regular expression may accept unknown domain TLDs, Here is my solution to avoid E-mail address certain range of TLDs.

Saturday, August 27, 2011

Create drop shadow with css without images

With CSS we can create : Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances. you can use this technique for your HTML objects


CSS Drop Shadow


Lifted corners
Curled corners
Perspective
Raised box
Single vertical curve
Vertical curves
Single horizontal curve
Horizontal curves
Rotated box

Browser Support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+


Download This Script     View Live Demo for CSS Drop Shadow

Friday, August 26, 2011

Newsletter Script with Simple Captcha using PHP

In previous Post We seen how to create a Simple capcha. Now we look how to integrate that simple Captcha with HTML Form. Now I am going to show you a Newsletter Subscriber with our Simple Captcha.

Kindly view  How to Create a Simple Captcha in PHP before the Newsletter Integration of this Capcha

Let me create a HTML form look like this
 

Develop a Simple Anti spam Captcha in PHP with Custom Font


When working with web forms on web development.  Preventing spam is important process. But most of the developers are feel Captcha is very big process, nothing like that.
Here is the very simple Captcha developed in PHP with custom font rendering option. You can change the look and feel based on your project need.

Let us see how to create this Capcha in PHP:


Now I am going to generate a 4 Digit Random number and than store into session variable using ($_SESSION). Based on the 4 Digit Random number I will generate a simple capcha with the custom font feedbackbb.ttf.




Wednesday, August 24, 2011

Function to Convert RSS to Array using PHP from RSS URL

Working with RSS feed is more usefull to promote your website as well as you can get relevant content for your website from another website using RSS Feed, Let us write a code  how to to get RSS feed content from RSS URL.
 

Tuesday, August 23, 2011

Create Pie Chart using PHP

Using PHP GD Library we can create Pie Chart with  imagefilledarc  function, Let us create a Simple Pie Chart with this function and we will look how to work with pie chart in dynamic content. in future.


Create Pie Chart in PHP

<?php
 
// create image with 320x320
  wit$image = imagecreatetruecolor(320, 320);
 
// create Color Schemes for Pie Chart
$black= imagecolorallocate($image, 0,0,0);
imagecolortransparent( $image, $black );

$gray     = imagecolorallocate($image, 0xC0, 0xC0, 0xC0);
$darkgray = imagecolorallocate($image, 0x90, 0x90, 0x90);
$navy     = imagecolorallocate($image, 0x00, 0x00, 0x80);
$darknavy = imagecolorallocate($image, 0x00, 0x00, 0x50);
$red      = imagecolorallocate($image, 0xFF, 0x00, 0x00);
$darkred  = imagecolorallocate($image, 0x90, 0x00, 0x00);
 
// Make look of 3D effect with 10 degree angular
for ($i = 180; $i > 160; $i--) {
   imagefilledarc($image, 160, $i, 300, 160, 0, 135, $darknavy, IMG_ARC_PIE);
   imagefilledarc($image, 160, $i, 300, 160, 135, 225 , $darkgray, IMG_ARC_PIE);
   imagefilledarc($image, 160, $i, 300, 160, 225, 360 , $darkred, IMG_ARC_PIE);
}
 
imagefilledarc($image, 160, 160, 300, 160, 0, 135, $navy, IMG_ARC_PIE);
imagefilledarc($image, 160, 160, 300, 160, 135, 225 , $gray, IMG_ARC_PIE);
imagefilledarc($image, 160, 160, 300, 160, 225, 360 , $red, IMG_ARC_PIE);
 
// output image to browser
header('Content-type: image/png');
imagepng($image);
imagedestroy($image);
?>



Create SEO Friendly Page or Slug URL using PHP

Creating Search Engine Friendly  page URL from your Page Title / heading will very helpful to generate a Highly optimized keyword rich URLs for your Website,  Here is the function to get the Search Engine Friendly SEO Friendly Page URL from given string. while you are generating Dynamic content.


<?php

$PageTitle="<h1>Education 's and Cultural <pre>Programs\" for <br> schools! and colleges!  (2010-11)</h1>";

// @ Desc: Prepare SEO Friendly URL 
// @ Parm: String with Mixed with tags and special characters 
// @ Return: SEO Frinedly URL out by replacing spaces and special characters with Hyphen(-)
function prepare_seo_friendly_url($string)
{
	// Remove HTML Tags if found
	$string=strip_tags($string);
	// Replace special characters with white space
	$string=preg_replace('/[^A-Za-z0-9-]+/', ' ', $string);
	// Trim White Spaces and both sides
	$string=trim($string);
	// Replace whitespaces with Hyphen (-) 
	$string=preg_replace('/[^A-Za-z0-9-]+/','-', $string);	
	// Conver final string to lowercase
	$slug=strtolower($string);
	return $slug;
}

// Example Output:
echo prepare_seo_friendly_url($PageTitle);

// Output:
// education-and-cultural-programs-for-schools-and-colleges-2010-11
?>

Saturday, August 20, 2011

PHP Function to Get Alexa Traffic Rank



To get the Alexa Traffic Rank is very informative to show in your Back office Interface or Admin Panel dashboard to know website traffic details instantly. Most of the clients are request to show Alexa Rank on Admin Panel here is the Script to get Alexa Traffic Rank.

Function to get Alexa Rank.

<?php

function alexaRank($domain){
    $remote_url = 'http://data.alexa.com/data?cli=10&dat=snbamz&url='.trim($domain);
    $search_for = '<POPULARITY URL';
 $part = NULL;
    if ($handle = @fopen($remote_url, "r")) {
        while (!feof($handle)) {
            $part .= fread($handle, 100);
            $pos = strpos($part, $search_for);
            if ($pos === false)
            continue;
            else
            break;
        }
        $part .= fread($handle, 100);
        fclose($handle);
    }
    $str = explode($search_for, $part);
    $str = @array_shift(explode('" SOURCE="panel"/>', $str[1]));
    $str = explode('TEXT="', $str);

    return $str[1];
}


echo alexaRank("google.co.in");

?>


Thursday, August 18, 2011

Create Dynamic Bar Chart in PHP

Using PHP GD Library Functions. we can create Bar chart in php with dynamic data,
here is my SimpleBar Chart class to create a dynamic bar chart for your projects. you can easily add any number of columns and values also you can change your color scheme on base class.

Sample Bar Chart Using SimpleBar.class.php

Wednesday, August 17, 2011

Create Thumbnail on Fly with Data URI in PHP

Thumbnail on fly is very useful trick to reduce page load also gain page loading speed when loading a page from server. But Thumbnail is also stored as a Image file and retrieved from server with http request. If your website getting high volume traffic you need to consider http request by reducing number of Request. Now days the Modern browsers support Image Data URI. data URIs have now been implemented in most browsers.


Here is the Function to Generate Thumbnail on Fly with Data URI

<?php
// Funtion to prepare Data URI:
// @ parm: Image filepath, Image Size
// reutn : data_uri string
function thumbnail_data_uri($filename,$width=0,$height=0) 
{
 
 // Get Image Header Type
      $image_info = getimagesize($filename);
      $image_type = $image_info[2];

 // Check the Size is Specified
 if($width!=0 and $height!=0)
 {
      if( $image_type == IMAGETYPE_JPEG ) {
         $image = imagecreatefromjpeg($filename);
      } elseif( $image_type == IMAGETYPE_GIF ) {
         $image = imagecreatefromgif($filename);
      } elseif( $image_type == IMAGETYPE_PNG ) {
         $image = imagecreatefrompng($filename);
   imagealphablending($image, true);

      } 

 $new_image = imagecreatetruecolor($width, $height);
 imagealphablending($new_image, false);
 imagesavealpha($new_image, true);     
      imagecopyresampled($new_image, $image, 0, 0, 0, 0, $width, $height, imagesx($image),imagesy($image));
      $image = $new_image; 
   
 ob_start();
      if( $image_type == IMAGETYPE_JPEG ) {
         imagejpeg($image);
      } elseif( $image_type == IMAGETYPE_GIF ) {
         imagegif($image);         
      } elseif( $image_type == IMAGETYPE_PNG ) {
         imagepng($image);
      } 
 $content=ob_get_clean();   
   
   
 }else
 $content=file_get_contents($filename,true);
 
 
 
 $base64 = base64_encode($content); 
 return "data:$image_type;base64,$base64";
}

?>
<img src="<?php echo thumbnail_data_uri('images/sample.png',200,200);?>" alt="An Earth">
<img src="<?php echo thumbnail_data_uri('images/sample.png',100,100);?>" alt="An Earth">
<img src="<?php echo thumbnail_data_uri('images/sample.png',150,150);?>" alt="An Earth">

<img src="<?php echo thumbnail_data_uri('images/sample.png',100,100);?>" alt="An Earth">
Data URI Advantages

  • HTTP request and header traffic is not required for embedded data, so data URIs consume less bandwidth whenever the overhead of encoding the inline content as a data URI is smaller than the HTTP overhead. For example, the required base64 encoding for an image 600 bytes long would be 800 bytes, so if an HTTP request required more than 200 bytes of overhead, the data URI would be more efficient
  • For transferring many small files (less than a few kilobytes each), this can be faster. TCP transfers tend to start slowly. If each file requires a new TCP connection, the transfer speed is limited by the round-trip time rather than the available bandwidth. Using HTTP keep-alive improves the situation, but may not entirely alleviate the bottleneck.
  •  When browsing a secure HTTPS web site, web browsers commonly require that all elements of a web page be downloaded over secure connections, or the user will be notified of reduced security due to a mixture of secure and insecure elements. On badly configured servers, HTTPS requests have significant overhead over common HTTP requests, so embedding data in data URIs may improve speed in this case.
  • Web browsers are usually configured to make only a certain number (often two) of concurrent HTTP connections to a domain,[6] so inline data frees up a download connection for other content.
  • Environments with limited or restricted access to external resources may embed content when it is disallowed or impractical to reference it externally. For example, an advanced HTML editing field could accept a pasted or inserted image and convert it to a data URI to hide the complexity of external resources from the user. Alternatively, a browser can convert (encode) image based data from the clipboard to a data URI and paste it in a HTML editing field. Mozilla Firefox 4 supports this functionality.
  • It is possible to manage a multimedia page as a single file.
  • Email message templates can contain images (for backgrounds or signatures) without the image appearing to be an "attachment".
  • Data URIs make it more difficult for security software to filter content

Preserve PNG Transparency when resizing image in PHP


For Image manipulation PHP offers variety of functions. When working the Image processing in live projects, thumbnail of fly. Image Resize is often used by us.  Working thumbnails and resize process. The Image Format such JPEG is not a problem but working with PNG, GIF Images with Transparency it creates a block overlay on alpha channel. Here is my solution to resolve this Issue of Alpha fixes.


<?php
header('Content-Type: image/png');
// Set New widht and height of the Image
$newwidth=200;
$newheight=200;

// Create place holder for new size
$new_image = imagecreatetruecolor($newwidth, $newheight);
// Apply aplha bleding and alpha save
imagealphablending($new_image, false);
imagesavealpha($new_image, true);  

// Load Original PNG Image
$source = imagecreatefrompng("sample.png");
// Apply Alpha Blending
imagealphablending($source, true);
// Copy Source image to New Image
imagecopyresampled($new_image, $source, 0, 0, 0, 0, $newwidth, $newheight, imagesx($source), imagesy($source));
// Out put the new resized image with Transparency.
imagepng($new_image);
?>


Tuesday, August 16, 2011

Check Valid Domain Name and Valid TLD in PHP

Check the domain name is valid Domain Name and Domain extension is valid TLD.  When working this task I want to find the solution to check the domain name is valid TLD and the valid domain name. with the power of Regular Expression. Here is the solution to check the given domain name is valid TLD and valid name.

Following function will full fill the following needs:
  • Domain Name Must contain Alpha Numeric 
  • Only special character (-) hyphen. is allowed on domain names.
  • Check the generic domain extension (.com, .edu, .gov, .int, .mil, .net, and .org)
  • All International domain extensions (TLDs) approved by ICANN

valid-domain-name.php
<?php

// @ Desc: Function to check the Given Domain Name is Valid Domain Name and Valid TLD
// @ Parm: domain name : eg: example.com
// @ Return: 0 or 1 (for Valid Domain Name)
function is_valid_domain_extension($domain)
{
	return preg_match('/^([a-z0-9]([-a-z0-9]*[a-z0-9])?\\.)+((a[cdefgilmnoqrstuwxz]|aero|arpa)|(b[abdefghijmnorstvwyz]|biz)|(c[acdfghiklmnorsuvxyz]|cat|com|coop)|d[ejkmoz]|(e[ceghrstu]|edu)|f[ijkmor]|(g[abdefghilmnpqrstuwy]|gov)|h[kmnrtu]|(i[delmnoqrst]|info|int)|(j[emop]|jobs)|k[eghimnprwyz]|l[abcikrstuvy]|(m[acdghklmnopqrstuvwxyz]|mil|mobi|museum)|(n[acefgilopruz]|name|net)|(om|org)|(p[aefghklmnrstwy]|pro)|qa|r[eouw]|s[abcdeghijklmnortvyz]|(t[cdfghjklmnoprtvwz]|travel)|u[agkmsyz]|v[aceginu]|w[fs]|y[etu]|z[amw])$/i',$domain);
}

// Example example.mz 
// .MZ the domain for Republic of Mozambique
// I aware of the Region when I am working for this function.
echo is_valid_domain_extension("example.mz"); // 

?>

Monday, August 15, 2011

Connect Multiple MySQL Database in PHP

If your website move on to a traffic worthy website. you need to work with multiple database for load balancing and overhead distribution. So we need to work with multiple database on single project. MySQL and PHP provide some efficient logic to handle multiple database on single project. Let us see how to work with Multiple database in efficient way.



Example Project working with Multiple Database.

include/connectdb.php

<?php
// Define Connection Details
define(DB_SERVER,"localhost");
define(DB_USER,"root");
define(DB_PASSWORD,"");

// Define Database Names and Table Names
define(DB_CUSTOMER,"w3lessons_customer_db");
define(DB_SERVICE,"w3lessons_service_db");

// Define Table Name prefix with database name
// For Customer Table
define(TBL_CUSTOMER,DB_CUSTOMER.".tbl_customers");
// For Service Table
define(TBL_SERVICE,DB_SERVICE.".tbl_services");

// Connect MySQL Server
$conn=mysql_connect(DB_SERVER,DB_USER,DB_PASSWORD);
?>

index.php

<?php
include("include/connectdb.php");

if(isset($_POST['customer_id']) and $_POST['customer_id']!="")
{
	$sql="select * from ".TBL_CUSTOMER." where customer_id='{$_POST['customer_id']}'";
	$result=mysql_query($sql);
	$row=mysql_fetch_array($result);

//	$customer_id=$row['customer_id'];
//	$email_id=$row['email_id'];
//	$service_id=$row['service_id'];
// Instead of above three lines we can use	
	extract($row);
}
?>
<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Working with Multiple Database :Service Update</title>
<style type="text/css">

<!--
body,td,th {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: #000;
	font-weight: bold;
}
body {
	margin-left: 10px;
	margin-top: 10px;
}
-->
</style></head>

<body>
<form action="<?=$_SERVER['PHP_SELF']?>" method="post" id="thisForm">

<table border="0" cellspacing="0" cellpadding="7" style="border:1px solid #999;">
  <tr>
    <td colspan="2" bgcolor="#D6D6D6">Customer Service Update Sheet</td>

    </tr>
  <tr>
    <td>Customer Name</td>
    <td><select name="customer_id" id="customer_id" onchange="javascript:document.getElementById('thisForm').submit()">

      <option value="">Select Customer</option>
      <?php
	// Load Service Names from Customer DB
	$sql="select * from ".TBL_CUSTOMER;
	$result=mysql_query($sql);
	while($row=mysql_fetch_array($result))
	{
		if($row['customer_id']==$customer_id)
		echo '<option value="'.$row['customer_id'].'" selected="selected">'.$row['customer_name'].'</option>';
		else		
		echo '<option value="'.$row['customer_id'].'">'.$row['customer_name'].'</option>';
	}							  
	?>

    </select></td>
    </tr>
  <tr>
    <td>Customer Email ID</td>
    <td><input name="email_id" type="text" id="email_id" value="<?=@$email_id?>" /></td>

    </tr>
  <tr>
    <td>Service Requirement</td>
    <td>
      <select name="select" id="select">

        <?php
	// Load Service Names from Service DB
	$sql="select * from ".TBL_SERVICE;
	$result=mysql_query($sql);
	while($row=mysql_fetch_array($result))
	{
		if($row['service_id']==$service_id)
		echo '<option value="'.$row['service_id'].'" selected="selected">'.$row['service_name'].'</option>';
		else
		echo '<option value="'.$row['service_id'].'">'.$row['service_name'].'</option>';
	}							  
	?>

        </select>
    </td>
    </tr>
  </table>
<br />
<br />
<a href="http://www.w3lessons.com/">View Article for Working with Multiple Database</a>

</form>
</body>
</html>

Output:






Download This Script     Download Script

Sunday, August 14, 2011

Function to Calculate PHP Script Execution Time

PHP Script execution time response is important for quick responsive script, we can able to measure our script execution time with the following script. based on this we can optimize our Script Efficiency








<?php
function process_microtime ()
{
    list ($msec, $sec) = explode(' ', microtime());
    $microtime = (float)$msec + (float)$sec;
    return $microtime;
}

$start=process_microtime ();

// Your PHP Code Block and Process
sleep(1);

echo "<br/>";
$end = process_microtime();
// Print results.
echo 'Script Execution Time: <b>' . round($end - $start, 3) . '</b> seconds';   

?>

Regular Expressions in PHP for From Validation

As you working in any project regular expressions are very usefull to Form Validation,
here is some of Regular expression which is frequently used for form validation:

  • Email Validation
  • Mobile/Phone Number validation
  • Strong Password validation
  • IP Address Validation
  • Uploaded Image File Validation

<?php

// Valid Email Address Number or Not

	$email="master@example.com";
	if(preg_match('/([\w-\.]+)@((?:[\w]+\.)+)([a-zA-Z]{2,4})/',$email))
	{
		echo "<br>Valid Email Address";
	}else
	{
		echo "<br>Invalid ";
	}
	
// Valid Phone Number or Not

	$phone="434-333-4454";
	if(preg_match('/[(]?\d{3}[)]?\s?-?\s?\d{3}\s?-?\s?\d{4}/',$phone))
	{
		echo "<br>Valid Phone Number";
	}else
	{
		echo "<br>Invalid Phone Number";
	}
	

// Valid Strong Password or Not (Check password with Digits Caps Small Letters symols )

	$password="A4z#s3";
	if(preg_match('/(?!^[0-9]*$)(?!^[a-zA-Z!@#$%^&amp;*()_+=<&gt;?]*$)^([a-zA-Z!@#$%^&amp;*()_+=<&gt;?0-9]{6,15})$/',$password))
	{
		echo "<br>Strong Password";
	}else
	{
		echo "<br>Weak Password";
	}
	

// Valid IPv4 Address or Not 0.0.0.0 to 255.255.255.255

	$ipaddress="128.222.234.182";
	if(preg_match('/\b[12]{1}(?(?<=2)[0-5]|[0-9])?(?(?<=25)[0-5]|[0-9])?\.[12]?(?(?<=2)[0-5]|[0-9])?(?(?<=25)[0-5]|[0-9])?\.[12]?(?(?<=2)[0-5]|[0-9])?(?(?<=25)[0-5]|[0-9])?\.[12]{1}(?(?<=2)[0-5]|[0-9])?(?(?<=25)[0-5]|[0-9])?\b/',$ipaddress))
	{
		echo "<br>Valid IP Address";
	}else
	{
		echo "<br>Invalid IP Address";
	}

// Valid Image or Not (jpg|gif|png)

	$imagefile="mypicture.jpg";
	if(preg_match("/^[a-zA-Z0-9-_\.]+\.(jpg|gif|png)$/",$imagefile))
	{
		echo "<br>Valid Image file";
	}else
	{
		echo "<br>Invalid Image file";
	}
	
?>


Process Two Submit Buttons on single Form for different actions

Working with multiple submit form is very useful idea to perform multiple action in single form. For example we can use this structure for Trial and Full Version download, Save and Save Draft,

<?php
if(isset($_POST['download']))
{
	//Choose a File Based on Submit Button	
	if($_POST['download']=="Download Trail Version")
	$file="TrialVersion.exe";
	elseif($_POST['download']=="Download Full Version")
	$file="FullVersion.exe";

	header('Content-type: application/octet-stream');
	header("Content-length:".filesize($file));
	header('Content-Disposition: filename="'.basename($file).'"');		
	readfile($file,true);
	exit();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>
<form id="form1" name="form1" method="post" action="<?=$_SERVER['PHP_SELF']?>">

<input type="submit" name="download" value="Download Trail Version" />
<input type="submit" name="download" value="Download Full Version" />

</form>
</body>
</html>

Saturday, August 13, 2011

Simple Trick to Find File Content Type in PHP

When processing file from server side we need a Exact document Content-Type header define required to process a content type properly.

From the following php header parameter have "Content-Type": audio/mpeg. The String "audio/mpeg" is the content type of the file which we need to process a proper format disposition from server to client.

header('Content-type: audio/mpeg');
Here is the Simple Trick to find the document Content-Type header string
<?php

if(isset($_POST['upload']))
{
	echo "<pre>";
	print_r($_FILES);
	echo "</pre>";
}

?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Simple Trick to Find File Content Type in PHP</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="<?=$_SERVER['PHP_SELF']?>" enctype="multipart/form-data">

<input name="filename" type="file" />
<input type="submit" name="upload" value="Check Content Type" />

</form>
</body>
</html>



Pure CSS Drop Down Menu, Complete Fully CSS 3


Here is a SEO Friendly Horizontal Multilevel Drop Down Menu using Completely written with Pure CSS attributes and properties. You can easily format it with your own color theme and Image background by adjusting few properties  You can use this menu for your Real time projects Back office Admin Panels.

This menu written with Combination of <div> and <ul><li>, and <a> <span> Tags
Mokup for the Multi Level Menu as Followes

drop-down-menu.css
In this file you can edit your color values as per your need.
/* menu::base */
div#menu {
	float:left;
    height:30px;
	background-color:#3399CC;	
	font-size:11px;
	font-weight:bold;
	text-align:left;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
	background-color:#0099CC;		
}
div#menu ul.menu {
    padding-left: 10px;
	background-color:#3399CC;
}

div#menu li {
    position: relative;
    z-index: 9;
    margin: 0;
    padding: 0;
    display: block;
    float: left;
}
   
div#menu li:hover>ul {
    left: -2px;
}

div#menu li div {
    list-style: none;
    float: left;
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    z-index: 11;
    visibility: hidden;
    padding:0px;
}
div#menu li:hover>div {
    visibility: visible;
}

div#menu li.current a {}

/* menu::level1 */
div#menu a {
    position: relative;
    z-index: 10;
    height: 11px;
    display: block;
    float: left;	
    padding:10px;
    text-decoration: none;
	color:#000;
}
div#menu span {

	font: bold 11px Tahoma, Geneva, sans-serif;
    padding-top:0px;
    color: #000;
    font-weight:bold;
    text-transform:capitalize;
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
}

div#menu ul a:hover span {
    color: #039;
}

div#menu li { border-right:1px solid #CCC; }
div#menu li.last span{
    padding:0px;
}

/* menu::level2 */
div#menu ul ul li {
    padding: 4px 0;
    z-index: 9;
	border-bottom:1px solid #000;
	border-left:1px solid #CCC;
}
div#menu ul ul {
    z-index: 12;	
    padding: 0;
    margin-top:2px;
    margin-left:0px;
    margin-right:0px;
}
div#menu ul ul a {
  	width: 184px;
  padding: 0px 7px 3px 8px;
    height: auto;
    float: none;
    display: block;
    background:none;
    margin-bottom: 2px;
    z-index: -1;
	color:#FFF;
}
div#menu ul ul a span {
	  padding: 0 10px 0px 10px;
    line-height: 20px;
    color: #000;
	font-weight:bold;
    text-transform: none;
    background:none;
}
div#menu ul ul a:hover {

}
div#menu ul ul a:hover span {

    color: #039;
}

div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
	border-bottom:1px solid #EEEEEE;
}

/* menu::level3 */
div#menu ul ul div {
    width: 208px;
    margin: -30px 0 0 190px !important;
    height: auto;
    _padding: 0 0 9px 3px;
}
div#menu ul ul ul {
	_padding-right:1px;
}

/* lava lamp */
div#menu li.back {
}
div#menu li.back .left {
}


sample-menu.html

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pure CSS Menu Fully CSS Only</title>
<link href="drop-down-menu.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="menu">
<ul class="menu">
<li><a class="parent" href="http://www.w3lessons.com/"><span>Home</span></a></li> 
<li><a href="http://www.w3lessons.com/"><span>About us</span></a></li>

<li><a class="parent" href="javascript://"><span>Services</span></a>
<!--First Level-->             
    <div>
    <ul>
    <li><a href="http://www.w3lessons.com/"><span>SEO</span></a></li>
    <li><a href="http://www.w3lessons.com/"><span>Web Design</span></a></li>  
        <!--Second Level-->     
        <li><a href="javascript:"><span>Web Development</span></a>
            <div>
            <ul>
            <li><a href="http://www.w3lessons.com/"><span>HTML</span></a></li>
            <li><a href="http://www.w3lessons.com/"><span>CSS</span></a></li>
                 <!--Third Level-->   
                <li><a href="javascript:void(0)"><span>PHP</span></a>
                    <div>
                    <ul>
                    <li><a href="http://www.w3lessons.com/"><span> PDO</span></a></li>
                    <li><a href="http://www.w3lessons.com/"><span>MySQL</span></a></li>                
                    <li><a href="http://www.w3lessons.com/"><span>SQLite</span></a></li>                
                    </ul>
                    </div>                                     
                </li>                
            </ul>
            </div>                
        </li>   
    
    </ul>
    </div>
</li>

<li><a class="parent" href="javascript://"><span>Skills</span></a></li>
</ul>
</div>

</body>
</html>

Horizontal and Vertical Aligned div using CSS

Horizontal and Vertical Centered Element is very use full for any layout.
Here we can see how to create a Centered div using CSS

Create Div with 400px in Width, and 200px in Height for your quick observation I used to just in 100s, you can adjust your div size based on this assumption

To Create a Aboslute Centered Div:

Position: Asbolute,
Top and Left : 50%
Margin-Left: -(50%) of width
Margin-Top- (50%) of Height



HTML & CSS Code for Horizontal and Vertical Centered Div.


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centered Div</title>
<style type="text/css">
<!--
#center{
position:absolute; 
width: 400px; 
height: 200px; 
top: 50%; 
left: 50%; 
margin-left:-200px; 
margin-top:-100px; 
text-align:center;
background-color:#CCC;
}
-->
</style></head>
<body>

<div id="center">
Screen Centered Div
</div>

</body>
</html>

Design SEO Friendly 3 Column Liquid Web Layout

Percentage dimensions of 3 Column Liquid web Layout

All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content.

Maximum column content widths

To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. This chops off any content that is wider than the div. Because of this, it's important to know the maximum widths allowable at common screen resolutions. For example, if you choose 800 x 600 pixels as your minimum compatible resolution what is the widest image that can be safely added to each column before it gets chopped off? Here are the figures:
800 x 600
Left & right columns: 162 pixels
Center page: 357 pixels
1024 x 768
Left & right columns: 210 pixels
Center page: 459 pixels

The nested div structure

Div Arrangements for3 Column Liquid web Layout I've colour coded each div so it's easy to see:





 The header, colmask and footer divs are 100% wide and stacked vertically one after the other. Colmid is inside colmask and colleft is inside colmid. The three column content divs (col1, col2 & col3) are inside colleft. Notice that the main content column (col1) comes before the other columns.

Author: Matthew James Taylor

Requirements for SEO Friendly Web Layout

No CSS hacks
The CSS used for this layout is 100% valid and hack free. To overcome Internet Explorer's broken box model, no horizontal padding or margins are used in conjunction with a width. Instead, this design uses percentage widths and clever relative positioning.

SEO friendly 2-1-3 column ordering
The higher up content is in your page code, the more important it is considered by search engine algorithms (see my article on link source ordering for more details on how this affects links). To make your website as optimised as possible, your main page content must come before the side columns. This layout does exactly that: The center page comes first, then the left column and finally the right column (see the nested div structure diagram for more info). The columns can also be configured to any other order if required.

Full length column background colours
In this layout the background colours of each column will always stretch to the length of the longest column. This feature was traditionally only available with table based layouts but now with a little CSS trickery we can do exactly the same with divs. Say goodbye to annoying short columns! You can read my article on equal height columns if you want to see how this is done.

No Images
This layout requires no images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Why waste bandwidth and precious HTTP requests when you can do everything in pure CSS and XHTML?

No JavaScript
JavaScript is not required. Some website layouts rely on JavaScript hacks to resize divs and force elements into place but you won't see any of that nonsense here. The JavaScript at the bottom of this page is just my Google Analytics tracking code, you can remove this when you use the layout.

Resizable text compatible
This layout is fully compatible with resizable text. Resizable text is important for web accessibility. People who are vision impaired can make the text larger so it's easier for them to read. It is becoming increasingly more important to make your website resizable text compatible because people are expecting higher levels of web accessibility. Apple have made resizing the text on a website simple with the pinch gesture on their multi-touch trackpad. Is your website text-resizing compatible?

No Quirks Mode
This liquid layout does not require the XML declaration for it to display correctly in older versions of Internet Explorer. This version works without it and is thus never in quirks mode.

No IE Conditional Comments
Only one stylesheet is used with this layout This means that IE conditional comments are not needed to set extra CSS rules for older versions of Internet Explorer.

Friday, August 12, 2011

Web Interface Design and Target Audience

When designing a web interface. get the clear idea about target audience taste and what their like and dislikes and what they are looking for on web. and consider the following ideas.

Placement and Position
The first thing you do when you design a Web page is you start with a blank page and you place elements on that page. Placement of your elements can be critical to whether your design works or is a dismal failure.

Do not use Ancient Table Layout
It's time to break your old habits and admit that using tables for layout is outmoded and lazy. Table Layout make your html size nominally high. and  It's time to move on to CSS layouts, as your excuses just won't hold water for much longer, and why keep bailing when you could join the rest of us at the helm!

CSS Layouts are More fast than Table Layout
Learn why you should use CSS to position your pages rather than HTML tables. as a result CSS Layouts are render quickly when consider the table layout.

Parts of a Web Page
The parts of a Web page can be broken down into five distinct elements: images, headlines, body content, navigation, and credits. Most Web pages will include all five of these items, but do you know what they all are?

Web Grids - Columnar Layout in Web Grids
Work your layout with grid system, you often have more control over the horizontal sizes than you do about the vertical. So grid layouts become columnar layouts. This gallery shows how grids can create dynamic layouts with various numbers of columns.

Why Use a Grid to Design Your Page?
Grids are an important part of layout in Web pages. They are a great way to impose order on your Web pages and provide balance to your layouts.

Prioritize Your Content and Put Important Stuff First Using CSS Float…
Learn how to use CSS floats to lay out your Web pages in any fashion you like, without changing the HTML. Putting the most important content first in the HTML gives robots and search engines a leg up in knowing what content is important.

4 Imporant steps to plan your website development Process

Before starting your Web development process, you need to consider the following real time tactics for your web development.

As a Web developer or Web designer or CSS developer, what ever the position you are in your job. you need consider the following procedure to make your development process more effective and make you as a Team Player.

Let me tell few point about Real time development process. We are going to view each points more elaborate way in future articles.



1. Web Interface Design based on Target people
Collect target website visitors data like Web layout color scheme, screen elements and screen resolution base, Browser, Operating System they are used. these data are bring a idea to know about your target audience like and dislike. Make your interface more targeted is very important to reach your target online audience .


2. Choose HTML5 as your Document Type
In future HTML5 creates a revolution because of this portability and flexibility. HTML5 is best for Platform independent web interface document type. HTML 5 have very effective semantic content tags to classify your content in user interface.  <header>, <nav>, <article>, <section>,<aside>,<video> these are some content specific tags to present user and Search Engines with value added way.

3. Design you Layout Consider the SEO Part
When designing a web interface layout HTML elements and tag usage is very important factor for Search Engine Optimization. Designing interface includes with Text Content, Graphics Videos Side Boxes. Each design segment need to use corresponding HTML tags based on segmentation. for example your need to put a piece of text information. Use a <p> tag for this. If you going to place a Image use <img> tag for this.

4. SEO Friendly Development! IMPORTANT
SEO: The Industry of Search Engine Optimization is raised ! the reason behind that is "The Web Developers". Developers are not consider any SEO aspect at the time of development. they are just integrate what the designers provide to them. In this process the project create more complexity  in future to reach project goal.
Current scenario is SEO is very important. So Development process also need to consider the SE Part to reduce the project cost and target duration to reach the project goal.


Conclusion:

Consider the above points and Let we view these steps in more elaborate way in upcoming articles.