Faux Columns

Making 2 or more side by side columns the same height regardless of the amount of content in the individual columns is one of the perplexing issues facing the novice or hobby web designer. Most first time efforts involve setting the height on all the columns the same, trying to make them just tall enough to work…but it doesn’t.

First, setting heights in div tags have some pitfalls and should be discouraged in most cases. One of the methods to create even height div tags is called Faux Columns, which involves creating a background image that will give the illusion of even heights.

Lets take a look at a page I created to illustrate how faux columns work. It’s not pretty as I used some pretty bright colors, but it should get the lesson across.

Faux Test Page

First, you will notice I have centered the page. I have a header then we have a container div. This holds the 3 columns that we will apply the background image to.

This is the CSS for the container div, as this is where all the rules for creating the faux columns:

#container {
width:800px;
margin:auto;
background-image:url(images/fauxtest.png);
background-repeat:repeat-y;
overflow:hidden;
}

You see this line: background-image:url(images/fauxtest.png);, which is an image that looks like this:

faux image small

The image width is the same as the container div, and the different colors of the background image are the same widths as the individual columns or divs.

We have this image set to repeat-y, or vertically. It is set in the container and the overflow is set to hidden. This will make the image repeat vertically to the tallest div, which means the other 2 divs in my example will have the background color also set to the tallest div.

So again, if you look at the example page, you will see I set the content, or the text to different heights, but all of the columns appear to be even heights.

What you should do is to open the sample page, view the source, copy the code and paste it into a new page. Download the image, here and put it in your images folder. Put the page on your server and viola, you have a faux column page. It is a good idea for you to change some settings, add/remove content to get some familiarity with the rules.

So if you are creating a page with two columns or four or more, the principle remains the same. Create an image that will be your background image, have the widths of the different colors of this image the same as the widths of your columns or divs. Place that image in your container div, have it repeat-y and set the overflow to hidden, and you are done!

There are some other examples you can get from the sample page, such as I also created a mini-faux column in the right column as well as examples of floating divs in within other elements.

Hopefully you found this helpfully for you.

Centering your web page

One of the most common questions posted on help board for developing a web site is how to center the content of your page. In HTML, the default alignment is left, so unless you set the rules for overriding the default, you page will stay left.

Fortunately, it is very easy.

First lets open a new page, and you should see this:

<!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>Untitled Document</title>
</head>

<body>
</body>
</html>

In between the head tags, type the following:

<style type=”text/css”>

</style>

So now your new page looks like this:

<!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>Untitled Document</title>

<style type=”text/css”></style
</head>

<body>
</body>
</html>

So we are going to create a new <div> and call it container. So we now enter this code and insert some sample content so the div will appear. This line of code will go in between the body tags:

<div id=”container”>Sample content goes here</div>

One last item and you will be ready to give it a test run. In between the script tags that you have already inserted into the head, enter the follow code:

#container {
width:900px;
margin:0px auto;
border:#cccccc 1px solid;
}

The code you have just entered is your Cascading Style Sheet, or CSS rules. We have told the browser that there is a <div> called container, it is 900 pixels wide, and the margins are set to 0 and auto, which is the centering rule. We have also added a border, this was done so it was easier for you to see.

So now your code page should look like this:

<!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>Untitled Document</title>
<style type=”text/css”>

#container {
width:900px;
margin:0px auto;
border:#cccccc 1px solid;
}

</style>
</head>

<body>
<div id=”container”>Sample content goes here</div>
</body>
</html>

And your page will look like this(Click Here)

A few points of explanation. The hash mark, # , is used in CSS to give an ID to an element, in this case a division tag <div>. You can also create CSS rules with class rules. All you would need to do with that is to replace the hash mark #, with a period . , and you have a class rule. One of the main differences is that with an ID, there can only be one per page, with a class rule, there can be as many as you want.

For you to center an element, you must declare a width and set the margins to 0 and auto. The width can also be a percentage as opposed to a fixed width like in the example. It is not a bad idea for you to change some of the rules around to see what the result is.

If you notice, the <div> is centered, but the text is not. If you want to center your text, you would add another rule to your container set of rules like this:test-align:center;

And your text will then be justified center.

I hope you found this helpful, there is more information on the next page about division tags and faux columns.

Securing your Contact Form

In the lesson before about making your contact form work, there was a warning on the bottom that said you should apply some security measures to your new script. Here we are going to outline some of the measures available to you, but it is in no way complete.

We will be talking about taking some measures to stop an e-mail injection attack, if you add a database to your script, there are other measures that you would want to take, but for this we are just talking about email injection attacks.

E-mail injection attacks usually involve the attacker inputting information into your form that the server will interpret as code, and not data, which can give the attacker the ability to use your site as a point of spam. Most of these attacks involve injection code to the headers of the script, giving them the ability to then send out thousands of emails from your account. This usually prompts a nasty notice from your host and could result in your host canceling your account, not very nice!

With injection attacks of a database, there is the potential for theft of data, loss of data, or a corruption of the database itself, so there are more measures and more robust measures created to stop the attacks, but again, this tutorial is dealing with e-mail injection attacks.

 

