Remove an Element with a Relative Position from the Normal Flow of a Web Page

Here is a nifty little trick I found on a post from StackOverflow. I usually prefer to “relatively” position elements in my pages so that I can have a more fluid designs. However relatively positioned elements are not taken out of the normal flow of the document and so often I am left with a big ugly blank space where they would normally be found. This can lead to all sorts of issues especially when you try and relatively position every element thereafter to cover the ever growing blank spaces. Here is a novel solution that will create a 0 height 0 width pseudo-relative element to wrap around a absolutely positioned element to give you a relative reference point that will not leave that dreaded big blank space.

<div style=”position: relative; width: 0; height: 0″>
<div style=”position: absolute; left: 100px; top: 100px”>
Hi there, I’m 100px offset from where I ought to be, from the top and left.

Taken From:

Free 2 Column Webpage Template with Sticky Footer

Here is my first installment for my recent “Do more, Write Less” initiative I started for myself. I find myself constantly rewriting the same basic building blocks for my webpages and figure its about time to create a template that I can reuse to save myself time. I will post my code snippits here to not only archive them for my own use but also provided them to my visitors for free to try and help attract more traffic to my blog.

This is a free template for a webpage with a two column layout with a header and footer. This layout is very common and is used widely on the web. The template is just a basic building block for a web page and can be customized to however you see fit. One of the trickier things I find myself having to figure out over and over again is the sticky footer. This has also been included in the template and should work in all browsers. I have also included the basic template for the CSS which should probably be pasted into an external style sheet for bigger sites.  This template is free to use in any way you like and can be used for personal, commercial, or any other type of project.  Let me know if you find anything that does not work. Right click on the link below to download the free template (You may have to view source and then copy/past the HTML into a new file if your browser will not download the HTML file).

Free Website Template 2 Columns with Sticky Footer




Do more – Write less

Something occurred to me today that is likely quite obvious to seasoned professionals but I really never gave it much thought. Over the past few years I have started numerous website projects. They usually are a significant undertaking and require lots of time to complete(seems like I rarely finish them). The thing I realized is that on each one I always start from scratch. When I have an idea to make a website I will create a brand new text document and start from building from there. I never save a template or code snippets to reuse. I have to reinvent the wheel every time and it is taking me a lot of time.

My Idea is that I need to start reusing some of my code and writing/developing it in such a way that my work can be useful for other projects. I think it may take a bit more effort initially to do this, however in the long run it could save me countless hours. I am positive that as soon as my current project is completed (hopefully I will finish it someday)I will just come up with yet another one to start. If I already have some of the building blocks ready to go this greatly increase the odds of me finishing and decrease the amount of time it will take. In the end I hope this will enhance my ability to monetize my various online efforts. I think the best place to archive some of these snippets is right here on my blog. I am almost positive that closely follows this blog yet, but if there is or when you do come (hopefully) you can expect to see some of my templates and code snippets coming. Best of all is I intend to release them all free to use for any reason.

Centering A Div – Quick Reference Guide

I have been designing web pages using CSS for years now I have to admit, I still have to regularly look up how to center a div. It seems simple enough (maybe I am too used to the old HTML <center> tags), but I as am constantly struggling with it I decided to write a quick reference guide.

Center a Relatively Positioned Div

