Archive for the ‘ CSS ’ Category

Structured Process of Developing a Web Application

A small presentation that will help the beginners to understand the process of developing a Web application.
I did this presentation for the my Team @ Office to give them the idea of the whole process.

Replace your default List Images/bullets with Images

By Assigning images for bullets in css you can do it simply.

list-style-image: url(‘yourimage.gif’);

Ever wanted a scroll bar for your table ?

Have you ever wanted scrollbars for your table? it is simple folk.
yourdiv style=”overflow:scroll;height:80px;width:100%;overflow:auto”
yourtable here
yourdiv

Change the usual hr tag with images


div.hr {
height: 15px;
background: #fff url(hr1.gif) no-repeat scroll center;
}
div.hr hr {
display: none;
}

yourdiv class="hr" your hr here /yourdiv

Add a background image for Fieldset

If You want to add some bg image for filedset you can do it as follows


< fieldset>
< legend class="smallWhiteText" style="height:20px;width:151px;background-image: url(../x_images/tab_blue.gif)">
< /legend>
< /fieldset>

Want to apply more than one style to an element?

If you want to apply styles that are defined as more than on style in your css, and you want to apply two or three of them combined and applied to a new elt of you html page ?
simply use like this.
class=”infobox smallGreyCaptionLight”
if u give class=”infobox; smallGreyCaptionLight” then the last style only will be applied. avoid semicolon in between the style names to apply the both

Cursor:hand not working with mozilla/firefox

Mostyle our CSS code likely looks like: cursor: hand; This is not working in mozilla,firefox except IE. The reason is IE supports the keyword hand and mozilla, netscape, firefox do not.
If You want to use cursor: hand; to work on all the browsers, simple use
Cursor: pointer

Feedback Form