US Flag – Using Canvas Tag

0

The canvas tag is a new HTML tag which is used to draw graphics using JavaScript. You can learn more about the canvas tag and its basic usage here. Since it is a relatively new tag, it does not render in all the browsers. For those browsers which do not support the canvas tag,  you would need a fallback image or code inside the canvas tag.

Here is the code to draw the US flag using the canvas tag mostly following the specs for the flag. See the final image.

Open an editor and create a new HTML5 document. You can copy the following code and save it as canvas_demo.html.

Read the rest of this entry »

Aligning check boxes vertically in IE using CSS

0

I just finished working on a project and while I was in the final testing phase, I realized that there were some check boxes in a form that were not displaying correctly in IE. I found a few answers on Google but, these did not fit to my CSS styling properties and I needed a quick fix without redoing a bunch of CSS.

So, I came up with a simple solution of adding a class to the check boxes.

Here is the my form. Just a list of the days of the week. I need them to display one below the other.

<form id=”stylized” name=”email_reminders” method=”post”>
<label for=”repeat_sunday”>Repeat:</label>
<input type=”checkbox” name=”repeat_sunday” value=”1″ />Sunday<br />

<label for=”repeat_monday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_monday” value=”2″ />Monday<br />

<label for=”repeat_tuesday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_tuesday” value=”3″ />Tuesday<br />

<label for=”repeat_wednesday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_wednesday” value=”4″ />Wednesday<br />

<label for=”repeat_thursday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_thursday” value=”5″ />Thursday<br />

<label for=”repeat_friday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_friday” value=”6″  />Friday<br />

<label for=”repeat_saturday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_saturday” value=”7″ />Saturday<br />

</form>

 

Read the rest of this entry »

Skype Extension for Firefox troublesome

0

I was working on a simple PHP form that would take in a phone number and other fields and add it to the database and eventually display it on the screen. As I was testing this form, I noticed that the phone number was getting added to the database but was not showing up on the screen. It seemed very weird. I could not see the phone number in PHPMyAdmin either. It showed up when I wanted to edit a record.

To make sure I did not have an error in my PHP code, I created a simple test.html with the following code in it:

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Phone Test</title>
</head>

<body>
Phone Number: 123-234-3456
<br />
Another Phone Number: 980-989-9989
</body>
</html>

The first phone number did not show up but the second one was fine. If I replaced the dashes in the phone number with spaces, Read the rest of this entry »

Displaying a static front page for your wordpress blog

0

Word press is one of the most popular content management systems out there. It is not only great for blogging, but also works really well for your portfolio. It can be easily tweaked and customized. There are a lot of free word press themes available for portfolio sites. If you are a web designer, you would definitely want to design one for yourself. Designing a word press theme and coding it up is very easy. (Check back for a tutorial on this).

Word press makes it very easy to maintain your site. Displaying your portfolio is a breeze with its many plugins.

Once you install word press and upload your theme, you need to change your settings to convert your site into a portfolio site. You can also have a blog as a part of your portfolio.

The first step would be to create all your pages by going to ‘Pages > Add New’.

If you wish to have your blogs displayed on the front page, Read the rest of this entry »

CSS vs Tables

1

The other day, my husband and I had an argument over CSS and Table based layouts for web pages. His point was that tables are more easier to predict and give a structure to the website where as with CSS it is rather difficult to achieve this. I think it is true to some extent. I used to design websites with tables before I learnt CSS. Now, I don’t think I would ever go back to table layouts entirely.  Here are some reasons why CSS based layouts are better.

File Size:

The file size with CSS based layouts is smaller which helps in faster loading of the site. Table based layouts have a lot more tags that result in a larger file size.  It has been found that CSS based layouts usually load 2-4 times faster than table based layouts.  It also takes up less bandwidth. Some hosting providers charge based on the amount of bandwidth used. So, using CSS layouts helps lower those costs especially if it is a large site. Patrick Burt has some good suggestions to reduce file sizes with CSS.

Cheaper and faster redesign:

In CSS based design, the content of the website is separated from its visual appearance. External style sheets Read the rest of this entry »