In this step-by-step tutorial, I’m going to show you exactly how to code an HTML email; be it an HTML Email Signature or HTML Email Newsletter.

1. Changing the background color

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333">
<tr>
<td>

</td>
</tr>
</table>

2. Setting a fixed width and background color for [...]

Continue reading How to code an HTML Email Newsletter

web 2.0 style call-to-action buttons can be purchased in psd format from graphic river
Since writing How to style a Submit button in CSS a few months ago, I have found an alternative way to achieve the same result. In this example, we will be using <button> tag instead of <input> tag. [...]

Continue reading How to style a Submit button in CSS – Example 2

The main purpose of this code is to have “Read more” for a long block of text (eg: comments) without having to separate the text into two div blocks and then use toggle to show/hide the 2nd block. This code simply uses CSS overflow:hidden property to hide long block of text. jQuery live [...]

Continue reading Read more using jQuery live event

This example code shows you how you can have a top branding bar similiar to diggbar in just a few lines of html and css.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>framebar example by Web Development Blog</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 0;
padding: 40px 0 [...]

Continue reading Framebar (like diggbar) example in html and css with no javascript

HTML

<input type="submit" id="submit" value="Search" />

CSS

#submit {
cursor: pointer;
}

Continue reading Change the arrow into a hand when hovering over ‘Submit’ button

In header.php file of my WordPress theme, I have the following code to display a different header image for different pages.

<?php
if (is_page(‘about’)) {
$image = ‘image_about.jpg’;
} else if (is_page(‘projects’)) {
$image = ‘image_projects.jpg’;
} else if (is_page(’services’)) {
[...]

Continue reading How to display a different header image for different pages in WordPress

If you are hard-coding your navigation menu in WordPress rather than using wp_list_pages() template tag, you will need to add a class manually in order to highlight the current page it is on.
<li<?php if (is_page(‘gallery’)) : echo ‘ class="current_page_item"’; endif; ?>><a href="gallery/">Gallery</a></li>
Note: wp_list_pages() template tag automatically add current_page_item class to the <li> element [...]

Continue reading Highlight the current page link in WordPress

Problem in IE8:
The upper half of the <fieldset> border goes missing. This problem has been discussed here and shown here.
HTML:

<form action="login.php" method="post" id="login">
<fieldset>
<legend>Login</legend>
<label for="username" class="label">Username</label>
<input type="text" name="username" id="username"/>
<label for="password" class="label">Password</label>
<input [...]

Continue reading Fieldset and Legend bug in IE8

HTML:
<a href="http://www.google.com" rel="external">Google</a>
Javascript:
$(document).ready(function() {
$("a[rel=external]").attr(‘target’, ‘_blank’);
});
Or
$(document).ready(function() {
$(‘a[rel="external"]‘).click( function() {
window.open( $(this).attr(‘href’) );
return false;
});
});

Continue reading Open link in a new window using jQuery

sIFR
sIFR stands for Scalable Inman Flash Replacement and it is an open source JavaScript and Adobe Flash dynamic web fonts implementation, enabling the replacement of text elements on HTML web pages with Flash equivalents.
Pros

Looks nice
Does not require a server side language
Text created with sIFR can be copied/selected
Graceful degradation (If flash is not installed, [...]

Continue reading sIFR vs FLIR – Font Replacement Techniques

Profile PicHello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more about me or have a look at some of the tips & resources I've written.
Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
We do NOT spam.
Your name:  
Your email:  

Tips & Resources

Tips & Resources
WordPress Web Hosting
Recommended web hosting providers for WordPress 3.0
iPhone Native App Development
Important steps into iPhone app development for beginners
iPhone Web App Development
Tips for iPhone web app development
Coupons for Web Developers
Get discounts on web hosting, domain names, templates, etc
10 Useful jQuery Snippets
Easy-to-use jQuery snippets for any website
HTML Email Newsletter
Step-by-step tutorial on how to code an HTML email newsletter
  • bluehost Hosting $6.95/month
  • Joomla Templates