css

Creating vertical column in html table

In this tutorial I will show you that how can we create vertical column in HTML table.
Bellow is HTML for it:

& bellow is css code for it:

Click here to see demo of This

Bellow is live example:

Using border-radius css property



In this tutorial I will show you some styles using border-radius css property.

Light
Heavy
Full
Barrel Verticle
Barrel Horizontal

Using gradiants in background-image css property


In this tutorial I will show you that how can we use gradient in background css property

Light Linear
Dark Linear
Light Radial
Dark Radial

Using box-shadow css property



In this tutorial I will show you some of the box-shadow css property uses.

Top
Right
Bottom
Left

Dark
Light
Inset
Border

Light
Heavy

How to apply different styles to columns of webgrid in MVC3 razor

In webgrid for each column we can specify “style” attribute.
The style attribute should to have a class name which you have defined in css file.

Example:

and class will be defined in css file like this.

Like this we can define any style of any column of webgrid.

Give a common CSS to all input tags of html

You may want to give all input tags a common CSS. That is you want all your Text Fields, Password Fields, Radio button, Submit buttons etc… all to have a common CSS.

This can be done easily by simply including the below code in your CSS file as shown below. Here I am giving all my input tags a common font of 13px size and Calibri as font-family.

Like this we can add css for any html tag.

How to change color or background of the menu tab of current page using css & jquery

In this tutorial i will show you that how can we change the color or background of the menu tab when we are on that page.

The css is somthing like this….

and a small jquery which does all magic is …

How to show large image on mouse click on the small image using JavaScript in asp.net ?

In this tutorial I will show you how we can use java script to display the large image by clicking on the small image.

Steps:

Create new website.

Now add one more div tag in the body ….

Drag the image control in the body of the form (also set the attribute ImageUrl to some image in the project )& place it after the above div tag.

Now add the following javascript in the head of the page.

This will look something like this…..

Just keep in mind that id of the empty div & id in the script should be the same (i have indicated in the Green colour in the above mark-up)

Like this we can make much more things ….I have made this…..

How to make the height of the DIVs equal ?


In this tutorial i will show how can we make the heights of two divs equal by using jquery css.

I found this jquery when i was searching for the same question on net & it works perfectly.
We might have some divs which has different heights some thing like shown in image besides, but we want both divs to be of same height .

We can use jquery for doing this insted of changing the css .

This is the jquery which works perfectly….

What does this jquery do ?

It sets the “tallest” equals zero & then loops through each div in the

group & sets the tallest height as highest height of the “tallest” variable.

Value of the “tallest” variale is applied to whole group.

So to equalize the height of each div we need to do this…

where “.container” is the class of which is applied to each of the div…..

Lets see the bellow example to understand more ….

Without jquery output will be something like this….

While applying jquery we need to take care of some things…

1. all divs which should have height equal should be applied with float:left or right & some width.

2. < script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> should be there , else jquery wont work.

3. “.container” class should be applied to each div . & in jqury as shown.

So after applying this jquery output should look something like this…

I found this on http://www.cssnewbie.com/equal-height-columns-with-jquery/ website ….

We can do same thing with more than 2 divs also….

How to change the style of the row of gridview on mouse hover using css?

Changing style of the row of gridview on mouse hover.

Steps:

1. Take one gridview from toolbox & bind the data to it.

2. run the page & viw the page source of the page. There you will find that one table is created for the gridview , so for each tr we can assign the style & which will take effect at runtime.

3. So in head of the page inside tag write the css.

You can write css something like this….this will change the background color of the row as well as font of the text in the row.

 Scroll to top