Online Web development Tutorials | Latest Tech News | Trends & Updates

Removing exta space in input button

2011-03-10T05:42:00.000-08:00

When to try to expand the value text in the input button, in ie7 or lower version, it will take spaces automatically to the left and right of the text. How can you overcome this?

Here is a simple solution for that.

Just add overflow:visible to it.

This will do the magic....

Toggle select and unselect checkbox with text

2011-03-10T04:00:00.000-08:00

Here is a simple javascript to toggle between selected and unselected of a checkbox. And also it will toggle the text, for example when you click on the select link the text will change to unselect and the vise-verse...

function ToggleCheckBox()
{
var ischecked=document.getElementsByTagName("input");
var divid=document.getElementById('id name');
for(i=0;i<ischecked.length;i++)
{
if(ischecked[i].type == "checkbox")
{
if(ischecked[i].checked == true)
{
divid.innerHTML="Select All";
ischecked[i].checked=false;
}
else
{
divid.innerHTML="Deselect All";
ischecked[i].checked=true;
}
}
}

}

Jquery client side validation

2011-03-10T03:29:00.000-08:00

When i was browsing the net for using the client side validation using jquery to my site, i found a useful plugin which will validate the form. I have gone through the reviews of this plugin and most of them said that they are using this plugin and it is really nice.

I thought that i would share this to all, so that it would be useful. Bassistance.de is the site which gives the plugin.

Follow the link will help you how and where to use Client side validation

If anybody have used it before, please share your experience.

Png background fix for ie6 using css

2011-01-10T21:45:00.000-08:00

Previous we have seen about how to give hack for png image for ie6. In this post we will be knowing how to fix a png background using css for ie6.

HTML
<div class="img_txt">dhsfds</div>

CSS


.img_txt{background:url(mobile.png) repeat;_background-image:none;_background-repeat:repeat-x;float:left;width:300px;height:130px;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='mobile.png', sizingMethod='crop'}

Hope this will fix for the background png.

Simple animated drop down menu using jquery

2011-01-09T22:37:00.000-08:00

This tut will help you to have a simple animated drop down using jquery. Before using this please add the js file from jquery website. Refer the site http://jquery.com/ for more details. You can download the minified version or the developer version.

Once you download and include in the page then using the below steps.
HTML


<ul class="drospdown">
<li><a href="#">A Website #1</a></li>
<li><a href="#">A Website #2</a>
<ul>
             <li><a href="#">Indoor</a></li>
             <li><a href="#">Outdoor</a></li>
            </ul>

</li>
<li><a href="#">A Link #1</a></li>
<li><a href="#">A Link #2</a></li>
<li><a href="#">A Website #3</a></li>
<li><a href="#">A Website #4</a></li>

<li><a href="#">A Link #3</a></li>
<li><a href="#">A Link #4</a></li>
</ul>

Javascript


 function mainmenu(){
$(" .drospdown ul ").css({display: "none"}); // Opera Fix
$(" .drospdown li").hover(function(){
  $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
  },function(){
  $(this).find('ul:first').slideUp(400);
  });
}
$(document).ready(function(){     
 mainmenu();
});

this will give you an animated drop down menu...

Making usability a practice

2009-12-01T08:55:00.000-08:00

As we all use form in the design to fill user information or such. Similarly we also use radio option to select and will give label to it. But the common usability mistake is when we click on the label, the radio option will not be selected. We need to do that. So here is a simply way

Using the ‘for’ attribute allows the user to click the label to select the appropriate input fields within a form. This is especially important for checkboxes and radio fields to give a larger clickable area, but it’s good practice all round.

Website to capture screenshot

2009-09-28T09:49:00.000-07:00

Most of our website have contact forms where visitors can fill in their email address and send a message directly to the site owners with some limitations. But some issues might be clear or some might not.

The visitor cannot attach image files with the message.

Here is a easy solution. To solve this very problem and make things a bit more convenient for your visitors, SnapABug has released a simple JavaScript based Help widget that can be added to any website with a simple copy and paste.

The Snapabug widget will add a "help" button to your website and when visitors click this help button, they can not only send a message to your email address but they can also chose to include a screen capture of the web page with the message.

SnapABug will automatically attach a screenshot with the browser’s user-agent string and OS details of the visitor. And the Help widget is absolutely free

So what for you waiting for, have a TRY!

Adobe Web 2.0 Productivity Workshop

2009-09-10T09:14:00.000-07:00

Great News for web developer and web designers, here is an opportunity to have a full session of knowing the web2.0 cutting edge latest technology of Adobe Productivity Workshop.

Adobe is conducting a one day program in Chennai. So if you are interested, here is an opportunity to know the latest adobe Productivity Workshop.

Venue: Hotel Park Sheraton

Date: 16th Sep 09

Time: 9am - 5pm

Detailed Agenda
09:45am - 10:15am Registration

10:15am - 11:00am Professional website design with Adobe Dreamweaver CS4

11:00am - 11:15am Tea Break

11:15am - 12:45pm Rich interactive content development with Adobe Flash CS4 Professional

12:45pm - 01:15pm Web prototyping and image editing with Adobe Fireworks CS4

01:15pm - 02:00pm Lunch Break

02:00pm - 02:30pm Audio creation and editing with Adobe Sound booth CS4

02:30pm - 03:15pm New dimensions in digital imaging with Adobe Photoshop CS4 Extended

03:15pm - 03:45pm Inspired vector graphics creation with Adobe Illustrator CS4

03:45pm - 04:00pm Tea Break

04:00pm - 04:30pm Flexible web publishing with Adobe Contribute CS4

04:30pm - 05:00pm Sneak peek of Adobe Flash catalyst

Hurry! only limited seats. Here is the link to Register.

For more details
Call: 09311 469593
Email: abode@channel-technologies.com

So see you there!

Test your Website in different Screen Resolutions in one place

2009-08-26T09:15:00.000-07:00

Experts says that when you are publishing a website for viewers, you should optimize the web pages for 1024×768 resolution as it is still the most common size. So you must always keep in mind when you are designing a website, make sure that the layout should be good and readable in all the resolutions.

Have you ever wondered how your website appears to a visitor who might be using a different screen resolution?

Tried of changing your resolution each and every time when you are making changes?

Here is a simple way to check your web page in all the resolution in one place. Viewlike.us is the site you are looking far.

Just type the address of your web page and the tool will show you how that page will look like in different screen resolutions. You can test the layout using most common resolutions like 800×600, 1024×768 or even the iPhone and Wii browser.

Create gradient buttons using css

2009-08-12T09:05:00.000-07:00

Creating a glossy gradient button effect is easy to make in photoshop. But for example, in your site you want ten buttons to be created. So what you will do, as of all we will be creating 10 different button in photoshop.

But all of these button will make your page weight of having 10 request to the site. So here is a simple trick how to create different buttons with single transparent image.

Follow this simple steps... Download the png file to have the gradient button. And copy the HTML and CSS code. So you will not be creating different image, just this png image will do the magic.

HTML:
<a href="#" class="btn ovrlay ">Super Awesome Button</a>

