Archives August 2022

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.

The paulg difference!

With over 30 years of experience in sales and marketing and over 5 years experience in web site design, we tend to look at things more from a “how do we make it succeed” rather than a “how do I make it look”.

When planning your web site, we start with the primary goal of the site. Most web sites have one of three primary goals

  • Create or gather a lead
  • Bring in a (new) customer to your place of business
  • Sell a product directly from the web site

We don’t want to sell your product if your goal is to gather a lead, we want to “sell the action ” of them picking up the phone, filling out your form and hitting submit, or just e-mailing you.

Secondary Goals

Building and bolstering your image is always a goal. If your site looks old and incompetent, then so does your company.

Help to find and keep talent. Web sites are terribly underutilized in retention of employees. The cost of using your companies web site to help make key employees feel part of the team cost next to nothing, but can return huge rewards!

Call or write to find out more, never an obligation!…

Ad Layouts

One of the best ways to promote your web site is by 3rd party advertising. Traffic to a web site enjoys a significant increase when print ads are employed, in fact when you check the daily traffic patterns directly after an ad hits, you will notice huge new visitors to your site.

By matching your print plan to your web presence, you will be able to capture more of the viewing audience.

Whether you use a national magazine or a local paper to one of the mailers, paulgdesigns can help.

Logos

Graphic art work from logos to t-shirt designs, menus and of course graphic web designs. Call or write to ask us how.

Custom Web Design

Creating a custom web site is made easy by paulgdesigns. After our initial discussion on the goals of your new site, we then work on a design that will best accomplish these goals.

We also want to match your design to the latest technology available:

  • Dreamweaver, Flash, Photoshop, Fireworks
  • HTML, XHTML, CSS, PHP, MySQL
  • Action Script, JavaScript, AJAX, XML
  • Shopping Carts & E-Commerce
  • Blogs & CMS
  • Contact Forms & Databases
  • Site Tracking & Analytics

All PaulgDesign web sites are flexible and easy for the client to add content. We employ server side technologies that make it easy for content for the entire site to change with very little effort of expense.

We can also create your site to include a database to keep track of customers, web site visitors as well as for you to add timely information for your clients to view.

A Custom Web Site is probably less expensive and easier than you may think. Call or write for free quote.

Making your site Search Engine Friendly

If you have had a web site up for a while you know a couple of things already.

1. It is not easy to have your site listed in the top 10 Google search Results.

2. There are plenty of companies that will sell you a service for hundreds or even thousands of dollars per month to make that happen for you. (We suggest you don’t take them up on the offer.)

With the web growing at the rate of an estimated 1 billion pages per day, that is a lot of competition. And many of these people are trying to just be ahead of you and your site.

With PaulgDesigns, we employ some simple tricks of the trade to help you to get found, all without spending a ton of money, and all included in every web site we design.

Meta Tag Me

Meta tags are simple tags of code that all web sites have. Back in the beginning there was talk of color coding your meta tags so the blend in but the search engines find you. But the tooth fairy debunked that one. For the most part, meta keyword tags are meaningless, however there is a meta tag called the “description” meta tag that is very important. Google search engines read this tag on all sites the crawl.

Meta tags will not insure that you get found, but it does not hurt to put them in, and it does not cost you any extra money! At least not with PaulgDesigns!

Submit Me

Included with every PaulgDesign web site is your site being submitted to the major search engines. More important, we employ methods that make it easy for the search engine spiders and bots to find you.

Feed the Spiders

All search engines have little search bots or spiders that scour the web looking for content. These little search engines find new sites and sites that have been modified to put the data in their databases. Some things the spiders like, some things they don’t. One of the favorite meals of the spider is the XML Sitemap Page. Basically it is a page written in XML that tells the spiders and bots what your site consists of in terms of pages.

Included with all PaulgDesigns web sites is an XML Sitemap page to feed the spiders.

Pay Per Click

Rightly or wrongly, Pay Per Click (PPC) has gotten a bad rap. Be it that the providers of PPC have evolved or the accounts were mismanaged, this is one vehicle of advertising that should be looked at for all web sites.

Horror stories of site owners running up thousands of dollars a month in advertising fees are being replaced with success stories of owners spending little and getting a big return.

Drop us a note and find out how you can control your advertising budget and rack up the rewards

Manage Your Own Site

The latest statistics show that 46% of all web sites are managed by the companies that own them, however many times the responsibility of managing these sites is put on current employees that may not have professional or even hands on experience at the design and/or management of such an important asset.

It is not uncommon to see questions posted on various web design help boards from individuals that had just been handed the responsibility of their companies web site.

We have a solution

PaulgDesigns offers design and tutorial services so that we could provide you with a design, and also provide you with the instructions or support to maintain your own site. This would reduce the initial cost of a new or redesigned site plus give you complete control over its progress and maintenance.

You would now enjoy a custom designed web site, along with the ability for yourself or your employees to make additions, changes and even new pages, all with help being a phone call away

Web Site Update & Repair

Do you have a site that has just a few issues that you would like to have change? Maybe your site has fallen out of step with the times and now longer shows well in the latest versions of browsers.

Many times paulgdesigns can go into your existing site and make modifications and upgrades without having to overhaul and create a new site or design.

Has your web designer moved on? No one to keep up with the changing information you want your customers and perspective customers to see? Like to keep your your photo’s current?

Would you like the ability to make updates and changes to your site without having to rely on a web designer?

Warwick Fire Arms

The owner of Warwick Firearms had there original site designed by a one size fits all hosting company. They charged him to create the site, then charged him a monthly fee. When the monthly fee went up to $100, he asked for help.

We redesigned his site and migrated it over to his own hosting account, saving him well over $1,000 per year on hosting fees alone, plus, we set it up so he was able to update his inventory pages on his own and without any further cost.

Because of how we designed his new site, he experienced an increase in traffic of over 600% within the first month of our launch.

Call or write to see how we can help you.