Tableless Web Design in CSS: 2 & 3 columns with Header & Footer

October24

Hello Folks,

You know the web design has already transferred from the table based design to tableless design. This does not you will never use tables. What it means that using table in building website structure is getting rare. But why do people go for tableless design? Although there are many reasons, the most important reason is you save a lots of bandwidth by coding cleaner and fewer lines. Tableless web design is fun too!

But I must admit that it is a very easy tutorial for anyone. My target audience is those who are new to website design and wish to start designing in tableless format.

If you do not understand the whole article at the first time, my suggestion is you read it again.

OK. Let us start. Here we go:

2 Column tableless page design

Step One: A 2 column complete page coding

First take a look at the page code below. You can see the output here: 2 Column Page Output

I suggest you go to this output page, open the source code and take a look for a better indent view.

<!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>2 Column CSS Example</title>
<style type=”text/css”>

BODY
{
margin:0px; padding:0px; text-align:center;
font-family:Arial, Helvetica, sans-serif; font-size:12px;
}
P
{
margin:0px; padding:17px 0px 0px 0px;
color:#CCCCCC;
}
H1
{
margin:0px; padding:25px 0px 0px 0px;
font-family:Arial, Helvetica, sans-serif; font-size:20px;
color:#FFFFFF;
}
UL
{
margin:0px; padding:0px;
}
LI
{
list-style:none; padding:5px 0px 0px 20px;
}
LI A
{
color:#CCCCCC; text-decoration:none;
}
LI A:hover
{
color:#FFFFFF; text-decoration:underline;
}
#pageText
{
padding:15px 0px 0px 20px;
}
#container
{
width:775px; margin:0 auto;
}
#header
{
width:100%; height:100px; background:#990000;
}
#content
{
clear:both;
}
#leftColumn
{
width:275px; height:300px; background:#000000;
text-align:left;
float:left;
}
#rightColumn
{
width:500px; height:300px; background:#003300;
text-align:left; color:#CCCCCC;
float:left;
}
#footer
{
width:100%; height:50px; background:#330033;
clear:both;
}

</style>
</head>

<body>

<!– CONTAINER starts here –>
<div id=”container”>

<!– HEADER starts here –>
<div id=”header”>
<h1>2 Column CSS Example</h1>
<p>Sub Title</p>
</div>
<!– HEADER ends here –>

<!– PAGE CONTENT starts here –>
<div id=”content”>

<!– LEFT COLUMN starts here –>
<div id=”leftColumn”>

<!– LEFT MENU starts here –>
<ul>
<li><a href=”#”>This is the first navigation link</a></li>
<li><a href=”#”>This is the second navigation link</a></li>
<li><a href=”#”>This is the third navigation link</a></li>
<li><a href=”#”>This is the fourth navigation link</a></li>
<li><a href=”#”>This is the fifth navigation link</a></li>
</ul>
<!– LEFT MENU ends here –>

</div>
<!– LEFT COLUMN ends here –>

<!– RIGHT COLUMN starts here –>
<div id=”rightColumn”>
<div id=”pageText”>Your page content goes here.</div>
</div>
<!– RIGHT COLUMN ends here –>

</div>
<!– PAGE CONTENT ends here –>

<!– FOOTER starts here –>
<div id=”footer”>
<p>Copyright © 2008. Tanzilo Insido PHPo MySQLo</p>
</div>
<!– FOOTER ends here –>

</div>
<!– CONTAINER starts here –>

</body>
</html>

In the following steps, I am going to clarify what I have done and how.

Step One: The CONTAINER div is holding the whole page content

First of all, please note that we have kept all our content elements inside a container DIV element:

And here is the CSS for this section:

#container
{
width:775px; margin:0 auto;
}

Notice that this is a fixed width design of 775 pixels and the part margin:0 auto; sets the content area in the page center alignment.

Step Two: The HEADER AND FOOTER

Now we have three main areas inside our container div and there they are:

In the header div section, we only put a two line text and in the footer div section, we put just the copyright information.

Here is the CSS for header div:

#header
{
width:100%; height:100px; background:#990000;
}

Note that we are clearly specifying the width and height of the header section. Sometimes you may find that this section is not appearing. It may happen if you do not mention the values for height and/or width clearly.