CSS:
.btn{font:13px arial;color:#fff;text-decoration:none;}
.btn:hover{background:#630030;}
.ovrlay{background:#A9014B url(btn-overlay.png) repeat-x;padding:5px 10px 6px;position:relative;}
.btn{background-color:#E33100;border:1px solid #7c1f06}

Just change the color of the .btn class, similarly you can have different n number of buttons by just class....

Before Gradient effect

After Gradient Effect

PNG Transparent Image

Just copy the above png image...

Note:
Do not forget to put png hack for ie6.

Convert images to vector formate

2009-08-06T09:11:00.000-07:00

Designers used to take images from a famous image selling website for their site to be used. But at some point they also need vector based images to be used such as for logos, header images etc to give a clarity picture.

These vector images can be resized to any size so that the quality of the image will not get damaged. But converting an image to vector formate might be costlier. So what to do? where to go?

Here is a simple solution to convert your image to vector images. Vector Magic.com is a free online image to vector Convert site. Easily convert bitmap images to clean vector art.

Convert bitmap images like JPEGs, GIFs and PNGs to the crisp, clean, scalable vector art of EPS, SVG, and PDF with the world's best auto-tracing software.

Upload the image to be traced and within seconds you will get the image converted to vector format. You can also edit the configuration such as details, colors etc. But the only worry is they leave a water mark of their website at the bottom of the image. I think the designer know what to do with it!

They also provide a desktop version for trail, where you can download and install it in your pc. Then you can work on it. The desktop version also contains the background remover which is not available in online version.

If you want to convert many images to vector, you can go for the trail version and if you are interested you can buy the software. Because i think it gives a better quality and clarity vector images.

And also they provide hand tracing, where you can order for images to be converted and they will do it for you.

Center align a div horizontally and bottom of the page

2009-08-03T09:19:00.000-07:00

There is an easy way to have the div position to the left or right to the screen with the use of fixed property. But how do you make a div horizontally center aligned and always be at the bottom of the page?

This will be of great useful if you want to make any popup div for display important messages or take any surveys etc. So here is a simple trick to show the content of a div horizontally aligned and always be at the bottom of the page...

HTML:
<div class="parent">
<div class="child">
Content here
</div>
</div>

CSS:
.parent{
position:fixed;
bottom:0px;
width:100%; //width should be 100%
}
.child{
width:300px; //min width should give to center the div.
margin:0px auto; //here it will make center
}

Position fixed will support modern browser including ie7, but for ie6 you have to use microsoft expressions to render the page as position fixed, as it will render wrongly. If you find any solutions without using expression in ie6, please explain use which will be helpful to others.

Yahoo’s Text-Sprite Generator

2009-07-27T09:37:00.000-07:00

Some of them called it as Yahoo's secret text sprite generator, because i think yahoo has not publish it officially. This is a pretty cool stuff by yahoo, which will generate a sprite to the text given.

Basically it’s a URL you can hit which will create a perfect sprite-ready PNG graphic of the text you include in the URL. Check it out for yourself:

Here is the url...
http://l.yimg.com/img.sports.yahoo.com/static/bir/headline?txt=webdevelopertut

Just copy the link and paste it in the address bar. You can have your own text just like i have used webdevelopertut. The image generated is always 468×68px and the color is white on top and yellow-orange on the bottom. Where you can use it for hover also.

For SEO, you can use CSS font replacement technique to have both text and image versions.

Float bug fix in div to expand

2009-07-22T09:42:00.000-07:00

Many of would find a problem when using a block(div) called a container with the background color, where you don't want to use float or height to the div. And in the inner div of the container you want to give float to it.

You can find this issue in most of the browser like ie, firefox, the container will not expland as the inner div.

For Example:
HTML:
<div class="container">
<div class="inner_div">
blablabla <br> blablabla <br> blablabla<br>
</div>
</div>

CSS:
.container{width:300px;background:red;}
.inner_div{float:left;width:200px;font:12px arial;}

The red background in the container div will not expand when you add content to the inner div. So here is a simple trick to get the container div to expand.

Just add
.container{overflow:hidden;}

Will make the job easy.

Principles for keeping your code clean

2009-07-20T09:18:00.000-07:00

The art of writing HTML and CSS is the foundation of a beautiful website. The advantages of clean, semantic HTML are many, but so many websites suffer from poorly written markup.

Most of the attractive website have beautiful designs but fails to pass in the w3c validations. This is because of bad coding. These are the basic and most follow principles for keeping your code clean and have a semantic structure. They are as follows...

1. Strict DOCTYPE
2. Proper indentation
3. Nest your tags properly
4. Character set & encoding characters
5. Eliminate unnecessary divs
6. Use better naming conventions
7. Leave typography to the CSS
8. Use Class/id the body tag
9. Keep your CSS and JavaScript external
10. Validation

This will be a great start to write clean HTML, but there is still lots more. When starting from scratch, this seems to be much easier. When trying to fix existing code, it feels a lot more difficult. SO from the next project, just think what you can make it right.

Colour Picker for web designers

2009-07-17T08:49:00.000-07:00

Designers used to develop the website with the combination of colors using photo shop to make the website more attractive. Now a days developers used to select the color with the help of addon called color picker using firefox.

Imagine when you move to a place where you see some beautiful colors, pictures, spots etc.. where you want to take a combination of those colors, when you don't have a laptop or camera with you. What you will do?

Designer Jinsun Park from Korea has come out with a simple tool called 'Color Picker', which is just look like a pen. This color picker pen consists of

1. RGB Color sensor.
2. Color scan button.
3. RGB ink cartridge.
4. Color display.
5. Ball type.

Place the pen against an object and press the scan button, the color will be detected by the color sensor and the RGB cartridges in the pen will mixed the required inks to create the target color. And you can also draw the colors in a paper with this pen.

Now it has become very easy with this pen, where ever you go just carry the color picker with you.

CSS font replacement technique

2009-07-15T09:30:00.000-07:00

Many of us would like to have headers with nice custom fonts on our website. For instance, logo which we like to have in an attractive graphics. But this stuff can be done only with the help of <img> tag, not with the regular text.

The proper HTML tag to use for headers is the header tag (e.g. <h1>, <h2>, etc). This is best for accessibility as well as SEO. Instead of using an image, we will think that having a text based logo will be much preferable for more SEO point of view even though we have an alt tag to the image. But text might not give you an attractive look. So how to use css font replacement technique to use both text as well as image in logo.

You may also be aware that CSS allows us to place background images on elements. Also text indent to align the text. We can use a proper header tag, but also use an image.
We need to somehow hide the text so that only the image is visible. Here it goes...

HTML:
<h1 class="logo">
Webdevelopertut
</h1>

CSS:
h1.logo {
width: 200px; height: 175px;
background: url("images/logo.jpg");
text-indent: -9999px;
}

Basically this technique creates the text goes way off the screen to the left. The text is being left-justified and cannot be seen. instead image is placed in the top left of this box.

When both css and image is on or off this method will get pass and fails when css is on and image is off. Most of them are now following this technique.

Title and Alt attributes on Images for ie8

2009-07-13T09:16:00.000-07:00

The alt attribute is no longer displayed as the image tool tip when the browser is running in IE8 mode.I have decided to add title attributes to most of my images so the subject is described on a mouse over.

The alt attribute plays most important role, when the images could not be showed to the user for some reasons. It also helps, when people are searching for images in Google Images, this alt attribute used to display the images while searching in it.

Now its similar to Firefox and others in that alt attributes are not described on a mouse over. Most of the traffic is from users using IE (although Firefox is coming up nowadays..) I decided to start on this.

For example:
<img src="images/logo.gif" width="100" height="100" alt="webdevelopertut logo" title="logo">.

Facebook launches contest for Indian developers

2009-07-10T08:52:00.000-07:00

Facebook a Social networking site has launched Facebook Developer Contest India, a contest for Indian developers to show their web development skills by creating Facebook applications and Facebook Connect Integrations.

According to Facebook, entries will be judged on originality, business potential, social utility, usefulness, expressive features, intuitiveness and potential of the application. To enter the contest, participants are required to create a Facebook platform application for use on the Facebook site or Facebook Connect integrations in English or Hindi and register their application in the contest’s homepage.

Duration of the Contest
The Contest begins at 12:30:01 pm Indian Standard Time on July 2, 2009 and ends at 12:29:59 pm Indian Standard Time on September 11, 2009 (the latter being the “Closing Date”). Any entry submitted after the Closing Date will not be eligible for consideration in the Contest.

The three winners will get $4000, $2000 and $1000, in each of the two categories. The contest ends on 11th September and the winners would be announced in the last week of September 2009.The Contest is open to all individuals who are over the age of 16 at the time of entry and are resident in India (the “Participants”). Participants must have a Facebook.com account to participate in the Contest.

For more information and conditions about the contest, please logon to facebook.com.

Vertical align text in floating div using css

2009-07-09T09:33:00.000-07:00

Do you know how to vertically align a text in a floating div? When a content is dynamically generated and you want to align it automatically according to it?

Today i was experimenting about this for a long time and finally i have got a solution which will work in all the browsers including ie6. There are many ways of doing it, but i would like to work the code in all the majore browsers inculding ie6.

So here is the code...

HTML:
<div class="contentdiv">
<p>It works! Vertically Center Align!</p>
</div>

CSS:
.contentdiv{ width: 135px; height: 84px; display: table; border:2px solid red;}
.contentdiv p{ display: table-cell; vertical-align: middle; text-align: center;}

Hack for ie:
.contentdiv p{*margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");}

According to the height you increase, the content will get vertically aligned center. My only worry is iam using expression. We must try to avoid using more expression. But it looks very simple. Fine, any other method of handle this will be a great help! Please feel free to post.

Browser Extensions For CSS Coding

2009-07-07T09:42:00.000-07:00

In my previous post Tools for web developers, i have written about the common tools like firebug, ie developer tool etc, which will be much useful for developers. Here are some more additional extensions which will be much useful. These extensions helps the developers to edit live html and css, to check css rule and much more in other browser like ie, opera and safari. They are

1) Firebug Lite
2) ReCSS
3) Dust-Me Selectors
4) CSS Usage
5) PixelPerfect Firefox Plugin
6) Code Burner

