TutWow » HTML/CSS

Create a Simple and Secure Contact Form with jQuery and PHP

Ben Lind — Sat, 21 Jan 2012 20:45:55 +0000

Today we will be creating a simple yet secure contact form with PHP and Javascript. I have used this contact form on multiple websites, and I find it to be very easy to use and install, so you should enjoy it.

See the final result in action.

Download the files for this tutorial.

Step 1 – Download the Files

Before we get started, go download the following javascript files:

The latest minified version of jQuery
The jQuery Validate plugin (click the Download link on the page, unzip the downloaded file, and then copy out the jquery.validate.js file)
The jQuery Form plugin

After you have downloaded those three files, place them in a folder named js in the directory where you want to have your contact form. Now you’re ready to start crafting the contact form!

Step 2 – HTML

First off, make sure that you have a basic understanding of HTML, PHP, and Javascript. W3schools.com is a great resource for quickly getting up to speed with these languages. Once you have a grip of these technologies, you should be able to understand what is going on in this tutorial much better.

To start off, create a new file on your server named contact.html. It can be named whatever you want (or you can add the contact form to an existing file), but for the sake of this tutorial we will use contact.html.

In this file, add the following code:



	
		Contact Form

		

		
		
		
		
	
	
		
			Contact Sweetness
			
				
					
						Name:
						
					
					
						Email:
						
					
					
						Message:

This code contains the structure for our contact form. Let’s take a look at what each section is doing.



	
		Contact Form

These lines set up the basic structure of the HTML document, and they should be second nature to you.

First we include the CSS stylesheet that we will be creating shortly, and then we proceed to include all three of the javascript files that we just downloaded into the js folder. The last line is including contact.js, a file we will create later on.

	
	
		
			Contact Sweetness

This ends the head and starts the body of the page. We set up a “wrap” div that will be used to style the contact form with CSS later on, and add a heading at the top of the new div. Then we start the form that will contain all of the inputs where the user will type in their info and message. The action of the form is set to processForm.php, another file which we will create later on. The reason we add this file to the action attribute of the form instead of just doing all of the processing with javascript is that someone without javascript enabled will be able to use the form as well as someone with javascript enabled. The key here is progressive enhancement, or making sure that users with less capabilities will still be able to use your website. Always start by coding for the lowest common denominator – users who don’t have javascript in this case – and then adding better functionality for users with better browsers/more capable systems.

				
					
						Name:
						
					
					
						Email:
						
					
					
						Message:

These lines contain the actual input areas for the contact form. As you can see, I am using a table to format the form, even though tables are typically frowned upon in the design community. I find that in certain situations, when I want to easily align different elements in nice grids, tables are just the easiest option, but you can of course use divs if that’s what you prefer. Each input element has both an id and a name which are needed for processing the input with javascript and PHP and for styling the form with CSS. We’ll see how all of these values work together soon.

Here we are basically just closing all of the tags that we opened up above. However, line 36 contains a new “response” div that will contain the response of the processForm.php file when we try to submit a message to it. Again, you will see how this comes into play soon.

Now that you have this basic HTML structure, you should see something like this when you open up contact.html in your browser:

It’s not too pretty yet, but that’s where the next step comes in…

Step 3 – CSS

I always love it when I get to the CSS portion of my designing. There’s something about taking an ugly and deformed hunk of content and crafting it to beautiful pixel perfection that just sets my heart to racing. Okay, that might be going a bit far, but that’s not really all that far off.

Start by creating a new file next to contact.html named style.css. Remember that line in the head of contact.html where we included style.css? Yup, this is the very same one. What a funny coincidence. Anyway, in this new css file, put in this code:

body {
	background: #24333d;
	color: #4a606f;
	font: 21px 'Helvetica', 'Arial', sans-serif;
	margin: 0;
	padding: 50px 0 0;
}

h1 {
	color: #24333c;
	font-size: 48px;
	font-weight: normal;
	margin: 25px 0 15px;
	text-align: center;
}

#wrap {
	background: #eaf0f4;
	border: 5px solid #7a91a1;
	margin: auto;
	width: 500px;
}