And here is the CSS for footer div:

#footer
{
width:100%; height:50px; background:#330033;
clear:both;
}

We clearly specified the values for height and width again. But specially notice the clear:both; part. Why do we write this line? Because we are using floating feature. When we use clear:both;for a div area, it floats left by default and does not mess up with any other div area.

Simple. Huh?

Step Three: The CONTENT div

We have put our two columns in the content div:

And here is the CSS for content div:

#content
{
clear:both;
}

Notice that we are using clear:both; coding to avoid any mess up with the header. If you do not clear your div, it will automatically try to be positioned side by side with the preceeding div (provided it gets enough space there).

Step Four: The two columns in the CONTENT div

Inside our content div element, we have two div element and those are leftColumn div and rightColumn div.

Here is the CSS for leftColumn div:

#leftColumn
{
width:275px; height:300px; background:#000000;
text-align:left;
float:left;
}

And here is the CSS for the rightColumn div:

#rightColumn
{
width:500px; height:300px; background:#003300;
text-align:left; color:#CCCCCC;
float:left;
}

You specially need to notice the following two things

1. We are using float feature for both of them and floating both of them to left.
2. Add the witdh of the leftColumn and rightColumn and that is 775 pixels (225 px + 500 px) that is exactly equal to the width of our container div (775 px).

What I am trying to say is: when you float two DIVs to the same direction (i.e. left in our case), they take position side by side as like two columns. But the total width of both of them must be equal to or less than the width of the div they are positioned.

Step five: Putting something in the left and right columns

We assign some text in the left and right columns and thus we are done.

3 Column tableless page design

Step One: A 3 column complete page coding

First take a look at the page code below. You can see the output here: 3 Column Page Output

I suggest you go to this output page, open the source code and take a look for a better indent view.

<!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>3 Column CSS Example</title>
<style type=”text/css”>

BODY
{
margin:0px; padding:0px; text-align:center;
font-family:Arial, Helvetica, sans-serif; font-size:12px;
}
P
{
margin:0px; padding:17px 0px 0px 0px;
color:#CCCCCC;
}
H1
{
margin:0px; padding:25px 0px 0px 0px;
font-family:Arial, Helvetica, sans-serif; font-size:20px;
color:#FFFFFF;
}
UL
{
margin:0px; padding:0px;
}
LI
{
list-style:none; padding:5px 0px 0px 20px;
}
LI A
{
color:#CCCCCC; text-decoration:none;
}
LI A:hover
{
color:#FFFFFF; text-decoration:underline;
}
#pageText
{
padding:15px 0px 0px 20px;
}
#container
{
width:775px; margin:0 auto;
}
#header
{
width:100%; height:100px; background:#990000;
}
#content
{
clear:both;
}
#leftColumn
{
width:200px; height:300px; background:#000000;
text-align:left;
float:left;
}
#middleColumn
{
width:375px; height:300px; background:#FFFFFF;
text-align:left; color:#000000;
float:left;
}
#rightColumn
{
width:200px; height:300px; background:#003300;
text-align:left; color:#CCCCCC;
float:left;
}
#footer
{
width:100%; height:50px; background:#330033;
clear:both;
}

</style>
</head>

<body>

<!– CONTAINER starts here –>
<div id=”container”>

<!– HEADER starts here –>
<div id=”header”>
<h1>3 Column CSS Example</h1>
<p>Sub Title</p>
</div>
<!– HEADER ends here –>

<!– PAGE CONTENT starts here –>
<div id=”content”>

<!– LEFT COLUMN starts here –>
<div id=”leftColumn”>

</div>
<!– LEFT COLUMN ends here –>

<!– MIDDLE COLUMN starts here –>
<div id=”middleColumn”>
<div id=”pageText”>Your page content goes here.</div>
</div>
<!– MIDDLE COLUMN ends here –>

<!– RIGHT COLUMN starts here –>
<div id=”rightColumn”>
<div id=”pageText”>Your right column content goes here.</div>
</div>
<!– RIGHT COLUMN ends here –>

</div>
<!– PAGE CONTENT ends here –>

<!– FOOTER starts here –>
<div id=”footer”>
<p>Copyright © 2008. Tanzilo Insido PHPo MySQLo</p>
</div>
<!– FOOTER ends here –>