1) Firebug Lite
Most of us have used firebug in firefox, but how many of them are using firefox browser? Firebug Lite brings the goodness of Firebug to Internet Explorer, Opera and Safari. Its a Javascript file that can be included in web pages to enable Firebug features in browsers other than Firefox.

2) ReCSS
Recss is other wise known as reload your css. Recss1.1 is a bookmark let, where you can drag it to your bookmark let tool bar. This bookmark let will make refreshing your css which also have got safari support.

3) Dust-Me Selectors
Dust-Me Selectors2.11 is a FireFox plugin that finds unused CSS selectors to help you keep your code clean.

4) CSS Usage
CSS Usage is a Firebug extension that allows you so scan multiple pages of a site to see which CSS rules are actually used.

5) PixelPerfect Firefox Plugin
PixelPerfect Firefox Plugin, generates an overlay over a web composition over top of the developed HTML.

6) CodeBurner
CodeBurner is a Firefox add-on, it with reference material for HTML and CSS. It contains contains a search tool for looking up HTML elements, attributes, and CSS properties.

Hope this article will be useful for you....

CSS class inherit one or more other classes?

2009-07-04T08:56:00.000-07:00

Question:
Is it possible to make a CSS class that "inherits" from another CSS class (or more than one).

For example:

.test { width:200px;display:block }
.logo { background:#cc;border:1px solid #4d4d4d }

I'd like to do is something like this:

.combine
{
.test;
.logo
}

where the ".combine" class would use all the attributes like width 200px, display block, background color #ccc and border color.

Answer:
Good Question my friend. But i think you can't do something like that. It would be much helpful for a developer if this is possible! Instead you can use multiple classes to a single block element.

For Example:
<div class="test logo ">text text text</div>

I heard that there is a tool called lesscss which iam not sure whether it will work in all the browsers. That tool might solve your problem, but do check for browser compatibility.

Take full screenshots of your webpage? its easy!

2009-07-02T09:05:00.000-07:00

Tired of taking screen shots from browser plug-ins or planning to buy a screen shot capture software which required more money to invest?

Here is a simply way to take screen shot of your full web page without installing any software or browser extensions.

Aviary.com is a suite of powerful creative applications that you can use right in your web browser. It is an online tool where you can take the screen shot from the live site. Just goto aviary, and paste your url to capture. You have the option to set your Resolutions, Quality, Region(entire page or above fold) to take the screen shot.

You can save the image to the desktop and add annotation using the Type Tool, freehand brushes, arrows, image editor, color palette and other tools available in the Aviary editor. What else you want?

There are many other online services like aviary, but they won’t do full pages.

Aviary is also providing other services like

1) Image Editor (Just like basic photo shop)
2) Color Editor
3) Effects Editor
4) Vector Editor
5) Image Markup
6) Screen Capture

TO use this tool, they will ask you to register in order to save your work. But don't worry it is absolutely FREE! It can’t get easier than this.

Rounded corners using css

2009-07-01T09:04:00.000-07:00

The simple way of using rounded corners using css with the header and the content in it.

HTML:
<b class="b1h"></b><b class="b2h"></b><b class="b3h"></b><b class="b4h"></b>
<div class="headh">
<h3>Here is your Header!</h3>
</div>
<div class="contenth">
<div>No images!</div>
</div>
<b class="b4bh"></b><b class="b3bh"></b><b class="b2bh"></b><b class="b1h"></b>

