css-menu-using-unordered-list-

In web programming beauty in design has become an essential requirement. Technically you may have built a great site but it if does not look good, you do not get deserved appreciation and reward. so in addition to learning great web programming tricks you should also spend some time to create beautiful designs. You must have seen fancy looking menus in websites. These menu can be designed and programmed in JavaScript, DHTML and HTML.

Some tools are also available to create eye-catching menu on the fly. Whatever method is used, CSS is core requirement to all these.Without CSS things would have been complex. In web programming CSS is used in a number of ways to create standard navigation menus for web applications. List markups are one way of doing this. Unordered List element is the correct choice in this sense, with each destination link is defined by an individual list item. This approach provides great flexibility allowing navigation menu either vertical or horizontal.

This article provides basic guide on css menu.Menu which are designed using power of CSS are known as CSS Menu. To create a verticle navigation CSS menu, let’s start with a simple unordered list. Throughout this article this HTML will be used to design the CSS menu.

<ul>
<li><a href=’#’>Home<a/></li>
<li><a href=’#’>Company Profile</a></li>
<li><a href=’#’>Departments<a/></li>
<li><a href=’#’>Services<a/></li>
<li><a href=’#’>Future Plan<a/></li>
<li><a href=’#’>About Us<a/></li>
</ul>
Corresponding CSS is defined as
ul {
list-style-type:none;
margin:0;
padding:0;
}
li {
padding:0;
}
This CSS ensures that we are working with blank canvas. No default spacing, padding or margin which creates confusion. At this stage our menu will look like under

css_menu_a

Now next step is to convert these list items into buttons. This done by following CSS, also padding is now adjusted to allow some space around the text. Add the lines in bold to previous CSS rules.

ul {
list-style-type:none;
margin:0;
padding:0;
}
li {
background: #DDD;
margin: 0;
padding: 2px 10px;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #666;
border-bottom: 1px solid #aaa;
}

After applying above CSS our menu gets some shape and loos like under.
css_menu_b

Next Step is to define the width of buttons. As list item have been converted into buttons so width is adjusted with the help of UL selector. Add line in bold to earlier CSS rules.

ul {
list-style-type:none;
margin:0;
padding:0;
width:160px;
}

After this step our CSS menu is complete and look like under, You customize it by adding more css to refine the text styles or font size.
css_menu_c

In some sites when you place your mouse at menu it changes its color, this can be done by using a:hover in CSS.

retrieving-data-from-mysql-into-html-table-using-php-

In last article I explained how to make a connection to MySql server and how to create a MySql database using PHP. This article is continuation of last article.
Use following link to visit that article

Connecting To MySql Server Using PHP
In this article I will populate an HTML table by retrieving data from “student” table created in last article.

Insert Data into MySql Table

Data can be inserted in to table using standard query language(SQL). This process is simple and easy to understand. PHP provides standard mechanism for all DML operations. For example we use Mysql_query() function to make an insertion, updation or deletion. We will examine this with following example

First we will insert data into “student” table.

Following code inserts 3 row into table.

<?php
$connect = mysql_connect(“localhost”, “root”, “password”) or
die (“Error, check your server connection.”);
mysql_select_db(“school”);
$insert=”insert into student values (1,’Jones’,’8th’),(2,’Raymon’,’8th’),(3,’Michle’,’8th’)”;
$results=mysql_query($insert) or die(mysql_error());
echo “Data Inserted Successfully”;
?>
In above code first we wrote a query to insert three rows and stored it in $insert variables. In next line mysql_query() function executed the query and inserted rows into database.

Populating HTML Table

To retrieve data from MySql server we use mysql_fetch_array(). This function takes a query as parameter and retrieves a result set in the form of an array. We can use loop to traverse through the array.

<?php
$connect = mysql_connect(“localhost”, “root”, “password”) or
die (“Hey loser, check your server connection.”);
mysql_select_db(“school”);
$quey1=”select * from student”;
$result=mysql_query($quey1) or die(mysql_error());
?>
<table border=1 style=”background-color:#F0F8FF;” >
<caption><EM>Student Record</EM></caption>
<tr>
<th>Student ID</th>
<th>Student Name</th>
<th>Class</th>
</tr>
<?php
while($row=mysql_fetch_array($result)){
echo “</td><td>”;
echo $row[‘stud_id’];
echo “</td><td>”;
echo $row[‘stud_name’];
echo “</td><td>”;
echo $row[‘stud_class’];
echo “</td></tr>”;
}
echo “</table>”;
?>
In above example While loop traverse through result set and on each iteration of loop we used HTML table tags to create a HTML table.

 

connecting-to-mysql-server-using-php-

PHP provides several functions to perform DML operation on MySql database. These functions allow to establish connection, retrieve data and update existing data. Some of the most commonly used functions are

•    mysql_connect (“hostname”, “user”, “pass”): Connects to the MySQL server.
•    mysql_select_db(“database name”): Equivalent to the MySQL command USE; makes the selected database the active one.
•    mysql_query(“query”): Used to send any type of MySQL command to the server.
•    mysql_fetch_rows(“results variable from query”): Used to return a row of the entire results of a database query.
•    mysql_fetch_array(“results variable from query”): Used to return several rows of the entire results of a database query.
•    mysql_error(): Shows the error message that has been returned directly from the MySQL server.
In following example we will look at first three functions.
This example creates a Mysql database using PHP.

