Posted by Karthik Viswanathan on Thu 19 March, 2009 at 05:00:20 · Tags: html, question
A short while back, Abhilash SR commented on our poll with a question that he had:
Is there any way to show the select box text as [a] tool tip when user moves the mouse down the list?
In other words, Abhilash would like to know whether it’s possible to add tooltips to option tags. Luckily, the answer is yes!
Posted by Karthik Viswanathan on Thu 29 January, 2009 at 20:53:36 · Tags: css, html, tutorial
Many of us love to use vivid, clean images to enhance a website design. Unfortunately, it may be necessary to embed links into such an image, which can be a hassle.
In this article, we will present a quick and easy way to add links to your images using a small amount of HTML markup and CSS.
To begin, we must initialize our HTML. For this example, we will use the logo presented by Patrick Lin in his previous article:
It contains the following HTML:
<div id="logo">
<h1><a href="/" title="Home Page"><span>Sample Logo</span></a></h1>
</div>Posted by Patrick Lin on Mon 26 January, 2009 at 23:04:24 · Tags: css, html, tutorial
Good designs are always clever. They need something to help them stand out from the rest. Here’s how to create a clever logo banner that looks good and is SEO Friendly, like the one Lateral Code uses, using an image and some clever CSS.
The first step is to create the banner. For demonstration purposes, the following banner will be used:
This is the markup involved:
<div id="logo">
<h1><a href="/" title="Home Page"><span>Sample Logo</span></a></h1>
</div>
Posted by Karthik Viswanathan on Fri 23 January, 2009 at 23:19:47 · Tags: css, html
CSS can be the key to make or break a site design. To enable you to create and edit your own template, we have decided to present 5 Simple CSS tricks. Please feel free to directly use the code shown here in your own site.
Many web browsers have default CSS settings for HTML elements. Unfortunately, these settings differ across each browser. In order to maintain a similar look of your site in multiple browsers, resetting these values is a must. Here is a quick reset snippet commonly used:
* {
margin: 0;
padding: 0;
}Posted by Patrick Lin on Mon 19 January, 2009 at 00:19:26 · Tags: html, php
A while back, my colleague Karthik posted a CSS styled form. This time, I am going to show how to build the backend of an HTML form using PHP.
To begin with, you can take the code from Karthik’s example and paste it into a file called ‘contact.php’ or a name of your own choosing.
<!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" lang="en" >
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Form Styling!</title>
</head>
<body>
<h2>Input Form</h2>
<form id="input-form" name="input-form">
<label for="first-name">First Name: </label>
<input type="text" id="first-name" name="first-name" class="field" />
<label for="last-name">Last Name: </label>
<input type="text" id="last-name" name="last-name" class="field" />
<label for="e-mail">E-mail: </label>
<input type="text" id="e-mail" name="e-mail" class="field" />
<label for="text">Message: </label>
<textarea id="text" name="text" class="field"></textarea>
<input type="submit" id="submit" name="submit" value="Submit" />
</form>
</body>
</html>
1