CSS:
.b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh{font-size:1px; overflow:hidden; display:block;}
.b1h {height:1px; background:#aaa; margin:0 5px;}
.b2h, .b2bh {height:1px; background:#aaa; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
.b3h, .b3bh {height:1px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
.b4h, .b4bh {height:2px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
.b2bh, .b3bh, .b4bh {background: #ddd;}
.headh {background: #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.headh h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
.contenth {background: #ddd; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.contenth div {margin-left: 12px; padding-top: 5px;}

With this code you can easy create a fill based header and border based rounded corner content in it. Just customize the code to change the color if needed.
This article will tell you about the fill and borderd rounded corners.

How to give text shadow using css

2009-06-30T09:16:00.000-07:00

Here is a simple way to give shadow to a text using css.

HTML:
<div id="wrapper">
<span class="firstlayer">Text with shadow using CSS</span>
<span class="secondlayer">Text with shadow using CSS</span>
</div>

CSS:
.firstlayer {
font-size: 18px;
font-weight: bold;
color: #aa0000;
position: absolute;
top: 120px;
left: 20px;
z-index: 1;
}

.secondlayer {
font-size: 18px;
font-weight: bold;
color: #aaa;
position: absolute;
top: 122px;
left: 22px;
z-index: 0;
}

This will give you the result as shown in the picture. I hope this will work in all the browsers.

How to make a website run faster?

2009-06-29T09:33:00.000-07:00

These are the simple steps to be followed, when developing a website to make it run faster. First of all install Yslow or Page speed, then start looking the ways your site is unoptimized.

1. Use minifed Javascript and CSS, Avoid duplicate JS and CSS.
2. Put your CSS at the top of the document.
3. Put the javascript at the end.
4. Use seperate domain for images, javasripts etc...
5. Avoid URL Redirections
6. Use Image Sprites to Minimize HTTP Requests
7. Add an Expires or a Cache-Control
8. Use Gzip Components
9. Compress your images using Smushit or good image compressor.
10. Compress your css and javascripts using Yahoo User Interface Compressor.

These point will help you to run your site faster. You can also test your page (i.e) load test through online using Pingdom website.

Negative Margin Bug fix in ie6

2009-06-27T07:57:00.000-07:00

Developers used to move a blog from its actual position to some other position using negative margin. This will render properly in all the browser except ie6. Basically when you give negative margin, the position of the block will come over the existing block.

For Example:
.bc {
width:100px;
float:left;
}
.abc {
margin-top:-100px;
}

In the above example, .abc block will be over the .bc block. But in ie6 .bc block will be over than the .abc block and .abc block will get hidden. Here is a simple hack to display the block on top.

How to use:
.abc {
margin-top:-100px;
position:relative;
}

Just add position relative to negative margin when using it. This simple hack will work in all the browsers.

Outlook 2010 use Word rendering engine to display HTML

2009-06-26T08:49:00.000-07:00

Microsoft has confirmed that they plan to continue using the Word rendering engine to display HTML in Outlook 2010. Till outlook express 2003 they used to render ie engine for html emailers. But in 2007 outlook express, they started to render with word engine. This made the developers hard to fix the design in 2007. Outlook doesn't render HTML correctly in 2007.

It was everybody's thought that Microsoft's next version release 2010 would fix this problem. But Microsoft has confirmed that they will continue Word rendering engine to display HTML in Outlook 2010. (Please keep in mind that EVERY OTHER email client currently used anywhere uses a web browser to render HTML.) Like Outlook express, hotmail also will give you trouble in rendering the email, while other engines like google, yahoo will render properly.

Conversion of PSD design to emailer will be a real challenge for web developers to check for Email Compatibility. Keep in mind that you have to use basic html and inline style to be used in order to render your emails properly(at least to an extend) in all the engines.

How to give shadow to a div using css

2009-06-25T09:18:00.000-07:00

Here is a simple example which tell you how to give shadow to a div...

Example:
HTML:
<div class="box-outer">
<div class="box-inner">
text

</div>
</div>

CSS:
.box-inner {
position:relative;
top:-3px;
left:-3px;
height:150px;
background:#aa0000;
}
.box-outer {
width:150px;
height:150px;
background:#333;
}

The result will show you a red box with black shadow as shown in the image. When you increase the width of the box-outer, automatically the width of the box-inner will be increased.

Hope this example will help you...

Speeding up your web site

2009-06-24T09:04:00.000-07:00

The most important part for a webdeveloper is to check the website for performance. How to optimize the page (code, database, image, external objects etc..). In the busy world, User will not wait until the page gets loaded. He will quit the website and moves for the another option. So once you have completed the website, you should go for page testing.

How you can test your page?
There are popular page load testing tools such as Yahoo Yslow, google's page test, Pingdom etc..

Yahoo Yslow
YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. Based on your site performance yslow will give you a grade. You can find your page speed before cache and after cache of your css, javascript files.

Image Optimization:
You can compress you image with Yahoo's Smushit, if the graphics contains huge file size.

Statistics:
The statistical graph will show you the http request and total bytes used by the page with empty cache.

Yslow Tools
JSLint - Run JSLint on all JavaScript code in this page
All JS - Show all JavaScript code in this page
All JS Beautified - Show all JavaScript code in this page in an easy to read format
All JS Minified - Show all JavaScript code in this page in a minified (no comments or white space) format
All CSS - Show all CSS code in this page
All Smush.it - Run Smush.it on all image components in this page
Printable View - Show a printable view of grades, component lists, and statistics

Yslow comes along with firebug and they have lots of tools for optimization...

Google's Page Test:
Page Speed is an Firefox3/Firebug Add-on. Web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.

I have not used google's page speed, but heard that it is also good as yslow. They have also got tool for images (just like smushit), css, javascripts etc. for more information, please use this link, Google page test.

Pingdom:
Pingdom is a website, provides free tools for webmaster. You can submit your url to check the load speed for your website. They will provide you information on load time, internal objects, external objects, script size, css size, html size, plugins, redirection if any and much more...

Permalink to this test
You can have the permanent link to the test made so that you can check at any time. You can also email this reports to your managers, friends etc...

How it works
The page load test is done by checking the complete html page including all objects (images, CSS, JavaScripts, etc...). The load time of all objects is shown visually with time bars. The statistics will show you the starting time, connection made and bytes read along with the url and its size take by it.

Test your uptime:
They also provide you a 30 days free trail to test your page and also give you the option for sms and email alerts to your site.

So check for optimization for your web pages, which will help in many ways...

ie6 double float margin bug

2009-06-23T08:40:00.000-07:00

Webdevelopers gets irritated when they give a margin value to a block, suddenly only in ie6 they can see the value gets doubled. For example: if you give margin-left:10px, ie6 will take the value as 20px. Thank god they have fix this issue in ie7. This is because, when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box. Any other left-margined floats that are displayed in the same row won't show the doubled margin.

The simple way to handle this issue is to put display inline fix. By placing this will not affect any other browsers.

For Example:
.fltt{
float:left;
width:300px;
margin:5px 5px 0px 10px;
display:inline;
}

How to have div min height

2009-06-22T09:09:00.000-07:00

Basically when you specify a height to a div, ie6 will take it as minimum height. But ie7, firefox, chrome and modern browser will treat as height. So here is a simple way to have minimum height to all web browser.

Css Code:
.test{min-height:50px;height:auto!important;height:50px;}

For example, if you want to give 50px height to a div, Use the above code will work fine. That after 50px the height of the div will automatically expands.

Nifty rounded corners using html and css

2009-06-21T06:41:00.000-07:00

Thanks jagdeesh for posting your question to me. Here is the simple way to have rounded corners using css without any images for optimized code.

Rounded border
HTML Code:

<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="contentb">
<div>Round Border!!</div>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>

CSS Code:
.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;}
.b1 {height:1px; background:#888; margin:0 5px;}
.b2 {height:1px; background:#fff; border-right:2px solid #888; border-left:2px solid #888; margin:0 3px;}
.b3 {height:1px; background:#fff; border-right:1px solid #888; border-left:1px solid #888; margin:0 2px;}
.b4 {height:2px; background:#fff; border-right:1px solid #888; border-left:1px solid #888; margin:0 1px;}
.contentb {background: #fff; border-right:1px solid #888; border-left:1px solid #888;}
.contentb div {margin-left: 5px;}

Rounded Fill
HTML Code:

<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
<div class="contentf">
<div>Round fill!!</div>
</div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>

Css Code:
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}

The first example will give you a rounded corner with border, simply copy the html and css code. The secound example will give you rounded corner with fill but will not have any border. You can custome the code by changing the border or background color.

If you have any doubts or queries, please feel free to contact me. To know about more about rounded corners, please check this article.

Png fix for ie6 using css

2009-06-18T09:48:00.000-07:00

Many of the cases we would be like to have a transparent image, which is other wise called png image for our websites. Like if we need an image which is going to place in different backgrounds, we can use a single transparent image inorder to have multiple images. This is done for the purpose of site optimization and performance.

The true color (png24) will be supported by all major browser except ie6. This will automatically create a grey background because ie6 cannot recogonise the alpha filter option. So what we do? Yes we got a simple Css hack to overcome this issue.

Here is the hack
HTML Code
For Example:
<span id="alImg1">
<img border="0" src="images/htw.png"/>
</span>

CSS Code
#alImg1 img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
#alImg1{ display: inline-block; }
#alImg1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/htw.png'); }

In the above example i have htw.png. So use the id like how i have specified and call it with in the css.

Note:
#alImg1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/htw.png'); }
In this case also you need to specify the image path.

Web browser hacks, Css hacks - ie, firefox, chrome, safri, Opera

2009-06-17T09:38:00.000-07:00

CSS hacks take advantage of browser bugs for hiding CssRules from specific web browsers. Listed below are the hacks for major browsers like ie6, ie7, firefox2, firefox3, Google chrome, safari and opera.

Inline Hack for IE
* (star) can be used as the inline hack for both ie6 and ie7.

For Example:
Syntax: .selector{*property:value;}
.logo{*margin-left:10px;}

IE6 browser inline Hack
_ (underscore) can be using only for ie6

For Example:
Syntax: .selector{_property:value;}
.logo{_margin-left:10px;}

Firefox inline style
content:"\"/*" can be used for firefox only where IE cannot recognize it.

Internal Style
Use * html for ie6 and *+html hack for ie7

For Example:
Synatax: * html .selector{property:value;} , * + html .selector{property:value;}

* html .logo{margin-left:10px;} for ie6
* + html .logo{margin-left:20px;} for ie7

IE7 and Firefox browser Hack
Use html>body hack for ie7 and firefox.

For Example:
Syntax: html>body .selector{property:value;}

html>body .logo{margin-left:10px} will take only in ie7 and firefox

Mordern browser Hack or Firefox Hack
Use html>/**/body {} hack which will support only in both firefox2 and firefox3.

For Example:
Syntax: html>/**/body .selector{property:value;}

html>/**/body .logo{margin-left:10px} will take only in firefox.

Browser hack for Opera versions 9 and below
Use html:first-child {} for opera browser. Also you use
Syntax: @media all and (min-width:0px) {head~body .selector {property:value;}}

For Example:
@media all and (min-width:0px) {head~body .logo {margin-left:10px;}} only for opera

Firefox3 browser hack
Use html>/**/body .selector, x:-moz-any-link, x:default {property:value;} for firfox3 only.

For Example:
Syntax: html>/**/body .pro_yl, x:-moz-any-link, x:default {background:red;}

Google Chrome browser hack
Use body:nth-of-type(1) .elementOrClassName{property:value;} only for google chrome.

For Example:
body:nth-of-type(1) .logo{margin:20px;}

Safari browser hack
Use Syntax: body:first-of-type .elementOrClassName{property:value;}

Fox Example:
body:first-of-type .logo{margin-top:10px;} only for safari.

Hope this information will be useful for you. Please use the browser hacks in a proper manner. For example, you might know double margin bug in ie6. In such case you can use display inline which will render correctly by all the browsers instead of you using ie6 hack seperately.

Popular CSS Frameworks - Yahoo YUI, 960 CSS, Blueprint, Yaml, jQuery

2009-06-16T09:06:00.000-07:00

Tried of writing HTML, CSS code to your web pages? Making your site to work with all the major browsers. Running behind CSS hacks? Here is a simple way to solve all your issues, CSS Frames. Most of the designers would heard about CSS Frames, for those who don’t know here is a brief description from: Wikipedia

A CSS framework is a library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks package a number of ready-made options for designing and outlaying a webpage.

5 Popular CSS Frameworks
1) Yahoo YUI (Yahoo User Interface Library)
2) 960 CSS Framework
3) Blueprint CSS Framework
4) Yaml (Yet Another Multicolumn Layout)
5) The jQuery UI CSS Framework

These are the top 5 CSS Framework. I have no idea about the other css framework, but i have used Yahoo's YUI framework. The YUI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. For CSS, they provide

1) CSS Reset (neutralizes browser CSS styles)
2) CSS Base (applies consistent style foundation for common elements)
3) CSS Fonts (foundation for typography and font-sizing)
4) CSS Grids (more than 1,000 CSS-driven wireframes in a 4KB file)

You can choose the overlay of the width, by mentioning #doc or #doc2 or #doc3 etc...
* #doc - 750px centered (good for 800x600)
* #doc2 - 950px centered (good for 1024x768)
* #doc3 - 100% fluid (good for everybody)
* #doc4 - 974px fluid (good for 1024x768)
* #doc-custom - an example of a custom page width

Templates
Optionally choose the secondary column's width and orientation with one of six templates.

* .yui-t1 - Two columns, narrow on left, 160px
* .yui-t2 - Two columns, narrow on left, 180px
* .yui-t3 - Two columns, narrow on left, 300px
* .yui-t4 - Two columns, narrow on right, 180px
* .yui-t5 - Two columns, narrow on right, 240px
* .yui-t6 - Two columns, narrow on right, 300px

Nesting Grids
Optionally nest standard grids (.yui-g) and special grids (.yui-gb, ... .yui-gf) to subdivide.

* .yui-g - Standard half grid (and nest again for quarters).
* .yui-gb - Special grid, 1/3 - 1/3 - 1/3
* .yui-gc - Special grid, 2/3 - 1/3
* .yui-gd - Special grid, 1/3 - 2/3
* .yui-ge - Special grid, 3/4 - 1/4
* .yui-gf - Special grid, 1/4 - 3/4

If you find this is diificult to keep in mind, they have got a grid builder, a simple interface for Grids customization. Where you mention the values in the box, it will provide you the results.

YUI Components
Along with CSS they also provide YUI Components where you can easily integrate with javascripts for animations, Carousel, Slider, Resize and lots more...

YUI Compressor
With this tool YUI Compressor, you compress your css and javascripts file which will reduce your file size into half. This is very much helpful for web optimizer.

To know more details and to download the latest version of YUI, please visit the site Yahoo YUI. Majore Interent companies like Sulekha, Sify are using YUI.

How to Create Optimized Landing Pages that Convert?

2009-06-15T09:15:00.000-07:00

Like SEO, SEM plays a major role in promoting the website to make revenues on the basis of ROI. The online business battle will be waged over conversion rates and return on investment (ROI), not traffic acquisition. The Landing page is the key factor inorder to make conversions rather than investing in an normal page.

Successful landing page
Your landing page should look like

1) Clear informative layout
2) Use Catchy Headlines, catchy titles are a plus.
3) Using contextual internal links
4) Should focus on What's the offer?
5) Who's interested?
6) Why are they interested, and why should they take further action?
7) How do they get started?