form {
	padding: 0;
	margin: 0 0 20px;
}
table {
	margin: 0 auto;
}
tr, td, input, textarea {
	margin: 0;
	padding: 0;
}
td {
	padding: 0 0 5px;
}
tr td:first-child {
	padding-right: 10px;
	padding-top: 11px;
	text-align: right;
	vertical-align: top;
}
.error[generated=true] {
	color: #dc0000;
	font-size: 16px;
	padding: 5px 0 2px 5px;
}
tr.error td {
	padding: 0;
}
input, textarea {
	background: #FFF;
	border: 3px solid #7a91a1;
	font: inherit;
	font-size: 16px;
	line-height: 29px;
	min-height: 30px;
	padding: 5px 10px;
	width: 300px;
}
input:focus, textarea:focus {
	border-color: #b0c3d0;
	outline: none;
}
textarea {
	height: 240px;
	resize: vertical;
}
input[type=submit] {
	background: #24333d;
	color: #FFF;
	font: inherit;
	padding: 7px 20px;
	width: auto;
}

#response {
	margin-bottom: 20px;
	text-align: center;
}
#response .success {
	color: #08a300;
}
#response .failure {
	color: #dc0000;
}

Now I could go through each selector and tell you exactly what everything in here does, but that would ruin the fun of you figuring it out yourself (plus it would take a long time for me to write and for you to read, which would be boring for everyone). So take a look at it yourself and see if you can figure out everything that’s going on. If you run into something you don’t understand, there’s this amazing tool that can help you with basically every aspect of coding that you should take a look at. It’s a lifesaver and you should learn to use it if you ever want to get anywhere with your web design.

Some of the things in that CSS have to do with errors and responses, and you probably don’t know what those mean yet. Don’t fret, my friend, for soon you will be an expert on errors and responses – just as soon as we take a look at the javascript portion of this contact form. Now you should have something that looks like this if you refresh contact.html:

Not too bad!

Step 4 – Javascript

Now we get to the fun part – making everything actually work (to some extent)! More specifically, by adding javascript to this contact form, we will be adding validation (making sure the user enters acceptable things into the different fields) and ajax in a nice blend of usefulness. You’ll see what I mean soon enough.

Remember when we referenced contact.js in the HTML file? That’s right, now it’s time to create it! Here we go: inside the js folder that you created in step 1, create a new file and name it contact.js. This will hold all of our jQuery goodness. More specifically, it will look like this:

$(function() {
	// Validate the contact form
  $('#contactform').validate({
  	// Specify what the errors should look like
  	// when they are dynamically added to the form
  	errorElement: "label",
  	wrapper: "td",
  	errorPlacement: function(error, element) {
  		error.insertBefore( element.parent().parent() );
  		error.wrap("");
  		$("").insertBefore(error);
  	},

  	// Add requirements to each of the fields
  	rules: {
  		name: {
  			required: true,
  			minlength: 2
  		},
  		email: {
  			required: true,
  			email: true
  		},
  		message: {
  			required: true,
  			minlength: 10
  		}
  	},

  	// Specify what error messages to display
  	// when the user does something horrid
  	messages: {
  		name: {
  			required: "Please enter your name.",
  			minlength: jQuery.format("At least {0} characters required.")
  		},
  		email: {
  			required: "Please enter your email.",
  			email: "Please enter a valid email."
  		},
  		message: {
  			required: "Please enter a message.",
  			minlength: jQuery.format("At least {0} characters required.")
  		}
  	},

  	// Use Ajax to send everything to processForm.php
  	submitHandler: function(form) {
  		$("#send").attr("value", "Sending...");
  		$(form).ajaxSubmit({
  			target: "#response",
  			success: function(responseText, statusText, xhr, $form) {
  				$(form).slideUp("fast");
  				$("#response").html(responseText).hide().slideDown("fast");
  			}
  		});
  		return false;
  	}
  });
});

Yes, that’s a lot of code to wade through. Let’s get into it.