.centeredDiv {
width: 500 px;
margin-left: auto;
margin-right: auto;

Note: You must set a width for this to work

Center Absolutely Positioned Div

.centeredDiv {
width: 100px;
left: 50%;
margin-left: -50px; /*half of the width*/

Note: This will center the div relative to the first parent element that is not positioned static or the <html> block if no element is found.

As I was figuring all this out (again) to write it down, I think I am realizing the reason why I always seem to get it wrong. You have to employ different strategies depending on whether or not the element you are trying to center is absolutely position or relatively positioned.



Safari not liking the HTML5 Audio

 Well this one threw me for a loop….

 I never use Safari, but in an attempt to make my latest HTML5 Game compatible in all the major browsers I downloaded the PC version of Safari to do some testing and trouble shooting to see if it would work. The game worked well in Chrome, Firefox, and I.E. so I assumed it would just work in Safari. But no, to my surprise it started throwing the following error every time I tried playing one of the audio elements.

 TypeError: ‘undefined’ is not a function (evaluating ‘’)

 After much frustration I came across a post which indicated that HTML5 audio and video tags will not work in Safari without QuickTime. So much for HTML5 not requiring any plug-ins. I installed QuickTime and to my dismay Safari was now giving me the following error when I tried to start it up.

This application has failed to start because QTCF.dll was not found. Re-installing the application may fix this problem.

After trying to reinstall the the browser (this did not work) I found the QTCF.dll file in the Program Files/QuickTime/QTsystem made a copy of it and put it in Windows/System32. This solve the problem and Safari now started up. I was able to load my game with no more errors playing the audio objects. Safari seemed to handle the canvas object fairly well (although the frame rate on seems to be fairly poor).



WordPress captcha problems

On the web one of the most useful tools to combat spam and reduce abuse is a captcha. For this blog I felt that a captcha system was a “must have” as I intend on letting users input comments. I found a free wordpress captcha plug-in made by bestwebsoft ( looked very promising. However to my dismay after installing and activating the captcha plugin, the system did not work. I tried installing other captcha plugins, but they all required API keys and this was unacceptable to me. So I decided to try and get the bestwebsoft plugin to work.

I could tell that the captcha system was activated because it would give me an error if I tried to submit a comment, however the catcha form itself was not showing up in the comments section. To trouble shoot I reactivated the default theme that came with wordpress and the captcha form worked perfectly, so I knew it was a theme issue. It appears that whoever designed the theme I am using didn’t use the default wordpress “comments form” and was manually creating the form from scratch. In order to get the form to show up all I needed to do was include the following line of code in themes comments.php file where I wanted the form to show up.

<?php echo cptch_comment_form();?>

The next problem was that a mysterious “1” was being generated after the captcha form. To solve this problem I had to edit the function “cptch_comment_form()” in the captcha.php plugin file to not return anything. (i.e. from “return true;” to just “return;”). To be truthful I am not entirely certain what all the implications of doing this will be, but the captcha system appears to be working fine.

I imagine other wordpress themes will also be designed this way and will require a similar work-around to get the captcha plugin working.


It appears this problem has been fixed in the most recent version, so if you are still having this issue try updating the plugin

Customizing WordPress Headers

Word press is simply amazing…I’m constantly amazed by the quality of open source software, but that is another topic for another day

As I was setting up my installation for this blog I wanted to customize the header image and style.  I turns out this tasked proved to be a bit more tricky than I had first imagined.  I spent more time then I care to admit trying to edit the header div and image using the appearance editor tool in the admin area.  What took me so long to figure out was that there are multiple css files and the properties I was trying to change were in a different css file altogether.  Even more tricky was that this file was not available in the appearance editor tool.  I found it  in the  “wp-content/themes/” folder.

Now I know that this may be a no-brainer for some, but for me it was a bit tricky because it was not what I was expecting. Here is a trick I learned that might make this easier in the future to help identify the location of the correct css file. In many modern web-browsers you can right click and choose to inspect the element.  This will give you a run down of all the css properties that are currently being applied to that element along with the name/location of the css file (In Chrome you have to mouse over the file name to get the location).

So, if you want the customize the header for your word-press blog just right click on the header somewhere and select “inspect element”.  From here it is simple to figure out the location of the files with the properties you want changed.  After that use your favorite FTP program to download the file and make the desired changes.


Unwanted Border around an Image Link

Turns out I am having a harder time customizing this wordpress installation than I imagined. The theme I chose has a default css mouse rollover effect applied to all the anchor tags. I like the effect for the text, but this same effect was applied to the border image and it looked awful. I tried setting the border to 0 with the HTML but this did not work. What I had to do was create a completely new class setting all the attributes to none and then apply this class to the anchor tag around the header image. Like this…

a.headerImage {color: none;border: none;}
a.headerImage:hover {color: none;background: none;border: none;}

and then use the following html to assign the class to your anchor tag

<a href=’’ class=’headerImage’>