When visitors landed on the common home page, they stayed longer and visited more pages. Yet a larger percentage left without converting. When visitors landed on custom pages, they stayed for less time and viewed fewer pages. But these visitors converted two to three times more than the visitors to generic landing pages.

Make sure that you use your design part most in the header section to attract the audience. And don't use images which ever you want to convey to the audience (the important note) which will be useful for seo section. Don't forget to have an Action Button near to your conveying message. Always keep in mind that most of the visiter would be using 800X600 resolutions, so keep your design with in that screen resolutions.

Optimize your web page when you are using high quality graphic images which will save your loading time. Use HTML Emailers to promote your Landing page.

How to write HTML css code for Emailers?

2009-06-14T03:55:00.000-07:00

Many of them are asking me, how to write html css code for emailers? Do it have any formates? On my view, i say yes it has a format to write. Now a days emailers are playing a majore role to promote their products or web pages in order to increase their conversion rate. Report says that a neat simple text mailers are making lots of conversions.

There are two types of mailers. One is text mailer and another one is image based mailer. Text mailers are given most important than image mailer, coz text mail can have the users glance that what he wants. But in image mailer unless the user clicks the display images he cannot view the mail. Most of the mail engine's like Google, Yahoo will not show the images until the user click the display images. This may get user get irritated and without opening the mail he will delete it. Make sure that your mailer will not fall in their Junk box.