$(function() {

If you have used jQuery before, this should look very familiar. This is jQuery’s way of waiting until the page is loaded to execute something. Anything inside the function’s curly brackets will run as soon as the page has finished loading.

// Validate the contact form
  $('#contactform').validate({

This is telling the Validate plugin that we downloaded and included earlier to validate the #contactform form. By using a plugin instead of validating everything ourselves, everything is just easier for everyone.

// Specify what the errors should look like
  	// when they are dynamically added to the form
  	errorElement: "label",
  	wrapper: "td",
  	errorPlacement: function(error, element) {
  		error.insertBefore( element.parent().parent() );
  		error.wrap("");
  		$("").insertBefore(error);
  	},

Though the validate() function works great without any help, we need to give it some extra info so that it will display everything nicely. These first few options deal with where we should display errors when the user types in something they shouldn’t. You can read about all of the possible options on this page.

Here’s what the different arguments do:

errorElement: What element the error message will be placed in. The reason I chose to put it in a label is so that if the user clicks on the error, it will automatically focus the correct text box for them.
wrapper: Basically like errorElement – it wraps the error, including the label, in a td tag.
errorPlacement: A function that specifies where the error should be placed after it is generated. It looks complicated, but really all we are doing is putting it in a tr element next to the tr that the input box is in, and adding an empty td tag before the error to push the error to the right. You’ll see what I mean if you take a look at the code of the page after an error is generated.

  	// Add requirements to each of the fields
  	rules: {
  		name: {
  			required: true,
  			minlength: 2
  		},
  		email: {
  			required: true,
  			email: true
  		},
  		message: {
  			required: true,
  			minlength: 10
  		}
  	},

The rules option specifies the details of each input element in the contact form. As you can see, every one of the inputs is required, and the name and message text boxes have minimum amounts of characters allowed. The email text box has a special parameter which tells the Validate plugin that it is an email element. This ensures that any email entered into the form will truly be an email and not just something like “asdf.”

  	// Specify what error messages to display
  	// when the user does something horrid
  	messages: {
  		name: {
  			required: "Please enter your name.",
  			minlength: jQuery.format("At least {0} characters required.")
  		},
  		email: {
  			required: "Please enter your email.",
  			email: "Please enter a valid email."
  		},
  		message: {
  			required: "Please enter a message.",
  			minlength: jQuery.format("At least {0} characters required.")
  		}
  	},

As you can see, this messages option looks suspiciously like the rules option we just looked at. The reason for this is that in this option we specify what error messages to show the user when they break one of the rules we just set up. For example, if the name that they enter doesn’t meet the minimum length requirement, it will say “At least 2 characters required.”

  	// Use Ajax to send everything to processForm.php
  	submitHandler: function(form) {

This line of code is yet another option that we’re passing the Validate plugin, this time specifying what should happen when the form is submitted (with no errors). Let’s take a look at what’s going to happen when the Send button is clicked:

$("#send").attr("value", "Sending...");

So when the form is submitted, we begin by changing the text in the submit button from “Send!” to “Sending….” The reason for this is that the Ajax server request takes a few seconds, so we want to make sure that the user knows something’s going on.

  		$(form).ajaxSubmit({
  			success: function(responseText, statusText, xhr, $form) {
  				$(form).slideUp("fast");
  				$("#response").html(responseText).hide().slideDown("fast");
  			}
  		});

The cool thing about this form is that it doesn’t reload the page when the Send button is pressed, it just sends the email asynchronously (in the background). It’s called using Ajax, and it’s pretty nifty. These lines of code use the other plugin we downloaded at the start – the Form plugin – to do all the Ajax kungfooery. We pass just one parameter to the ajaxSubmit function: success. This tells the form what to do when the form is submitted successfully. In there we tell the entire form to hide itself by sliding up, and we then insert the response text into the #response div.

Here’s how it works: The user fills in the form and hits the send button, and the content is sent to processForm.php to be emailed. If there are no errors with the sending of the email and it is sent successfully, the processForm file sends back a message to contact.html saying “Success!” However, if there is an error along the way, it sends back a “Failed!” message. This message (either success or failure) is then put into the #response div.

That’s it for the javascript! Now the form should validate correctly, and if you type in some bogus information, it will give you pretty errors like this:

Step 5 – PHP

We’re onto the final section of our little contact form – PHP! The purpose of the PHP is first off to actually send the message that the user typed into the form, and secondly to do some additional error validation. Why do we need to do more validation, you ask? Why can’t we just rely on the javascript to catch everything? Well, think about what would happen if the user doesn’t have javascript enabled when they submit the form – no errors will occur! All of their data, including anything that might be erroneous, will be emailed to you, and that’s not what you want. So we’re forced to repeat all of the validating that we did before in javascript, this time in PHP. Here we go!

Create another file – the final file – and name it processForm.php. In it, put the following code:

 $value) {
	if(ini_get('magic_quotes_gpc'))
		$_POST[$key] = stripslashes($_POST[$key]);

	$_POST[$key] = htmlspecialchars(strip_tags($_POST[$key]));
}

// Assign the input values to variables for easy reference
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];

// Test input values for errors
$errors = array();
if(strlen($name) < 2) {
	if(!$name) {
		$errors[] = "You must enter a name.";
	} else {
		$errors[] = "Name must be at least 2 characters.";
	}
}
if(!$email) {
	$errors[] = "You must enter an email.";
} else if(!validEmail($email)) {
	$errors[] = "You must enter a valid email.";
}
if(strlen($message) < 10) {
	if(!$message) {
		$errors[] = "You must enter a message.";
	} else {
		$errors[] = "Message must be at least 10 characters.";
	}
}

if($errors) {
	// Output errors and die with a failure message
	$errortext = "";
	foreach($errors as $error) {
		$errortext .= "".$error."";
	}
	die("The following errors occured:". $errortext ."");
}

// Send the email
$to = "YOUR_EMAIL";
$subject = "Contact Form: $name";
$message = "$message";
$headers = "From: $email";

mail($to, $subject, $message, $headers);

// Die with a success message
die("Success! Your message has been sent.");

// A function that checks to see if
// an email is valid
function validEmail($email)
{
   $isValid = true;
   $atIndex = strrpos($email, "@");
   if (is_bool($atIndex) && !$atIndex)
   {
      $isValid = false;
   }
   else
   {
      $domain = substr($email, $atIndex+1);
      $local = substr($email, 0, $atIndex);
      $localLen = strlen($local);
      $domainLen = strlen($domain);
      if ($localLen < 1 || $localLen > 64)
      {
         // local part length exceeded
         $isValid = false;
      }
      else if ($domainLen < 1 || $domainLen > 255)
      {
         // domain part length exceeded
         $isValid = false;
      }
      else if ($local[0] == '.' || $local[$localLen-1] == '.')
      {
         // local part starts or ends with '.'
         $isValid = false;
      }
      else if (preg_match('/\\.\\./', $local))
      {
         // local part has two consecutive dots
         $isValid = false;
      }
      else if (!preg_match('/^[A-Za-z0-9\\-\\.]+$/', $domain))
      {
         // character not valid in domain part
         $isValid = false;
      }
      else if (preg_match('/\\.\\./', $domain))
      {
         // domain part has two consecutive dots
         $isValid = false;
      }
      else if(!preg_match('/^(\\\\.|[A-Za-z0-9!#%&`_=\\/$\'*+?^{}|~.-])+$/',
                 str_replace("\\\\","",$local)))
      {
         // character not valid in local part unless
         // local part is quoted
         if (!preg_match('/^"(\\\\"|[^"])+"$/',
             str_replace("\\\\","",$local)))
         {
            $isValid = false;
         }
      }
      if ($isValid && !(checkdnsrr($domain,"MX") || checkdnsrr($domain,"A")))
      {
         // domain not found in DNS
         $isValid = false;
      }
   }
   return $isValid;
}

?>

That’s definitely the biggest file we’ve had yet. Let’s take a look at what’s going on.

 $value) {
	if(ini_get('magic_quotes_gpc'))
		$_POST[$key] = stripslashes($_POST[$key]);

	$_POST[$key] = htmlspecialchars(strip_tags($_POST[$key]));
}

This foreach statement is reading all of the variables in the $_POST array and sanitizing them. When you sanitize data, you make sure that it doesn’t contain anything harmful that could potentially hurt your website.

// Assign the input values to variables for easy reference
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];

As the comment states, all we are doing here is putting each $_POST option into its own variable. That way it will be easier to access the variables later on (less typing).

// Test input values for errors
$errors = array();
if(strlen($name) < 2) {
	if(!$name) {
		$errors[] = "You must enter a name.";
	} else {
		$errors[] = "Name must be at least 2 characters.";
	}
}
if(!$email) {
	$errors[] = "You must enter an email.";
} else if(!validEmail($email)) {
	$errors[] = "You must enter a valid email.";
}
if(strlen($message) < 10) {
	if(!$message) {
		$errors[] = "You must enter a message.";
	} else {
		$errors[] = "Message must be at least 10 characters.";
	}
}

Here we have the actual error testing for each of the variables we just initiated. As you can see, we are basically just performing all of the tests that we did in the Javascript. Every time we encounter an error, we pass the appropriate error message to the $errors array so that we can output all of the errors to the user.

if($errors) {
	// Output errors and die with a failure message
	$errortext = "";
	foreach($errors as $error) {
		$errortext .= "".$error."";
	}
	die("The following errors occured:". $errortext ."");
}

If there were any errors, we output them to the screen in a nicely formatted list, and then we kill the page using the handy die() function.

// Send the email
$to = "YOUR_EMAIL";
$subject = "Contact Form: $name";
$message = "$message";
$headers = "From: $email";

mail($to, $subject, $message, $headers);

// Die with a success message
die("Success! Your message has been sent.");

Now we get to actually send the email! Whoop! First we set all the appropriate variables (change “YOUR_EMAIL” to whatever email address you want the messages to be sent to), and then we use PHP’s built-in mail() function to send the email.

That last line (the die function) is very important. It tells the scrip to kill itself once the email is sent, which does one of two things. If the user has javascript enabled, this die function will send the success message contained in itself back to the javascript file we created in the last step, which will in turn update the #response div with the success text. However, if the user doesn’t have javascript enabled, the script will simply die and output the success message. It’s kind of like killing two birds with one stone, isn’t it?

// A function that checks to see if
// an email is valid
function validEmail($email)
{
   $isValid = true;
   $atIndex = strrpos($email, "@");
   if (is_bool($atIndex) && !$atIndex)
   {
      $isValid = false;
   }
   else
   {
      $domain = substr($email, $atIndex+1);
      $local = substr($email, 0, $atIndex);
      $localLen = strlen($local);
      $domainLen = strlen($domain);
      if ($localLen < 1 || $localLen > 64)
      {
         // local part length exceeded
         $isValid = false;
      }
      else if ($domainLen < 1 || $domainLen > 255)
      {
         // domain part length exceeded
         $isValid = false;
      }
      else if ($local[0] == '.' || $local[$localLen-1] == '.')
      {
         // local part starts or ends with '.'
         $isValid = false;
      }
      else if (preg_match('/\\.\\./', $local))
      {
         // local part has two consecutive dots
         $isValid = false;
      }
      else if (!preg_match('/^[A-Za-z0-9\\-\\.]+$/', $domain))
      {
         // character not valid in domain part
         $isValid = false;
      }
      else if (preg_match('/\\.\\./', $domain))
      {
         // domain part has two consecutive dots
         $isValid = false;
      }
      else if(!preg_match('/^(\\\\.|[A-Za-z0-9!#%&`_=\\/$\'*+?^{}|~.-])+$/',
                 str_replace("\\\\","",$local)))
      {
         // character not valid in local part unless
         // local part is quoted
         if (!preg_match('/^"(\\\\"|[^"])+"$/',
             str_replace("\\\\","",$local)))
         {
            $isValid = false;
         }
      }
      if ($isValid && !(checkdnsrr($domain,"MX") || checkdnsrr($domain,"A")))
      {
         // domain not found in DNS
         $isValid = false;
      }
   }
   return $isValid;
}

?>

This is a function that I found online (in this article) that validates email addresses. It is very handy, and I use it in a lot of my projects because it covers so many different possibilities. If you want to, you can look through and see what it’s doing, but if you’re like me and don’t really care, you can just treat it like a black box and feed it email addresses. It works, believe me.

Conclusion

And that’s it! Now you know how to code a simple and secure contact form that you can easily implement on your own websites. It looks great, is very functional, and has good error checking – what more could you want?

See the final result in action.

Download the files for this tutorial.

CSS Remove Textarea Scrollbar

Ben Lind — Thu, 23 Jun 2011 18:33:58 +0000

One of the frustrations of browser testing is that Internet Explorer often renders elements of the page in ways you would never expect. One such example is in scrollbars on textareas. IE (and some other browsers) likes to throw scrollbars into your textareas even when they’re not necessary.

Thankfully, there is a very simple and easy way to fix this.

The Solution

To fix this little annoyance, just add this one line of code to your textarea’s CSS:

textarea {
     overflow: auto;
}

That’s it! Easy, right? Now the scrollbar will only show when it’s necessary. In other words, it will be invisible until enough text is written in the textarea to grow beyond its bounds, in which case the bar will be shown.

Want to really kill that scrollbar?

Just add this line of code to your textarea’s CSS, and the scrollbar will never be shown, even if the user fills up the textarea!

textarea {
     overflow: hidden;
}

I wouldn’t recommend doing that unless you have a good reason, though, because you won’t be able to see what you’re typing into a textarea with that CSS. It can be useful sometimes, though. Try it out!

Set a Page on Fire with Photoshop and CSS

Ben Lind — Fri, 17 Jul 2009 19:28:20 +0000

Final Result

This tutorial will teach you how to set a web page on fire with Photoshop and CSS. Here’s a preview of what it will look like:

If you want to see it in action, you can go to this page.

Step 1

For the purpose of this tutorial, we will be creating some very basic fire to demonstrate the effect. If you play around on your own, I’m sure you can come up with some much better looking fire.

To start off, open up Photoshop and create a new document 500px wide and 300px tall. Reset your foreground/background colors by pressing D, and go to Filter > Render > Clouds. You should now have some nice black and white clouds like below:

Step 2

To colorize the clouds to look more like fire, press Ctrl + U (Image > Adjustments > Hue/Saturation) to bring up the Hue/Saturation dialog. Inside this dialog, enter these settings:

This will give the fire a nice orange glow:

Step 3

What we want to do now is make this fire texture into a pattern that we can tile across the web page in a later step. To do this, go to Filter > Other > Offset, and enter these settings:

This will “offset” our texture so that we can see the seam that makes it look horrible when we try to tile it. We need to remove this seam so that the texture will run together smoothly later.

Take the Healing Tool (J), alt + click on some part of the texture other than the seam, and click and drag over the seam to “heal” it. If this doesn’t work completely, you may need to use the Blur Tool (R) and blur out the rest of the seam.

Your texture should now look something like this:

Step 4

The last thing we need to do with this texture is fade it out towards the top. Double-click on the Background layer (it should be the only layer), and press ok in the dialog that pops up to unlock the layer.

Press Q to enter Quick Mask Mode, take the Gradient Tool (G), and draw out a linear gradient starting from the bottom of the image and stretching up to almost the top. Press Q again to exit Quick Mask Mode, and then press the Delete key to clear the selection. This will make the texture fade out like below:

Our fire texture is now complete. Press Ctrl + S to save the image to your hard drive. While you’re at it, you should create a new folder someplace where you can keep all of the files you use for this tutorial. Save the image as a PNG file, and name it “fire.png”.

Step 5

Open up your favorite text editor (I use Coda while I’m on a Mac, but any old text editor like TextEdit or Notepad will do) and type in some basic HTML:




 
 
 Fire Page

All this is doing is setting up the page with all of the necessary tags that every HTML page has. The title of the page is “Fire Page”, and we are including an external CSS file, “style.css”, which we will create later, in it.

Step 6

Inside the body of the page, insert this line of code:

This one line is all we need to set up the fire effect. The real work is done in the CSS file that we will create.

To make the example interesting, put in a bunch of Lorem Ipsum text after the

line. I just went to http://www.lipsum.com/, a Lorem Ipsum text generator, and created 15 paragraphs of dummy lipsum. Then I copied the paragraphs into my HTML file and wrapped each one in

tags.

Save the HTML file we’ve been working on as “index.html”, and put it into the same folder as the image (fire.png) we created before.

You should now have a bland page with a bunch of text in it. Not much, but the fun is just beginning…

Step 7

Now create a new text file. This will be the CSS file that styles index.html. Inside this new file, put in this text:

body {
 background: #000;
 color: #FFF;
}

This styles the page so that the background color is black and the font color is white. This will make our fire texture really stand out from the rest of the page. After the above code, enter this text:

#fire {
 background: transparent url(fire.png) repeat-x;
 position: fixed;
 left: 0;
 bottom: 0;
 height: 300px;
 width: 100%;
 z-index: 999;
}