</div>
<!– CONTAINER ends here –>

</body>
</html>

Explanation for the 3 column design:

When you understand 2 column design, it is very easy to understand the three column design too since they are very similar. Everything else are as they were but now we have three columns in the content div:

Left column CSS:

#leftColumn
{
width:200px; height:300px; background:#000000;
text-align:left;
float:left;
}

Middle column CSS:

#middleColumn
{
width:375px; height:300px; background:#FFFFFF;
text-align:left; color:#000000;
float:left;
}

Right column CSS:

#rightColumn
{
width:200px; height:300px; background:#003300;
text-align:left; color:#CCCCCC;
float:left;
}

Well. Notice that (1) we are floating them all to the left direction to keep them side by side in column style and (2) the total width of all the three columns is (200 px + 375 px + 200 px) or 757 pixels which is exactly equal to the width of the container div (775 pixels).

#container
{
width:775px; margin:0 auto;
}

Thus, you can make as many columns as you want. But make sure the total width of all your columns is smaller than or equal to the available space (width).

I tries my best to keep this post as easy as possible. If you are not clear or do not understand the whole article at the first reading, I suggest you giving a second reading.

Thanks for reading.

posted under CSS, Web Design | 9 Comments »

Password protect sub-directory in wordpress by htaccess

October18

Hello!

Recently a Canadian client of mine told me to look at an interesting wordpress problem. I regularly develop wordpress theme for him. He is a great artisitic designer of wordpress theme and I code theme to HTML & CSS. Whatever, my client told me that he wants to password protect a sub-directory “download”. He has done it from cPanel. He also created a user and permitted that user in that sub-directory. But it was not working.

Befoer I start, I want to clear that in this case wordpress was installed in root directory. One more thing is in this post i cannot write “.” and “htaccess” together. May be this is a security issue. If I write “.” and “htaccess” together, the post is not saved and I get a 404 error. So, I have written (dot)htaccess instead. Again, (dot)htpasswds instead of “.” and “htpasswds” together.

So I logged in to the cPanel to check what is happening actually. I found that whenever you password protect a sub-directory from cPanel, a new (dot)htaccess file will be created in that sub-directory. And the content of the (dot)htaccess file is less or more like as follows:

AuthType Basic AuthName “Authorized Area!”
AuthUserFile “/home/ftpusername/(dot)htpasswds/public_html/download/passwd”
require valid-user

And your password that you set from the cPanel will be encrypted and saved in a file (dot)htpasswds in the AuthUserFile location.

If this was not a wordpress site or it was a wordpress site (but custom Permalink not used; rather the Default used), you should not face problem in most cases. But when you use customized Permalink in wordpress to create beautiful links and try to protect a password, the password protection from cPanel does not work!

But do you know why? Here is the reason: in the root directory you installed wordpress and here there is a (dot)htaccess file. The settings in this file and the (dot)htaccess in your sub-directory (for example root_directory/download/(dot)htaccess) do not smoothly match with each other with since you are using Permalink plug-in to customize your URLs.

So, when you try to go to: http://www.yoursitename.com/download wordpress think that it is a post or page!

WordPress think this because you have enables permalink and this is quite correct and logical. But you know your download sub-directory is not a post but a folder/directory in the root folder. So, you need to do something so that wordpress does not confuse the following link as a post or page.

http://www.yoursitename.com/download

Here is the solution:
1. Open the (dot)htaccess file in http://www.yoursitename.com/(dot)htaccess
2. Find out the line # BEGIN WordPress
3. Just before this, add the following three lines:
# To bypass download directory
ErrorDocument 401 /%{REQUEST_URI}/myerror.html
ErrorDocument 403 /%{REQUEST_URI}/myerror.html
4. Save the (dot)htaccess file and upload in your root or installation directory.

Now go to http://www.yoursitename.com/download and check if it works. If everything is OK, you should get a prompt asking for a username and password that you set from the cPanel.

Here is my example:
Sub-directory download password protected: http://www.tanzilo.com/download
Permalink smoothly working: http://www.tanzilo.com/2008/10/18/password-protect-sub-directory-in-wordpress-by-htaccess/

Or you may install a shopping cart in location as in:

http://www.yoursitename.com/shop