Format for writing E mailers
A basic html and css code writing is enough for writing E mailers. Like tables and inline style is needed. You cannot apply any css file to the emailer. While writing html code, make sure that you should not use positions, backgrounds, negative margins and also padding (in cases). You must reset your css before starting an element.

Email Compatibility
Most of the companies are looking for email compatibility for all emailers just like browser compatibility. Most of them are Gmail, Yahoo, Sify, Microsoft Outlook express, Hotmail etc.. Make sure that your code is compatible for the above mentioned email services. So please use basic html and css tags in order to render properly in all these services.

Note:
Make sure that you add a link on the top of the emailers saying that cannot view, please view it in an html format. So that they can view to page in a browser, if they have problem in opening in email. And also add disclaimers like unsubscribe(if needed) at the end of the footer.

Html Css tools for web developers

2009-06-13T09:05:00.000-07:00

Tools made life easier. A web developer, for example who can develop a page with in two hours approx, he can be done with in an hour with the help of developer tool. He can find the errors so easily with these kinds of tools. Leading browser such as ie, firefox, chrome are giving the tool as an addon along with the web browsers. Its must for the web developers to use these tools, coz in interviews this topic is given as the most preference.

IE:
IE developer tool
Using ie developer tool, developer can edit the css part and you cannot edit the html part. You can download this tool from microsoft site for free. A brief discussion about how to use this tool will be briefed later.

IE Watch
Using ie watch, you can edit html as well css just like firebug. You can download this tool from microsoft site for 30days trail version. A brief discussion about how to use this tool will be briefed later.

Firefox:
Webdeveloper tool:
Web developer tool has got many option to do for web devlopers. You can edit html, css, disable javascripts, cookies, css, images... Provide information on anchore, block size, table depth, title attribute and many more. It also gives an outline for tables, links, headings, meta tags etc. This is a very useful for beginners.

Firebug:
If you any web developer to vote for firebug, every developer including myself will vote 100/100 marks for firebug. Firebug is an addon comes along with firefox. You can download this from Addons for Firefox website. Most of them feel very comfort in editing the html and css using firebug. You can also edit the javascripts using this. You can have a look at the dom events. They have introduced plugin called coder, where you have to install it separately along with firefug. With coder you can find the functions and the code used in javascripts.

YSlow
Yahoo's Yslow is a pluggin comes along with firebug, have to be downloaded separately and installed with firebug. This is used for site optimization. To check for your site download spead, image optimization, response time taken etc...

Page Speed
Just like Yahoos yslow, page speed. This is used for site optimization. To check for your site download spead, image optimization, response time taken etc...

Google Chrome
Goolge chrome also have given a pre-installed plugin where you can inspect for html and css to edit.

All the tool which i have mentioned above will be given a brief details about how to use in up coming post.

Apple's Safari 4 crossed more than 11 million downloads in 3 days

2009-06-12T09:33:00.000-07:00

Apple's Safari 4 Web browser was downloaded more than 11 million times in the first three days of release and more than 6 million of the downloads came from Windows users.

Apple Said, Safari 4 tops IE 8 and Firefox by three times or more when loading HTML Web pages, With its Nitro JavaScript engine, the company claims, Safari executes JavaScript almost eight times as fast as IE 8 and more than four times as fast as Firefox.

Advanced Web Technologies
Next-Generation Standards Support
With support for HTML 5 media tags, CSS animation, and CSS effects, web designers can create rich, interactive web applications using natively supported web standards. A standards-compliant browser, Safari renders current and future web applications as they were meant to be seen.

It also supports CSS 3 Web Fonts, CSS Canvas, HTML 5 Offline Support, HTML Canvas, ICC Color Profile Support, LiveConnect Support and many more...

Bookmarks
Drag-and-Drop Bookmark Organization
Easily rearrange your bookmarks in the bookmarks bar by dragging them to the right or left. As you drag over other bookmarks, they slide away to make room for the one you’re moving.

Drag-and-Drop Bookmark Creation and Deletion
Safari lets you create and delete bookmarks with a simple drag and drop. When you find a site you like, create a new bookmark by dragging the site’s icon into the bookmarks bar. If you no longer use a bookmark, drag it out of the bookmarks bar and it disappears in a puff of smoke.

History View
Take a closer look at your browsing history in the History view. Search for previously visited sites, drag web pages to your bookmarks, and clear individual items. Safari displays your history using Cover Flow, so you can flip through your search results as easily as you flip through iTunes album art.

Browser navigation has 3D config which attracts people to look and feel as though they are using iphone.

Day by Day browser version and different browsers are increasing which make very difficult for web developers for checking browser compatibility.

How firefox3.5 will be useful for web developers?

2009-06-11T09:09:00.000-07:00

Firefox3.5 is 10 times faster than firefox2 versions. A good news from mozilla, that firefox3.5 have many new features for web site and application developers.

HTML 5
Using audio and video in Firefox. In the older version of firefox, you need to download a plugin for flash to view the videos in Youtube. But using firfox3.5 and HTML5 you can view the videos without any plugins installed. And also they are very faster than ever.

Offline resources in Firefox
Firefox 3.5 now fully supports the HTML 5 offline resource specification.

Drag and drop
The HTML 5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.

Newly-supported CSS features
The :before and :after pseudo-elements have been updated to full CSS 2.1 support, adding support for the position, float, list-style-*, and some display properties.

