While surfing you often see the attractive metallic buttons on the websites. Now I am going to explain the procedure to create the metallic button with round corners in adobe photoshop.
Step 1: Open photoshop and start a new document of 300×100 pixels and 72 pixels/inch.
Step 2: Insert new layer then select rounded rectangle tool, set radius 4px and draw a rectangle as shown below(With any color). Read the rest of this entry »
It is very common practice for webmasters to change default style of submit button in html forms. It is easy to change default background image of button in firefox using CSS and it is equally easy in case of internet explorer but a bit tricky.
Here is the code to change style of button including background image with multi browser compatibility.
. submit-button {
background-color:transparent;
background-image:url(images/button.gif);
border:1px solid #CCCCCC;
font:14px Arial, Helvetica, sans-serif;
color:#FF3333;
width:100px;
height:30px;
}
background-color:transparent is required to show background image in case of internet explorer, it is not required in case of firefox.
Here I am going to explain you the steps to create equal height columns without using image.
1. First of all you need to create a container and two columns inside the container. Here is the code:
<div id=”container”>
<div class=”leftcol”>This is column 1</div>
<div class=”rightcol”>This is column 2</div>
</div>
____________________________________________
Now make overflow of container hidden in style sheet Read the rest of this entry »
In this tutorial you will learn to create a three column layout using css, and divs
Here is the sample sketch of layout.
1. First of all we need to create a container for page contents.
<div id=”container”> </div>
2. Now create three partitions of it by creating three divs(header, content and footer) inside the container tag.
3. Finally add three more divs inside the content part. We will use these three divs to create columns in content area.
Html code for above code is: Read the rest of this entry »
In this tutorial you will learn the use of float property in css. We will create two unordered lists and align them side by side. Write the following code in your html page. You can use any text editor or software like dreamweaver for that.
<div id=”test”>
<div class=”lefty”>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div>
<div class=”righty”>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div>
</div>
Now make these entries to your css file: Read the rest of this entry »