First, this sets the background of the #fire div to the fire.png file we created before. Then, it sets the position, height, and width of the div so that it covers the entire bottom of the page. The last line makes sure that the fire div is always on top of all other content on the page.

Save this file as style.css, and make sure it’s in the same directory as the index.html and fire.png files.

Final Result

That’s it! If you open up index.html in a web browser, you will see this result. Notice that if you scroll down on the page, the fire will stay hovering over the bottom of it. It’s a very versitile effect that you can use for lots of different effects.

Enjoy!

Solving the CSS Padding Problem

Ben Lind — Tue, 11 Nov 2008 03:25:07 +0000

I remember when I first started using CSS, something really ticked me off. That was that when I had an HTML file with a div in it, and I wanted to add some padding to that div, not only did the content inside of the div get “padded”, but the whole div increased in size. As you can imagine, this got really annoying, until one day I found the solution to the problem.

Let’s start with an example of the problem. If I have the following HTML code:



	
		CSS Padding Problem
		
	
	
		I want this content to be padded.

And the following CSS:

body {
	margin: 0;
	padding: 10px;
	background: #EEE;
}
#padded {
	width: 950px;
	margin: auto;
	background: #FFF;
}

Then I will get this result. It looks pretty bad, because the div doesn’t have any padding on it. This is where we run into the problem. Here’s what I mean – if I edit the style.css file and add a “padding: 20px” to the #padded selector, then my CSS file will look like this:

body {
	margin: 0;
	padding: 10px;
	background: #EEE;
}
#padded {
	width: 950px;
	margin: auto;
	background: #FFF;
	padding: 20px;
}

And in a web browser, the result of that change would look like this file. Looks pretty good, doesn’t it? However, if you switch back and forth between the first example and the second example, you’ll see that the div in the second example is a bit wider (40px exactly) than the first one.

By now you might be thinking “So what? What’s the big deal with a div that’s a little bit wider than it should be?” True, for some templates that you create, it won’t matter if a div is wider than it should be. However, for designs that are more precise – i.e. they have been designed to be pixel-perfect – a little div width change could cause a lot of trouble.

So how do we fix this problem? Well, there is a surprisingly simple way to fix this problem, and that is by wrapping the #padded div inside another div. Here is what I mean – the new HTML file will look like this:



	
		CSS Padding Problem
		
	
	
		
			I want this content to be padded.

And the new CSS file:

body {
	margin: 0;
	padding: 10px;
	background: #EEE;
}
#container {
	width: 950px;
	margin: auto;
	background: #FFF;
}
#padded {
	padding: 20px;
}

As you can see, what I did is just wrap the #padded div inside another div called #container, and then moved all of the styles for the #padded div – except for the “padding: 20px” – to the styles for the #container div.