opacity
The -moz-opacity Mozilla extension to CSS has been removed in favor of the standard opacity property.

text-shadow
The text-shadow property, which allows web content to specify shadow effects to apply to text and text decorations, is now supported. Also..
-moz-box-shadow, -moz-border-image, -moz-column-rule, -moz-column-rule-width, -moz-column-rule-style, -moz-column-rule-color added newly.

Shadow effects in a canvas
Canvas shadow effects are now supported.

Applying SVG effects to HTML content
You can now apply SVG effects to HTML and XHTML content; this article describes how.

And many more....

But the hope is that ie8 should support HTML5 and css3 with out any bugs. Coz a report says that majority of the people are using ie6 still. for more information on HTML5, please read HTML5

CSS Sprites

2009-06-10T08:51:00.000-07:00

Now a days CSS Sprite plays a major role in developing a web page. One of the techniques developed, sprites being plugged into a master grid, then later pulled out as needed by code that mapped the position of each individual graphic and displayed it on the screen. First of all you need to know how to make a transparent gif image with positions using Photoshop.

Sprites were displayed over a static or dynamic background image, and the positioning of the sprite was controlled simply by the css background positions. To display a single image from the master image, one would use the background-position property in CSS, defining the exact position of the image to be displayed. Any hover, active or focus effects would be implemented using the simple definition of the background-position property for the displayed element.

When a page is loaded, it will load as a single images which is highly useful in reducing the request time of the server. YAHOO, GOOGLE, DIGG, SULEKHA etc... are also using sprite images inorder to load their pages faster.

For example:
You can see the GOOGLE sprite images, how it was created and called using css bacground.

.logo {background:transparent url(/images/sprite.gif) no-repeat scroll -190px -236px;}

CSS Image optimization

2009-06-09T09:31:00.000-07:00

Image optimization, plays a majore role inorder to load your page faster. There are many good image editing tools that allow us to get the best visual result for a certain file size, but they lack in quality. Saving bytes has never been so easy. Smushit! is a service that goes beyond the limitations of Photoshop, Fireworks & Co. It uses image format specific non-lossy image optimization tools to squeeze the last bytes out of your images - without changing their look or visual quality. This tool now is also recommended by YAHOO and GOOGLE.

How it Works
You can give any format image like gif, jpeg or even png. Smushit will convert your given format file into png8 format. PNG true colors such as png24 will not support by ie6, but png8 will be supported by all leading browsers.

I also recommend this. for more optimization info also visit Page Speed by google

Google’s success is the site’s speed

2009-06-08T10:04:00.000-07:00

One of the most fundamental reasons for Google’s success is the site’s speed — search queries typically take a fraction of a second, and most of the company’s other services are usually very snappy as well (save for Gmail, which occasionally bogs down). Part of this speed can be attributed to the company’s obsession with minimalist design and its vast server farms, but you can be sure there’s no shortage of optimization that’s going on to make sure pages load as quickly as possible on the front end, too.

To help streamline its sites, Google has been using an internal tool called Page Speed, and starting today it’s opening up the tool to the developer community. The newly open-sourced tool is a Firefox plugin that integrates with Firebug, making suggestions on how to speed up your site based on best practices.

From the Google blog post:

For example, Page Speed automatically optimizes images for you, giving you a compressed image that you can use immediately on your web site. It also identifies issues such as JavaScript and CSS loaded by your page that wasn’t actually used to display the page, which can help reduce time your users spend waiting for the page to download and display.

If this sounds familiar, it’s because Yahoo offers a similar tool for Firefox called YSlow, which is also meant to help developers streamline their websites.

Html Links

2009-06-03T01:14:00.000-07:00

What is HTML Link?
Now we are going to learn a very important tag which is used to link web pages. As we know websites are collection of web pages, the pages are to be interlinked for easy navigation of information.
You may think that it would be either tag (or) tag for linking pages. But it is not the case here. We use anchor <a> tag. The attribute href=”url” along with <a> tag is used for linking.

Where to use HTML Links
HTML links (or) hyperlinks are commonly used for 4 main purpose. They are internal, local, global and mailto.

* Internal: Link that navigate to the different content of the same page. (For eg: A link which says ‘top’ would take to the top of the same page).
* Local: Link that navigates to the other pages of the same website. (Eg. Link for ‘Contact us’ page from ‘About us’ page)
* Global: Link that take us to other domain / website.
* mailto: This is used to link email address. Clicking on the link would enable us to send email.

How to use HTML Links?

* Attribute ‘href’ is very important where the destination url is given.
* The ‘target’ attribute defines the browser whether to open the linked page in a separate window or in the current window itself.
* In email (or) mailto link, we can also define Subject and body of the mail besides giving email address.

Background Images in CSS

2008-10-23T06:24:00.000-07:00

The background properties are

background-color, which is used to specify the color for background
background-image, which is the location of the image itself.
background-repeat, which is how the image repeats itself. This can be repeat (equivalent to a 'tile' effect across the whole background), repeat-y (repeating on the 'y-axis', above and below), repeat-x (repeating on the 'x-axis', side-by-side) or no-repeat (which shows just one instance of the image).
background-position, which can be top, center, bottom, left, right or any sensible combination, such as above.

@import in CSS

2008-10-05T01:52:00.000-07:00

In CSS the only valid @rule was the @import rule. @import tells a browser to import a style sheet from elsewhere and use it in conjunction with the current style sheet. A style sheet with an @import rule is said to cascade from the imported style sheet. We cover cascading in more detail in our section on Cascade and inheritance in the advanced section of the guide.

The @import rule has the following format.
@import url(http://htmlcsstutorials.blogspot.com/style/style.css);

Alternatively, you can use also use the form.
@import "http://htmlcsstutorials.blogspot.com/style/style.css";

@rules in CSS

2008-10-05T01:49:00.000-07:00

You can think of an @rule as a kind of macro instruction that tells a browser something other than how to draw elements. There are a number of different types of @rules.

Types of borders in CSS

2008-09-20T02:53:00.000-07:00

There are different types of borders to choose from. Below are shown 8 different types of borders 4. The values none or hidden can be used if you do not want any border.

Border: dotted, dashed, solid, double, groove, ridge, inset, outset

Example:
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}

Shorthand Method for border:
Ex:
h1 {
border:1px solid #ccc
}

CSS Dimension

2008-09-16T05:42:00.000-07:00

CSS dimension properties allow you to control the height and width of an HTML element.

For example:
.img{
height:auto;
width:130px;
}

HTML5 VERSION

2008-09-10T00:00:00.000-07:00

On January 22nd, 2008, W3C published the latest working draft for HTML 5.

The HTML 5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera and many hundred other vendors.

HTML 5 introduces a whole set of new elements that make it much easier to structure pages. Most HTML 4 pages include a variety of common structures, such as headers, footers and columns and today, it is fairly common to mark them up using div elements, giving each a descriptive id or class.

The use of div elements is largely because current versions of HTML 4 lack the necessary semantics for describing these parts more specifically. HTML 5 addresses this issue by introducing new elements for representing each of these different sections.

he div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

The markup for that document could look like the following:

<body>
<header>...</header>
<nav>...</nav>
<article>
<section> ... </section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>

Table Defenition

2008-09-06T01:17:00.000-07:00