What they don’t know won’t hurt you.

Honey Pots

A honey pot is a very effective tool for stopping spam and injection attacks. Basically a honey pot employs inserting an hidden input field into your form, in your processing script you kill the script if the field is changed. The input field will be invisible to the human, but the evil bots will recognize an input field, and insert their spam message or malicious code, and the script dies.

We have 3 parts to the honey pot, one is in the HTML, one is in the PHP, the last is in the CSS.

  • In the html, within your form tag, insert the following:

    <div id=”important”>
    <label>Address</label>
    <input type=”text” name=”address” id=”address” />
    </div>

Here we have inserted a div tag named important with the input field called address.

  • In the CSS:

    <style type=”text/css”>
    #important {
    visibility: hidden;
    height:15px;
    }
    </style>

Here we have made the div tag name important invisible to the human surfer.

  • In the php:
    <?php
    // checks if bot

This says if the input field of address is not empty, kill the script. You can do different variations of this script, such as enter a value then instruct php that if the field is changed, kill the process, or you can to both.

Capture the bad guys with captcha!

We have all seen this, you fill out a form and there is the set of distorted letters and numbers that you must enter into a field. I personally don’t care for it because my failure rate of typing the correct characters in is about 50/50, however it does work. It is a free service you sign up for and can apply it to your form.

Basically how it works is that bots have a hard time reading characters in images,so the form will die when the bad bots run into it.

captcha.net

More information about Captcha

Stop the submission with tell tale intent.

Many e-mail injection attacks try to fool the server into thinking that the data in the form is code from the processing script. Specifically, they will insert rn, which tells the server to create a new line, where they can then insert a new mail recipient, or many new recipients. The following is a script I wrote that checks to see if these characters are in your data, and kills the script:

<?php

$newlinecounter = 0;
foreach($_POST as $key => $val_newline){
if(stristr($val_newline, 'r')){$newlinecounter++;}
if(stristr($val_newline, 'n')){$newlinecounter++;}
if(stristr($val_newline, 'r')){$newlinecounter++;}
if(stristr($val_newline, 'n')){$newlinecounter++;}
if(stristr($val_newline, 'rn')){$newlinecounter++;}
if(stristr($val_newline, 'rn')){$newlinecounter++;}
if(stristr($val_newline, 'Bcc')){$newlinecounter++;}
}
if ($newlinecounter >= 1){ die('die scum die');} ?>

A couple of points about this script. If you notice I have single and double backslashes, this is because many times, because of other security measures, in particular, magic_quotes, will change the number of slashes. Since there is no reasonable legitimate reason to include any slashes in a form submission, I have included the single and doubles.

If you notice, I put the line of text ‘die scum die’ as a message to the spammers. This might be funny, but it could spur them on to accept your challenge, so putting any kind of “I got you” message is not a good idea.

Not so Fast!

A couple of years ago I had a site up with a database that was attacked. Fortunately, it was an old site that was not being used and there was no damage, so I was lucky.

There first clue that I had been attacked is there were multiple, probably hundreds of submissions to the form, within seconds of each other. Some bot was probing the security and submitting hundreds of times to get in. It was interesting to see how it systematically inserted variations of the same code to see which version would work.

So now seeing that, we have a script that will kill the processing if there are too many submissions within a certain time frame, say 30 seconds, and another that will kill the processing if the same computer is visits the processing page more than a certain number of times. In the sample, I have it set to 10.

The information is saved in session variables, so once the browser is closed, the scripts are dead and upon opening again, the count would start over again. This is good incase you have a legitimate submitter that is making mistakes and re-submitting.

First, at the top of your page, above the DTD, insert the following code:

<?php
if (!isset($_SESSION)) {
session_start();
}
?>

This tells the server that if a session has not been started, start one now. If the session is already started, it ignores this and moves on. The second part is your actual script.

if(!isset($_SESSION[‘count’]))
{
$_SESSION[‘count’] = 1;
$_SESSION[‘first’] = time();
}
else
{
// Increase the Count
$_SESSION[‘count’]++;
// Reset every so often
if($_SESSION[‘first’] < (time() – 30))
{
$_SESSION[‘count’] = 1;
$_SESSION[‘first’] = time();{
die (“Too many”);
}
}
$ip = $_SERVER[‘REMOTE_ADDR’];
$_SESSION[‘$ip’] = 1;
$cal = ($_SESSION[‘$ip’] / $_SESSION[‘$ip’]);
$cal++;
// Die if they have viewed the page too many times
//if($_SESSION[‘count’] > 10)
if (($cal)> 10);
{
die(“You have submitted to many times”);
}
}

If you notice, ,on this script, I have 2 different error messages, one being too many and You have submitted to many times. When I am writing multiple scripts like this, I like to change the error message because it helps if you need to go in and debug the code. Again though, I would change it to something like “Page not Found” and not a “I caught you trying to attack me” type statement.