Take a look at the finished, “fixed”, padding example. A very easy solution to a maybe not-so-easy problem.

As an Update, I found one shortcut list of CSS tricks from my web hosting friend. This is simple but a good refresher.

Quick Tip: CSS 100% Height

Ben Lind — Thu, 11 Sep 2008 17:53:39 +0000

I don’t know about you, but I always get frustrated trying to figure out how to get my layout to stretch vertically to 100% of the page. I have a div that I want to stretch, but it just doesn’t stretch. Now why wouldn’t it do that? Today I will share the solution with you.

Say you have coded an HTML file like this:

CSS 100% Height

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.

Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.

Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero. Morbi eu porttitor ipsum. Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus.

Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero. Morbi eu porttitor ipsum. Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Pellentesque aliquam lacinia tellus sit amet bibendum. Ut posuere justo in enim pretium scelerisque. Etiam ornare vehicula euismod. Vestibulum at risus augue. Sed non semper dolor. Sed fringilla consequat velit a porta. Pellentesque sed lectus pharetra ipsum ultricies commodo non sit amet velit. Suspendisse volutpat lobortis ipsum, in scelerisque nisi iaculis a. Duis pulvinar lacinia commodo. Integer in lorem id nibh luctus aliquam. Sed elementum, est ac sagittis porttitor, neque metus ultricies ante, in accumsan massa nisl non.