<?php
//connect to MySQL; note we’ve used our own parameters- you should use
//your own for hostname, user, and password
$connect = mysql_connect(“localhost”, “root”, “pass”) or
die (“Error , check your server connection.”);
//create the main database if it doesn’t already exist
$create = mysql_query(“CREATE DATABASE IF NOT EXISTS SCHOOL”)
or die(mysql_error());
//make sure our recently created database is the active one
mysql_select_db(“school”);
//create “student” table
$stud = “CREATE TABLE student (
stud_id int(11) NOT NULL auto_increment,
stud_name varchar(255) NOT NULL,
stud_class varchar(255) NOT NULL,
PRIMARY KEY (stud_id))”;
$results = mysql_query($stud) or die (mysql_error());
echo “School Database successfully created!”;
?>
How it works
Firstly we used following command to establish connection with Mysql Server
$connect = mysql_connect(“localhost”, “root”, “pass”) or
die (“Error, check your server connection.”);
this function uses three parameters
First parameters represent Hostname

Host name: In our case, it’s the local host because i have installed everything locally. You will need to change this to whatever host is acting as your MySQL server.

Second and third parameters are for user name and password

Username and password: I have used root user for connections you may use either root or any other user.

Following function call create database if not exists.
$create = mysql_query(“CREATE DATABASE IF NOT EXISTS SCHOOL”)
or die(mysql_error());
mysql_query() function execute query on the database.
After creating a database we must use following command to select it
in order to use
mysql_select_db(“school”);
Then again used mysql_query() to create a table name “student”;
In next article we well see how to retrieve data from this database.
NOTE
While executing this script if you encounter following error

Fatal error : Call to undefined function mysql connect() …..

This means that you have not configured PHP to work with Mysql.

If you have installed PHP from installation package then you missed the Mysql extension installation.

If you have downloaded zipped version of PHP then make sure to uncomment following extension in PHP.INI file.

extension=php_mysql.dll3

to uncomment an extension simply remove leading semi colon (;).
You may find following article helpful

installation-of-apache-php-and-mysql-

css-layout-

before further working. You can make few alterations at later stages but the basic structure should remain same. So it is very important that you must decide the basic structure before going into detail designs. You can use one of two popular techniques

1-Table Based Layout
Table Based layout is being used for a very long time. It uses HTML table to incorporate content.
2- CSS based layout
CSS layout has gained great popularity these days. CSS provides really powerful mechanism to control layout of page. If you have decided to use CSS layout for your website, you must determine few things like how many columns will be there. Will the layout be Fixed layout or Liquid layout or Elastic? And also think will this layout be Float Layout or Positioning Layout?

CSS based design relies on Float and Positioning. These are the most fundamental building blocks of CSS layout. In this article I will focus on Float layout and in next article will try to explain Positioning layout.

What is Float?

When web browser render elements, it palaces new element below the previous one. This is a vertical way of placement. When we apply Float to an element it is taken out of the normal vertical flow and shifted towards left or right. Now next element can flow to right of left-floated element and to left of right-floated element. So float allows us to think horizontally. An important thing is that elements following floated element will wrap around it, so elements following floated element needed to be “cleared” to bring them in normal flow.

Fixed Width Layout

Fixed with layout has predefined total width and columns width using static width measurement such as pixels. The width of the page remains same irrespective of the width of the screen. For example if you have designed your page for resolution of 800 X 600. Width of your page will stick to 800 pixels even if the visitor has set its screen resolution to 1024 X 768.

Liquid Layout

In liquid or fluid layout we define out column in percentage (%). It automatically contracts or expands to fill browser windows.

2 Column CSS Layout

In this section I am going to design a 2 column liquid layout using float.
Before reading this section you must know how to apply CSS to HTML pages. You can visit following link to have a review.

Apply css to web documents

This layout is going to have Header, a left side bar, a content column and Footer. We shall use following HTML to create CSS layout.
<html>
<head>
<title>2 column Classic Layouts</title>
<link rel=’stylesheet’ media=”screen” type=’text/css’ href=’TwoColumn.css’ />
</head>
<body
<div id=”mainborder”>
<div id=”header”>
<p>Header goes here…</P>
</div>
<div id=”sidebar”>
<p>sidebar goes here…</p>
<br><br><br><br><br><br>
<p>sidebar goes here</p>
</div>
<div id=”content”>
<p>main content here…</p>
<br><br><br><br><br><br>
<p>main content here…</p>
</div>
<div id=”footer”>
Footer
</div>
</div>
</body>
</html>
At this stage our page will look like as under

layout_1_a

Now open a notepad a paste following CSS and save it as TwoColumn.css.
body {
font-size:85%;
font-family:’Times new roman’,’Times New Roman’ ,;
margin:10px;
}
/* header */
#header {
padding:10px;
border:1px solid #000;
background-color:#CCC;
}
/* Side bar */
#sidebar {
padding:10px;
border:1px solid #000;
margin-top:10px;
}
/* content */
#content {
margin:10px 0 10px 0;
padding:10px;
border:1px solid #000;
}
/* Footer */
#footer {
padding:10px;
border:1px solid #000;
background-color:#CCC;
}
At this stage our Page has got some shape as looks like under.
layout_1_b

Now it is the time to float side bar. Add the code in bold to existing CSS.
/* Sidebar */
#sidebar {
float:left;
padding:10px;
border:1px solid #000;
margin-top:10px;
}
/* Footer */
#footer {
padding:10px;
border:1px solid #000;
background-color:#CCC;
clear:both;
}
Now have look at page below.
layout_1_c

Now apply proper width to columns. Initially we had 100% width available.
We shall assign 15% to left side bar and remaining to content. 1% gape will maintained between side bar and content.
Add bold face code to CSS.
/* Sidebar */
#sidebar {
float:left;
padding:10px;
border:1px solid #000;
margin-top:10px;
width:15%;
}
/* content */
#content {
margin:10px 0 10px 0;
padding:10px;
border:1px solid #000;
margin-left:16%;
}
Below is final result we have.
layout_1_d