The table element defines the table.

The tr element defines a table row.

The td element defines a data cell. These must be enclosed in tr tags

For ex:<table>
<tbody><tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
</tbody></table>

Html Email Link Tutorial

2008-09-02T04:05:00.000-07:00

To create html email link, we use mailto in html code of anchor tag in our html document.A valid email address used instead of url to create e-mail link.

HTML code
<a href="mailto:emailaddress@htmlcsstutorials.com" title="Email to me">contact us</a>

HTML Backgrounds

2008-08-26T01:42:00.000-07:00

The code below shows you how to position a background image on a web page with CSS.

Ex:
body
{
background-image:url('image.jpg');
background-repeat: no-repeat;
background-position: top center;
}

The background-position property can have the following values:

Property:
background-position

Values:
op left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos

CSS Font

2008-08-23T00:15:00.000-07:00

You can define the font of text with the use of CSS font properties.

Ex:
h3 {font-family: times;}
h4 {font-family: courier;font-size:12px;font-weight:bold;line-height:16px}
p {font-family: arial;color:#B30000}

The Font family, size, weight and line-height are commonly used font properties in the web page.

The Display Property

2008-08-14T04:57:00.000-07:00

A key trick to the manipulation of HTML elements is understanding that there's nothing at all special about how most of them work. Most pages could be made up from just a few tags that can be styled any which way you choose. The browser's default visual representation of most HTML elements consist of varying font styles, margins, padding and, essentially, display types.

The most fundamental types of display are inline, block-line and none and they can be manipulated with the display property and the values inline, block and none.

inline does just what it says - elements that are displayed inline follow the flow of a line. Strong, anchor and emphasis elements are traditionally displayed inline.

block puts a line break before and after the element. Header and paragraph elements are examples of elements that are traditionally displayed block-line.

none, well, doesn't display the element, which may sound pretty useless but can be used to good effect with accessibility considerations (see Accessible Links), alternate stylesheets or advanced hover effects.

Example:

h4 {
display: inline;
font-size: 2em;
}

#blog p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}

Lengths and Percentages

2008-08-12T04:14:00.001-07:00

There are many property-specific units for values used in CSS, but there are some general units that are used in a number of properties and it is worth familiarising yourself with these before continuing.

em (such as font-size: 2em) is the unit for the calculated size of a font. So "2em", for example, is two times the current font size.

px (such as font-size: 12px) is the unit for pixels.

pt (such as font-size: 12pt) is the unit for points.

% (such as font-size: 80%) is the unit for... wait for it... percentages.

Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches).

When a value is zero, you do not need to state a unit. For example, if you wanted to specify no border, it would be border: 0.

CSS List Style Type

2007-06-11T02:51:00.000-07:00

CSS allows you to select from a wide variety of different list item shapes.

* Unordered list styles: square, circle, disc(default), and none
* Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal(default), and none

Example:
ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }

Margins and Padding

2007-05-29T23:52:00.000-07:00

Margin and Padding are the two most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element.

Example:

.cp_list {
font-size: 14px;
background-color: #ffc;
margin: 10px 0px 5px 20px;
padding: 3px;
}

In this example (margin: 10px 0px 5px 20px;) which say the browser to leave space as top 10px, right 0px, bottom 5px and left 20px... and for padding which will alocate space 3px in all aspects..

The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left

Grouping

2007-05-19T02:05:00.000-07:00

In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed. For example, all of the headings in a document could be given identical declarations through a grouping:

H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif }

HTML Link Tutorial

2007-05-10T21:27:00.000-07:00

Links allow you to link to another document on any other website or from any other website on the internet, including your own. The text that is hyperlinked is called hypertext.

To create a link, you use a starting anchor tag (<a>) and a closing anchor tag (<a>)

The attribute and value href="..." specifies where the link points to. This is typically another url, a file on the computer.

for example: <a href="http://www.htmlcsstutorials.blogspot.com">htmlcss tutorials</a>

Span and Div with CSS

2006-12-16T02:03:00.000-08:00

The <span> and <div> tags are very useful when dealing with Cascading Style Sheets.

The div tag defines logical divisions (defined) in your Web page. It acts like a paragraph tag, but it divides the page up into larger sections.

The primary attributes of the div tag are:

* style
* class
* id

Span

The span tag has very similar properties to the div tag, in that it changes the style of the text it encloses. But without any style attributes, the span tag won't change the enclosed items at all.

The primary attributes of the div tag are:

* style
* class
* id

CSS vs HTML

2006-12-14T02:39:00.000-08:00

HTML document, a Cascading Style Sheet is just a simple text file. Unlike an HTML document, you don't need a special declaration at the top of the file to say that this is a style sheet. The name of the file should however end with a .css suffix. In addition to being in .css files, style sheets can also be embedded into the <head> of HTML files.

Applying CSS

2006-12-03T06:35:00.000-08:00

There are three types of applying CSS to html. They are as follows...
1) Inline
2) Internal
3) External

In-line:

In-line styles are put straight into the HTML tags using the style attribute.
Ex: <p style="color: red">Blog</p>

Internal:

Embedded, or internal styles are used inside the head tags.
Ex: <style type="text/css">
a {
color: blue;
}
</style>

External:

External styles are used for the multiple-page website. Used inside the head tags
Ex:<link rel="stylesheet" type="text/css" href="style.css" />

Box Properties

2006-12-02T02:20:00.000-08:00

The box properties control borders, padding, and margins around HTML elements.

Css Structure

2006-12-01T01:52:00.000-08:00

Selector:

The selector is an element which is linked to a particular style.

Class Selectors:

A selector can have different classes, which allows the same element to have different styles. For example,

#page.p{margin:0px;padding:0px}

Font Properties

2006-11-30T00:57:00.000-08:00

These are commonly used font properties for developing website.

* Font Family
* Font Style
* Font Weight
* Font Size
* Line height
* Color

What are the properties of a table?

2006-11-29T01:10:00.000-08:00

PROPERTIES OF A TABLE:

The general properties used in a table are as follows:

Width
Height
Border
Cellspacing
Cellpadding

What is a table?

2006-11-28T00:44:00.000-08:00

A table is divided into rows and each row is divided into data cells . The td stands for table data, which is the content of a data cell. Data cell can be consits of text, images etc.

TR:
The TR tag is defined as table row.

TD:
The TD tag is defined as table data or table description.

Table Structure:

The table structure consists of:

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

What is CSS?

2006-11-27T01:53:00.000-08:00

Style sheets is a very powerful tool for the Web site developer. CSS consistent the look and feel of your pages, giving you much control over the layout and design than straight HTML. Cascading means multiple style sheets can be applied to the same Web page, Styles define how to display HTML elements. The CSS is used for efficient and time saving against HTML coding. It also used for flexibility. The .css file is used to present the text in a formatted one, as pictured in .psd files. This .css file can be called into the .html as class or style format.

What is HTML?

2006-11-27T01:51:00.000-08:00

HTML stands for Hyper Text Markup Language. An HTML file is a text file containing markup tags. This markup tag tells the web browser how to display the page. HTML file can be saved as htm or html file extension. An HTML file can be created using simple text editor such as Notepad. The Purpose of using HTML is used to reduce file size and for easy downloads.