And you have a CSS file like this:

body {
	margin: 0;
	padding: 0;
}
#content {
	background: #EEE;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 0 20px 0 20px;
	margin: auto;
	font: 1.5em arial, verdana, sans-serif;
	width: 960px;
	height: 100%;
}

That gives you this example file. As you can see, the content box on that page doesn’t stretch to the whole height of the page, even though we added the “height: 100%;” line to the CSS file. Why is that?

Let me give you a different way of thinking about HTML. HTML is pretty much just a bunch of containers stacked inside each other. So in our page, first we have the container, then the container inside of that, and finally the

container inside of that. When we put content into one of those boxes, it stretches that box and all the boxes containing that box so that they can hold the new content. So when we put our text into the

box, that box streches, which in turn stretches all of the boxes that it is in (in our case the and boxes).

When we put the “height: 100%;” style onto the

box, what we are doing is telling it to stretch to the full height of the box that it is in. In this example, the box that it is in is the box. So the

box is 100% of the height of the box. Well, how tall is the box? It’s just as tall as the

box, because we never told it how tall it should be! So when we put the “height: 100%;” style onto the

box, we are just telling it to be as tall as itself!

To fix this, we need to tell the box to get bigger. But then we run into the same problem with the box – it is only as big as the box! So to fix our problem (to get the

box to stretch the whole height of the page), we need to tell the and boxes to be the full height of the page.