This should work smoothly too as you see my example here:
http://tanzilo.com/shop

Although there is an application/software in the shop sub-directory, wordpress no more thinks it a post or page!

Thus, you can set (dot)htaccess, password protected sub-directory (i.e. /download/) and any other sub-directory (i.e. /shop/) in such a way that they will be living in happiness in the same home!

The last interesting thing is this solution is sometimes helpful in Drupal and in some other applications where (dot)htaccess and URL rewriting code do not fit together.

Thanks for reading.

posted under Blog, Wordpress | 22 Comments »

PHP – MySQL: Unicode solution to Chinese, Russian or any language

October13

Hey Guys,

I am a Freelance Web Developer and my main tools are PHP & MySQL. Few days ago, I got a Chinese project where I had to develop a Real Estate site in Chinese language. You know we often build websites in English and Databases are in English too. So, the default configuration in MySQL works fine everytime.

But when it comes a language other than English, many people do not know what to do. Well. When I started the project, I did not even know that the default MySQL settings will not work for the Chinese language. So, I started searching for a stable solution where my program will support any language for adding, updating and searching data from the MySQL database.

And Yeah.
I found it!

OK.

Let us see the solution now.
It is very very simple.

Step One: SET THE CHARSET TO UTF-8 IN THE HEAD SECTION

First of all, the browser needs to know that you are going to display or use Unicode in this page. So, go to your <HEAD></HEAD> section and set the charset to utf-8. So, the browser will be able to show the Unicode text without any error and smoothly. You can also copy and paste the line below:

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

Step Two: CREATING THE DATABASE

When you create your (a) Database and (b) any Table in the database, set the Collation of both of them to utf8_unicode_ci and you know it is very easy if you are using phpMyAdmin.

Step Three: DATABASE INITIALIZATION

When you initialize the database connection, please add the “extra lines”

<?php
	define('HOSTNAME', 'localhost');
	define('USERNAME', 'database_user_name');
	define('PASSWORD', 'database_password');
	define('DATABASE', 'database_name');
	$dbLink = mysql_connect(HOSTNAME, USERNAME, PASSWORD);
	mysql_query("SET character_set_results=utf8", $dbLink);
	mb_language('uni');
	mb_internal_encoding('UTF-8');
	mysql_select_db(DATABASE, $dbLink);
	mysql_query("set names 'utf8'",$dbLink);
?>

But why are you adding the extra lines? Because you are letting the database know what kind of input you are going to work with soon.

Step Four: INSERTING INPUTS/DATA IN THE DATABASE

<?php
	mysql_query("SET character_set_client=utf8", $dbLink);
	mysql_query("SET character_set_connection=utf8", $dbLink);
	$sql_query = "INSERT INTO
	TABLE_NAME(field_name_one, field_name_two)
	VALUES('field_value_one', 'field_value_two')";
	mysql_query($sql_query, $dbLink);
?>

Why are you adding the first two lines for? Because the database should know what kind of data is going to be stored.

Step Five: UPDATING INPUTS/DATA IN THE DATABASE

<?php
	mysql_query("SET character_set_client=utf8", $dbLink);
	mysql_query("SET character_set_connection=utf8", $dbLink);
	$sql_query = "UPDATE TABLE_NAME
	SET field_name_one='field_value_one', field_name_two='field_value_two'
	WHERE id='$id'; ";
	mysql_query($sql_query, $dbLink);
?>

So, you are adding the extra two lines before you run your query string as you are playing with Unicode.

Step Six: SEARCHING DATA FROM THE DATABASE

<?php
	mysql_query("SET character_set_results=utf8", $dbLink);
	$sql_query = "SELECT * FROM TABLE_NAME WHERE id='$id'; ";
	$dbResult = mysql_query( $sql_query, $dbLink);
?>

Adding the one extra line every time you search your Unicode data is enough.

OKKK.
You are done. This should work smoothly for handling your data in any language does not matter it is Bangla (my mother tongue), Hindi, Chinese, French, German, Spanish, Russian, Arabian (Arabic), Urdu, or any other language.

And do not forget to leave a comment if you have any. Because I need to update the post in case required.

Thanks for reading and please check if it works for you.

posted under MySQL, PHP | 88 Comments »