A couple of final words on this tutorial and security.

  • Always check your form with every new security measure you install, you may find that you form is getting stopped when you don’t want it to be. You may find that some of your data that you want sent to you is being blocked by your new scripts. So check them on several browsers and computers.
  • This is not the end all on security. Spammers and attackers are full time positions by very trained people that spend all day thinking of new ways to break a security measure. You should stay up on the latest security tactics and if they fit for you, adapt them.
  • You should also do a search for anti-spam scripts for that can purchased or can be downloaded for free. Its a good idea to look some of them over and see if any fit your needs. This is a good choice if you are planning on having a database that would hold information that is critical to your business or clients business.

Making your contact form work.

A common question on the help boards is how to make your contact form on your web site send the information to you, the form owner or to who or what you want.

The following covers the basics of making a form work. It is meant as a starting point in the learning process.

Important, this page does not cover security of a form, which is essential! There is an accompanying page that gives your some basics of security that you should read! I very strongly suggest you read the second page before testing the code on this page live on the internet! There is a link at the bottom of the page, or you can click here.

There is more than one method and more that one language, however I will supply you with enough information and the code to accomplish making a form to process using php. Most of your better hosting companies provide a method, but I have read enough posts from people that were not able to make it work. You might need to check to see if your host supports php. Chances are if you are paying for your hosting service, then you should be fine. However if you are using a “free” hosing service or web hosting service that came with your ISP, you might have an issue, so you may need to check.

The basics of contact forms.

Contact forms are broken down in to two major components:

  • The html form, (there are other forms in other languages, but here we are just dealing with html) this is the contact form itself that your visitor inputs the information for which you ask .
  • The processing file or script, this is the instrument that the information is sent to your server and then sent on to where you tell it, be an e-mail to yourself, an email to the visitor confirming the submission, to a web page or to a database.

The second part is usually the one that gives the new designer trouble, but we will look at both.

Your Form in Code


<form id=”yourForm” name=”yourForm” method=”post” action=”” >

<p><label>First Name</label><input name=”fname” type=”text”/><br />

<label>Last Name</label><input name=”lname” type=”text”/><br />

<label>E-Mail</label><input name=”email” type=”text”/><br />

<input name=”submit” type=”submit” value=”Submit” /></p>

</form>

Your form on your page

First Name
Last Name
E-Mail Address

A couple of notes, if you look at the source code, you will notice that I put the form in a table, you can style it other ways if you prefer.

It is a very good idea to always have separate first name and last name input boxes if you are asking for a name. The reason being is that should you or your client want to add a database to the form, it is not a good idea to have a first and last name in one database column.

A common mistake for the newer designer is that they try to incorporate the mailto: link in the form. This is not the way you want to go, it does not work.

If we look at the first line of code in the form, you will notice two things:

  • Method=”post”: This is the method by which your information is transmitted. It will be transmitted to an associative array called $_POST. (Don’t get too lost in all that, just know it will work)
  • form action=””: In between the ” ” is where you will put the name of the file or script that we will use to process your information. Again, there are other methods, but we are going to keep it simple here

Lets make a processing script

Create a new .php page. If you are in Dreamweaver simply go up to File | New | Blank Page | php. You might notice that the php page looks just like you html page when you first opened it. That is because the file extension of .php only puts the server on notice that there may be some php to process. If you make your new page from html, it will not work.

In your body tag, type the following code (you can copy and paste, but the more time you spend with it, the better you will learn it).

<?php

$fname = $_POST[‘fname’];
$lname = $_POST[‘lname’];
$email = $_POST[’email’];

//Sending Email to form owner
$header = “From: $emailn”
. “Reply-To: $emailn”;
$subject = “Submission From My Form”;
$email_to = “[email protected]”;
$message = “name: $fname . $lnamen”
. “email: $emailn”;

mail($email_to, $subject ,$message ,$header ) ;

?>

Make sure you change the $email_to so it reads your email address and save this file as result.php, I usually just leave it in the root folder, and upload it to your server. We now go back to your form, and on line one, we change:

  • action=””
  • action=”result.php”

Upload this file to your server, give it a test run

It should have worked for you. But you will probably have noticed when you press the Submit Button, all that happened is all the information you had input disappeared. Not very nice! You really do not even know if it worked.

So lets add a message to your result.php page that will let the submitter know their information has been sent. After the closing php tag ?>, but still inside the <body> tag, you can now add any message you want in html. So lets add:

<h1>Thank You for Your Submission</h1>

<p> Your information has been sent, you will now receive our mailer, invitations and other tantalizing offers we have</p>

<p>Again, thank you for your interest in my new web site</p>

Now when your visitor presses the submit button, they see:

Thank You for Your Submission

Your information has been sent, you will now receive our mailer, invitations and other tantalizing offers we have.

Again, thank you for your interest in my new web site

Reminder, there is no validation or protection on this form, it opens the door to spam and other attacks. A submitter is not required to input an email address and can input anything they like with the form as written. There is no security on this form or script, if you were to add a database to this script, it would be very vulnerable to malicious attacks. It is strongly suggested you research form security, in particular if you are adding a database

To read the accompanying lesson on form security, click here!

Now for the bonus round, you have all the information here that you could create another email that could be sent to your newly acquired customer/friend that you could sent them a Thank You email. See if you can figure that out.

Hope this has been a help to you.