So if we change our CSS file to this:

html {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
#content {
	background: #EEE;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 0 20px 0 20px;
	margin: auto;
	font: 1.5em arial, verdana, sans-serif;
	width: 960px;
	min-height: 100%;
}

And that’s it! This is what we have now. The content box is now stretched to the full height of the page!

Update: Thanks to some very helpful comments, I have updated the final CSS so that the #content div now has “min-height: 100%” instead of just “height: 100%”. This is so that if the content of the #content div extends beyond the height of the window, the background will expand as well.

My Coding Style

Ben Lind — Wed, 18 Jun 2008 15:34:21 +0000

Over the past few years, I have learned many different programming languages. Having typed program after program (“Hello World” after “Hello World”), I have come up with a very specific programming style for formatting my code. Instead of just throwing a bunch of code into a text editor – hoping that I can decipher it when I look at it again in a few months – I carefully indent all of my code to the correct width, and use a lot of comments. Below, I have put together some of my most-used practices so that you can (hopefully) benefit from and build off of them.

1. Indenting Two Spaces

One of the most obvious ways to make your code more readable is to indent all of your lines to the correct width. I usually use two spaces for my tabs, an option you can specify in most text editors.

2. Code Bracket Placement

As I said before, it’s always nice to keep your code style the same throughout all of your code. One of the things I am a little “finicky” about is the placement of the code brackets that surround my code blocks (if statements, while loops, etc.).

I place my beginning bracket one space after the ending parenthesis of the code block header. Take a look at this image to see what I mean:

3. Comment, Comment, Comment

Alright, I admit it, I’m a comment freak. I go wild with comments all over the place, and I have descriptions of almost every line of code in my files. I find that if I stick to one format for all of my comments, it makes the overall readability a whole lot better.

When I comment whole sections of code, using the comment as a sort of “header”, I put my header text inside a multi-line comment, and place this right before the beginning of the section of code that I’m describing.

When describing just a single line, I use a single-line comment, and tab it one or two tabs from the line I’m describing – like this:

4. Parenthesis and Brace Padding

To make my code more readable, I add spaces inside all of my parentheses and square braces as a kind of “padding” for them. This can look strange at first, but if you get used to it, you’ll see how much more readable it can make things.

Conclusion

I hope that everyone who reads this post gets something out of it, and applies it to their own coding. Now don’t misunderstand me – this is not the only way to format your code – there are so many different ways you can do this, and the important thing is that you find the style that you’re comfortable with and stick with it.

Until next time, happy coding!

HTML Code Export

Ben Lind — Sun, 25 May 2008 01:33:19 +0000

This is a message to all of you HTML coders out there who have spent hours indenting their code lines so that they look just right, only to get them messed up again. I know how you feel! I’m one of those people who need to have their code indented to just the right length so that I can think straight.

Well, now there’s a solution. I’ve been searching around the web, and I just stumbled onto this program called HTML Code Export. What it does (or what I use it for) is it takes HTML code that you enter, and it indents everything so that it’s nice and tidy. Pretty slick, huh? I can’t believe I didn’t think of this earlier – it would have saved my hours of headaches!

Make sure to hop over to the download site, and get your copy of this amazing time saving program now!